CSS finta zo Zenovej záhrady: obrázok namiesto textu

od autora: ·

Trošku zanalyzujeme zenovu záhradu a niektoré finty vypichneme:
Podstatou tvorby xhtml+css je aj zjednodušenie kódu dokumentu, v konečnom dôsledku návrat k pôvodnému zmyslu značiek a zároveň zachovanie moderného pojatia designu stránok. Preto je možné jednoducho formátovaný dokument pekne vyčačkať. Dnes sa zameriam na hlavičku dokumentu, kde býva väčšinou logo stránky.


Správne by mala stránka byť spravená teda tak, že bez CSS by sa namiesto loga stránky mohol zobraziť textový nápis. Prehliadač s podporou CSS v prípade, že dovolíme importnúť predpis vzhľadu v CSS potom ošperkuje suchý dokument.
Pokiaľ by som ale robil dokument a css nejako takto:

<h1>logotyp</h1>

s definiciou css:

h1 { background: url("logotyp.gig");width:200px;height:80; }

tak sa nám dobre zobrazí textová verzia stránky ale v prehliadači s CSS sa už zobrazí obrázok prekrytý textom.
Pre náš prípad by sme ale chceli vo vyčačanej stránke ten text vo vnútri tagu H1 schovať.
Čo keby sme to spravili takto v css:

#pageHeader h1 {
background: transparent url(h1.gif) no-repeat top left;
width: 219px;
height: 87px;
float: left;
}
#pageHeader h1 span {
display:none
}

v kóde dokumentu:

<div id="pageHeader">
<h1><span>css Zen Garden</span></h1>
</div>

Čo sme to spôsobili?
V kóde sme navyše použili úplne neaktívnu značku SPAN (v žiadnom prehliadači by nemala mať význam pokiaľ neurčíme v CSS inak). Do nej sme uzavreli text. Najprv sme si predefinovali v CSS značku H1 na vykrášlenú obrázkom. Potom sme ale zakázali zobrazenie textu uzavretého značkou SPAN.
Aby sa nám neschovali aj ostatné časti dokumentu v SPANoch, tak sme to obmedzili len na ID značiek s názvom pageHeader. Tento CSS predpis teda bude fungovať len u značiek s takýmto menom.
Trik prevzatý z http://www.stopdesign.com/articles/css/replace-text/
Ospravedlňte slamácky popis, nechcem pôsobiť ako odborník na CSS, proste som dúfam, zasa niečo pekné pochopil a vyrozprával radšej slovami „začiatočníka“.

Môže sa Vám ešte páčiť...