[CSS][HTML]Cięcie skośnych tabów Opcje

[fire_dept]

Witam mam do pocięcia dynamiczne zakładki coś tak ja obrazku poniżej.



Z tym, że nie mam zielonego pojęcia jak pociąć je po skosie żeby dało się je dynamicznie dodawać i rozszerzeć.
Proszę o pomoc.

[thek]

Najfajniej byłoby użyć before i after z CSS, ale nie wszystkie przeglądarki to obsługują. Pozostaje chyba Ci zwykłe kombinowanie z odpowiednio pociętymi obrazkami niestety.

[wookieb]

Bez pozycji absolutnej/relatywnej się nie obejdzie.

Html mniej więcej w ten sposób

[HTML] pobierz, plaintext 
<a>
 <span class="left_side"></span> // obrazek lewego sciecia
 <span class="inside"></span> // tekst
 <span class="right_side"></span> // obrazek prawego sciecia
</a>
[HTML] pobierz, plaintext 

Mniej wiecej css

[CSS] pobierz, plaintext 
a .left_side, a.right_side
{
 display: inline-block;
 // reszta parametrow
}
 
a:hover .left_side
{
 // zmiana obrazka
}
[CSS] pobierz, plaintext 

O position absolute + margin_left / relative + left chyba nie muszę wspominać

Ten post edytował wookieb 13.08.2010, 15:16:13

[cros]

zwykle przezroczyste png wystarcza do tego i odpowiednie zmanipulowanie minusowym marginesem.
oczywiscie wszystko w span, badz div z display:inline

Ten post edytował cros 13.08.2010, 15:17:55