[Résolu] Menu en onglets

Salut à vous !

Je souhaite avoir un menu horizontal ressemblant à des onglets. Ma seule contrainte est d'avoir une ligne qui occupe toute la largeur de ma page.

Mon problème est que je ne parviens pas à avoir une ligne horizontal inférieur et qui touche tous mes onglets sous tous les navigateurs web...

Voici l'exemple : Menu sous forme d'onglets avec ligne horizontal touchant tous les onglets.

Ca fonctionne sous Firefox, Opéra et IE9 mais ça ne fonctionne pas sous Chrome et Safari...

D'avance merci pour vos précieux conseils d'intégration !!!!

edit: problème de double http dans l'URL.
Modifié par Alphonse (28 Jun 2012 - 15:51)

Salut,

Tu a ton onglet actif qui a une bordure de 1px, alors que les autres n'en ont pas, donc c'est lui qui pousse la ligne vers le bas.

En effet, bordure supprimée pour l'onglet actif.
Mais ce n'était pas elle qui pousse la ligne vers le bas !

Tes LI sont en display:inline. L'espace vertical qu'ils occupent ne va pas forcément impacter la hauteur de leur parent, tu peux le voir par exemple si tu rajoutes du padding-bottom sur tes liens.

Avec des liens en display:inline-block ça devrait résoudre le problème (et te permettre d'ajouter un léger padding-bottom sur tes liens).

fvsch a écrit :
Tes LI sont en display:inline. L'espace vertical qu'ils occupent ne va pas forcément impacter la hauteur de leur parent, tu peux le voir par exemple si tu rajoutes du padding-bottom sur tes liens.

En effet, c'est ce que je pouvais constater.

fvsch a écrit :
Avec des liens en display:inline-block ça devrait résoudre le problème (et te permettre d'ajouter un léger padding-bottom sur tes liens).

La solution semble assez logique mais je n'y aurai probablement jamais pensé !!! Merci beaucoup !!!

Re-bonjour !

Problème uniquement présent sur IE6 et IE7...

Si je souhaite modifier la taille de mon texte à l'intérieur de mes onglets alors un espace indésirable apparaît entre mes onglets et ma ligne horizontale...

Pour rappel, voici l'URL : IE6 et IE7 : espace indésirable

Merci d'avance !
Modifié par Alphonse (18 Jul 2012 - 12:47)

Tu pourrais faire ça :

ul#onglet:after
{
clear:both;
content:"";
display:block;
}

ul#onglet li
{
display:block;
float:left;
margin-right:1px
}

Plutôt que de mettre un display:inline sur tes listes.

Mais sous IE6-7-8, la ligne apparaît au-dessus des onglets au lieu d'apparaître en-dessous...

SuperMerguez> Ta solution a l'air parfait à l'exception que la ligne verticale est passée par dessus les onglet sous IE 6, 7 et 8.

Perso, je ne vois pas comment résoudre ce problème... Si quelqu'un a une idée, elle est vraiment la bienvenue !

J'ai fait le test sous IE7 j'ai bien la petit bordure horizontale en dessous des onglets. J'ai peut être mal copié ce que j'avais fait dans mon précédent post.

En fait il faut clear après tes éléments flottant et normalement, je dis bien normalement, ça doit marcher.
Modifié par SuperMerguez (18 Jul 2012 - 15:45)

Je teste sous IE6 et IE7 à l'aide de IE Tester... Je n'ai malheureusement plus d'IE6 ou IE7 original sur lesquels je peux tester !

Donc, tu me confirmes qu'avec cette page, la ligne apparaît bien en-dessous des onglets et pas au-dessus ?