[Résolu] Comment gèrent-ils dynamiquement la longueur des onglets ?

Bonjour,

Je suis tombé sur le site http://gigaom.com et je n'arrive pas à comprendre comment ils font pour gérer dynamiquement la longueur des onglets tout en ayant une image de fond

En effet, la longueur de l'image est supérieure à la largeur minimale de l'onglet mais à l'écran tout est toujours bien ajusté

J'ai besoin de vos lumières pour comprendre.

Merci d'avance
Modifié par pyxosledisciple (14 Dec 2006 - 17:06)

tu peux regarder ça pour des onglets de largeurs différentes
http://css.alsacreations.com/xmedia/exemples/onglets/onglets.htm

En fait le principe est assez simple :

- Tu as un premier background aligné à gauche et appliqué sur les éléments de liste <li>. Il s'agit du bord gauche de ton onglet. Chaque élément de liste possède un padding-left d'une valeur légèrement supérieure à la largeur de ton image.

- Sur ton lien <a> transformé en block, tu appliques un 2nd background aligné à droite. Il s'agit du reste de ton onglet. En général on le fait assez long (150px par exemple) pour être sûr qu'il recouvre tout le lien, quelle que soit la longueur de celui-ci.

Ton élément de liste contenant un padding-left, le lien (et donc son arrière-plan) ne le recouvrent pas totalement et laisse donc apparaitre le bord gauche de ton onglet...

Et voilà, le tour est joué

Cygnus a écrit :
En fait le principe est assez simple :

- Tu as un premier background aligné à gauche et appliqué sur les éléments de liste <li>. Il s'agit du bord gauche de ton onglet. Chaque élément de liste possède un padding-left d'une valeur légèrement supérieure à la largeur de ton image.

- Sur ton lien <a> transformé en block, tu appliques un 2nd background aligné à droite. Il s'agit du reste de ton onglet. En général on le fait assez long (150px par exemple) pour être sûr qu'il recouvre tout le lien, quelle que soit la longueur de celui-ci.

Ton élément de liste contenant un padding-left, le lien (et donc son arrière-plan) ne le recouvrent pas totalement et laisse donc apparaitre le bord gauche de ton onglet...

Et voilà, le tour est joué

Merci pour tes explications

mathieu2 a écrit :
tu peux regarder ça pour des onglets de largeurs différentes
http://css.alsacreations.com/xmedia/exemples/onglets/onglets.htm

Merci pour ces infos mais je ne veux pas m'en servir ici à cause de l'utilisation des hacks.
Par contre, je constate donc qu'IE 7 ne gère toujours pas correctement les before et after