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>&nbsp;</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é.

evaluation

Komentáre

comments closed