13. máj 2003 22.55 WEB
CSS finta zo Zenovej záhrady: obrázok namiesto textu
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".
pošli do vybrali.sme.skKomentáre k obsahu príspevku:
Chcete napísať nesúhlasný komentár? Prosím, zvážte nasledovné: je šanca, aby niekto zmenil Váš názor alebo chcete iba trvať na svojom? V prvom prípade sú Vaše slová vítané.
Chcete urážať? Nepíšte sem urážky a invektívy. Každý, kto na týchto stránkach publikuje je automaticky (doplňte vhodný výraz). Takže už to všetci vopred vieme, čo si myslíte a preto sa neopakujte.
-
- A tvoj názor?
