Jak na Logo
V dnešním článku se podíváme na správnou konstrukci hlavičky (headeru, loga..), aby byla co nejvýhodnější z hlediska vyhledávačů(SEO), sémantiky a přístupnosti.
Co by měla hlavička(logo) splňovat?
1)Měla by být klikací(odkaz na homepage). 2)Zobrazit alternativní text při vypnitých obrázcích a zapnutých stylech. 3)Zobrazit aleternativní text při vypnutých stylech. 4)Měla by být jako hlavní nadpis stránky. 5)Měla by být dynamická.
Jak toto všechno splníme?
HTML:
<h1><a href="homepage">Uvodní stránka<span> </span></a></h1>
CSS:
h1,h1 a,h1 a span{
width:800px;
height:150px;
display:block;
}
h1 a{
position:relative;
}
h1 a span{
position:absolute;
top:0px;
left:0px;
z-index:1;
background: url("logo.gif") top left no-repeat;
}
Nyní objasním jak kód funguje. Nejdříve vytvoříme nadpis h1 a do něj vložíme odkaz, kterému dáme maximální rozměry uvnitř nadpisu. Odkaz pozicujeme, abychom mohli absolutně pozicovat span, který je uvnitř odkazu. Span tedy absolutně pozicujeme a nastavíme mu vlastnost z-index na hodnotu 1. Tím jsem dosáhli toho, že span překryje textový odkaz. Pak už stačí jen přiřadit spanu na pozadí nějaký obrázek a jsme hotovi.
Jednoduché, ale účinné.
