Dnes si pro změnu ukážeme, jak jednoduše vytvořit klikací logo
Klikací logo i s obrázkem na pozadí
Docela často se na internetu setkáváme s klikacím logem. Ne každé ale funguje tak, jak by mělo. Funguje vaše logo i při vypnutých obrazcích, popřípadě kaskádových stylech? Ne? Tak pro vás je určen tento návod.Kopmletní použití kaskádových stylů nám velí striktně oddělit grafickou podobu od obsahu. To znamená že i logo musíme zakomponovat do externího CSS souboru jako pozadí a nemůžeme z něj udělat odkaz. Tedy pokud chceme mít dokument validní, neboť použití a href před blokovým elementem DIV se nám jeví jako invalidní. Vše nám zajistí řádkový element span. Na názorném příkladu si celé řešení ukážeme. V (X)HTML dokumentu zapíšeme kód pro klikací logo takto:
<h1><a href='http://www.mojestranka.cz' title='Jít na úvodní stránku'>Nějaký nadpis
<span></span></a></h1>
V CSS musíme nadefinovat prvky h1 a span:
h1 {overflow: hidden;}
h1 span {display:block; position:absolute; left:0; top:0; z-index:1; width:700px; height:150px; background: url(logo.jpg) top left no-repeat;}
Jednoduše řečeno, pomocí značky span jsme vytvořili řádek, kterému jsme zadali pevnou výšku a šířku (rozměry našeho loga v pixelech), na jeho pozadí umístili obrázek s logem, kterému jsme pomocí z-indexu dali vlastnost, že bude od okolních prvků vždy navrchu.
Při vypnutí všech obrázků, na stránce nám zmizí logo na pozadí, ale nadpis h1 zůstane. Podobně je tomu u vypnutí kaskádových stylů.
Autor: Ondřej Kůrka
2024 ©