CSS rolloveriai
Kažkas #php kanale paklausė, kaip įmanoma padaryti su CSS, kad pasikeistų lentelės langelio fonas. Šiek tiek pasikrapštęs (aišku galėjau paieškot internete, bet su GPRS gyvenu) sukurpiau panašų dalyką, visai be lentelių. Kiek bandžiau, jis veikia su IE6.0, Opera 7.0 ir Phoenix0.5 (tiksliau beveik 0.6 – kažkoks naktinis buildas). Štai šio dalyko kodas:
<style type="text/css">
.list { margin: 0ex; padding: 0ex; }
.list li {
border: 1px solid #333;
background: #999;
color: #333;
display: block;
float:left;
}
.list li a {
padding:0.0em 1em 0.0em 1em;
color: #333;
background: #999;
text-decoration: none;
}
.list li a:hover { background: #ccc; color: #333; }
</style>
<ul class="list">
<li><a href="foo">foo</a></li>
<li><a href="bar">bar</a></li>
<li><a href="baz">baz</a></li>
</ul>
W3C CSS validatorius sako, kad šiame CSS klaidų nėra. Visas šis dalykas padarytas su nesunumeruotu sąrašu (<ul> ir <li>. Tai iš HTML pusės). Klasei „list“ nustatytos nulinės paraštės (nes pagal nutylėjimą <ul> yra pridedama nemaža paraštė iš kairės). Visa magija, kurios pagalba <li> neišsidėsto vertikaliai yra eilutėse display: block; ir float: left;.
Visa problema su IE yra tame, kad jis leidžia uždėti :hover tik „<a>“ elementui. Lengviausia būtų uždėti skirtingą foną elementui .list li:hover, bet tai neveiks IE (o kad ir kaip ten būtų, visgi IE naudoja apie 80% piliečių). Todėl į <li> įdedam <a> ir su CSS jį praplatinam per visą plotį padidindami „padding“. Vienintelis dalykas, kurį liko padaryti – pakeisti foną, pelei užėjus ant nuorodos. Tai aprašoma .list li a:hover elemente.
Tikiuosi bent jau kam nors buvo šiek tiek naudos ;)