[Résolu] Onglets en CSS

Bonjour à tous !
Je m'appelle Timotei, ceci est mon premier message sur ce forum, donc voilà pourquoi je me présente.

Je créé une application web pour une entreprise et j'ai actuellement un petit défaut CSS qui me chagrine que je ne parviens pas à résoudre malgré quelques semaines de réflexions dessus.

Sur l'image suivante, voyez les onglets, à droite, il y a un trou sur la bordure. Cela arrive uniquement quand un des fichiers ci-dessous a un nom trop long et déforme la division.

http://img503.imageshack.us/img503/4586/47289998.th.jpg

Détails
- Actuellement, les onglets sont des divisions construits de la manières suivantes :
<div de l'onglet><div gauche></div><div milieu>Image - lien</div><div droite></div></div>
Et ces div sont dans une autre div avec un float left et un clearer derrière. Je ne souhaite pas passer à des tableaux (sauf si vous m'affirmez que c'est l'unique solution)

- ça peut ne pas marcher sur IE, ça m'est égal. Ce qui m'importe c'est surtout Firefox, Opera, Safari et Chrome

- Les onglets ne doivent pas etres extensibles pour prendre toutes la place, ça fait moche un texte au milieu d'un onglet géant, j'aime bien qu'il s'arretent avant la fin

- Je ne peux pas mettre de bordure à toute la division en dessus ou en dessous car je veux conserver le trou sous l'onglet actif


En fait, ce que je recherche, c'est un peu mettre une division bidon avec bordure bottom qui prend pour taille *px ou * est le reste pour compléter la taille de la division englobante qui est est en taille variable par rapport au texte contenu.
Je croyais qu'il y avait une propriété css pour ça genre :
width : *px; mais non, ça ne marche pas.

Une idée ?

Merci d'avance
Modifié par Timotei (19 Jun 2009 - 11:13)

Bonjour,

Mets une bordure à toute la vision et pour l'onglet actif met lui une bordure bas de la couleur du fond (donc blanc).

Si je mets une bordure à la division englobante et que je mets une bordure blanche pour l'onglet active, il ne va pas effacer la bordure noire de la division englobante, elles vont simplement se suivre.
Sinon si c'est mettre des bordures sur les divisions onglets, bien c'est déjà le cas et comme il n'y a pas d'onglet sur le reste, c'est là que ça dérange.

Toujours pas d'idée pour ce petit problème de css ?

salut,

si tu utilise une balise <li> pour afficher tes onglets, alors la propriété width ne fonctionne pas, il faut utiliser line-width.

J'espère que ça résoudra ton problème.

Kanab a écrit :
salut,

si tu utilise une balise <li> pour afficher tes onglets, alors la propriété width ne fonctionne pas, il faut utiliser line-width.

J'espère que ça résoudra ton problème.

Bonjour,

La propriété line-width n'existe pas

et de plus, j'utilise des divisions

Salut,

Comme t'a dit Laurie-Anne mais en ajoutant un décalage vertical d'1 pixel sur l'onglet actif vers le bas ? (via position relative)

Merci ça fonctionne ! C'est une excellente idée !