Exista multe metode de a crea butoane, insa nici una nu pare ca este mai folosita ca taburile cu colturi semirotunde. Cel mai popular exemplu este siteul amazon.com, amintit in mai toate tutorialele care isi propun sa atace aceasta problema.
In realizarea taburilor generice ne vom lovi cel mai adesea de incompatibilitati intre browsere. Nu spun ca sunt bug-uri, ca sa nu acuz pe nimeni in particular. Voi aborda o rezolvare din perspectiva standardelor w3c, pentru a ma asigura ca taburile se vor randa bine pe majoritatea browserelor. Veti fi surprinsi, asa cum am fost si eu, ca o astfel de abordare ne aduce, in acest caz, aceleasi rezultate pe IE6/7, pe Firefox si pe Opera 9.
Vreau sa realizez meniul dupa urmatoarele conditii:
taburi cu text, nu cu imagini
linkul sa fie setat pe tot tabul, nu doar pe text
cod valid
html simplu
fara javascript, doar css
downgrade perfect pentru browserele fara css
Pentru a realiza taburi, avem de obicei doua optiuni. Prima ar fi sa adaugam imaginile 1 si 3 inainte si dupa fiecare tab, pentru a realiza colturile. Insa aceasta tehnica ar incarca foarte mult codul HTML si ar fi redundanta. Sa incercam sa facem acelasi lucru folosind CSS.
Dupa cum stiti, CSS2 a implementat state-urile :before si :after pentru fiecare element. Din pacate, Internet Explorer nu stie de existenta lor. De aceea, multi folosesc javascript pentru a realiza acelasi efect. Un exemplu excelent pare libraria oferita de Dean Edwards. Prin incluziunea unui singur fisier .js, IE se va comporta frumos, ca un browser compatibil cu standardele.
Insa ma gandesc ca am putea avea o solutie mai simpla, daca am accepta un container in plus pentru fiecare buton. In primul rand, ne trebuie cele trei imagini. Puteti folosi imaginea mea, sau puteti crea alta. Dupa ce avem cele trei gifuri, le vom plasa intr-un meniu standard, folosind css. Iata codul HTML pe care il vom folosi (nimic nou sub soare):
<ul>
<li><span>This is a long tab</span></li>
<li><span>Another one</span></li>
</ul>
Vom folosi containerul "li" pentru a plasa imaginea din stanga, iar containerul "a" pentru cea din dreapta. Spanul este pentru linia de sus. Iata clasele:
ul.menu{
list-style:none;
}
ul.menu li{
padding:5px 0;
float:left;
background:url('images/before_corner.gif') no-repeat;
}
ul.menu li a{
background:url('images/after_corner.gif') no-repeat 100%;
padding:5px 0;
text-decoration:none;
}
ul.menu li span{
background:url('images/bg_corner.gif') repeat-x;
margin:0 17px; padding:5px 0;
}
Marginurile si paddingurile va vor ajuta sa mariti spatiul dintre colturi si text, in interiorul butonului - acum 17px - precum si inaltimea butonului, care acum este setata la content+5px.
Presupun ca majoritatea dintre voi ar dori ca taburile sa clipeasca. Pentru acest feature, avem nevoie, desigur, de inca trei imagini. Pentru a obtine efectul in CSS, vom folosi state-ul node:hover pe cele trei noduri care contin imaginile: a, li, span.
ul.menu li:hover{
background:url('images/before_corner_hover.gif') no-repeat;
}
ul.menu li a:hover{
background:url('images/after_corner_hover.gif') no-repeat 100%;
}
ul.menu li span:hover{
background:url('images/bg_corner_hover.gif') repeat-x;
}
Surprinzator. Firefox si Opera nu aplica insa :hover si peste marginile spanului setate cu margin. Efectele sunt vizibile daca faceti hover pe colturi. Putin Javascript poate rezolva aceasta problema, insa am spus ca nu vreau sa il folosesc. Din pacate, cel mai popular (inca) browser de pe planeta, IE6, nu recunoaste :hover decat pe elemente de tip a. Asa ca, daca dorim hover, va trebui sa apelam la mici workarounduri.
Insa cea mai simpla solutie este sa folosim libraria lui Dean Edwards, de care vorbeam mai devreme. Rezolva aceasta problema si probabil multe altele. Iata cum o putem include doar pentru cei care folosesc Internet Explorer:
<head>
....
</head>
Singura problema care a mai ramas este in Opera 8.5 si versiunile mai mici: coltul din dreapta nu se vede, datorita unui bug ce tine de pozitionarea fundalului. Nu am reusit sa remediez aceasta problema, insa Opera 9 randeaza bine. Daca are cineva vreo solutie, va rog sa-mi spuneti si mie.
Subiect: Taburi CSS 
