largeur fixe dans un menu onglets CSS?

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par rugbyredon, 20 Mars 2009.

  1. rugbyredon
    rugbyredon Nouveau WRInaute
    Inscrit:
    24 Avril 2008
    Messages:
    16
    J'aime reçus:
    0
    Bonjour
    Je me permets de laisser un message ici parce que je n'arrive pas à trouver une solution à mon problème...
    J'ai fait un menu avec onglet sen CSS tout standard et je souhaiterai que ces onglets soient tous de la même largeur car ils se calent sur le texte du menu...

    Je vous montre le code, mon html c'est ça:
    Code:
    <div class="barre">
    	<ul class="onglet">
    		<li ><a href="lien1.html" >Lien 1</a></li>
    		<li ><a href="lien2.html" >Lien beaucoup plus long</a></li>
    		<li ><a href="lien3.html" >Lien 3</a></li>
    		<li ><a href="lien4.html" >Lien 4</a></li>
            </ul>
    </div>
    
    et le CSS c'est celui là:

    Code:
    .barre {
     display:none;
    }
    
    .barre {
     padding-top:130px;
     display:block;
    }
    ul.onglet
    {
     margin:0;
     padding: 3px 0.5em;
     font: bold 12px Verdana, sans-serif;
    }
    
    ul.onglet li
    {
     list-style: none;
     margin: 0;
     display: inline;
    }
    
    ul.onglet li a
    {
     padding: 3px 0.5em;
     margin-left: 3px;
     color: #000;
     text-decoration: none;
     border-right: 1px solid #778;
     border-top: 1px solid #778;
     border-left: 1px solid #778;
     background: #DDE;
    }
    
    ul.onglet li a:link { 
     padding: 3px 0.5em;
     margin-left: 3px;
     text-decoration: none;
     border-right: 1px solid #778;
     border-top: 1px solid #778;
     border-left: 1px solid #778;
     background: #DDE;
    color: #448; 
    }
    ul.onglet li a:visited { 
     padding: 3px 0.5em;
     margin-left: 3px;
     text-decoration: none;
     border-right: 1px solid #778;
     border-top: 1px solid #778;
     border-left: 1px solid #778;
     background: #DDE;
    color: #667; 
    }
    
    ul.onglet li a:hover 
    {
     padding: 3px 0.5em;
     margin-left: 3px;
     color: #000;
     text-decoration: none;
     background: #AAE;
     border-color: #227;
    }
    .barre {
     padding: 3px 0.5em;
     border:1px solid #aaa;
     border-top:0;
    }
    
    Est ce que vous savez où je pourrai mettre un paramètre pour fixer la largeur de l'onglet et qu'ils soient tous de la même largeur que l'onglet le plus long? :mrgreen:
    Merci beaucoup
     
  2. u94082
    u94082 WRInaute occasionnel
    Inscrit:
    23 Août 2008
    Messages:
    257
    J'aime reçus:
    0
    Salut,

    Il faut appliquer un display block sur les li de la liste onglet pour pouvoir utiliser width, en fonction du lien le plus long.
     
  3. nickargall
    nickargall WRInaute accro
    Inscrit:
    13 Juin 2005
    Messages:
    6 601
    J'aime reçus:
    4
    merci antinomx, je cherchais justement à faire ça :)
     
  4. rugbyredon
    rugbyredon Nouveau WRInaute
    Inscrit:
    24 Avril 2008
    Messages:
    16
    J'aime reçus:
    0
    Mais du coup, mon "display inline" est neutralisé et le menu n'est plus horizontal... je ne mets peut être pas mon display au bon endroit, je l'ai mis dans "ul.onglet li a" alors j'ai un très joli menu avec effectivement la largeur que je souhaite mais où mettre ces paramètres pour que le menu reste horizontal?
    Merci beaucoup
     
  5. u94082
    u94082 WRInaute occasionnel
    Inscrit:
    23 Août 2008
    Messages:
    257
    J'aime reçus:
    0
    Il faut ajouter float:left sur tes li.
     
Chargement...
Similar Threads - largeur fixe menu Forum Date
Largeur du conteneur fixe sur FIREFOX et changeante sur IE Demandes d'avis et de conseils sur vos sites 19 Mars 2006
Vous préférez un site sur 100% de largeur ou largeur fixe ? Développement d'un site Web ou d'une appli mobile 14 Mai 2004
grande image centrer verticalement dans DIV avec largeur variable de l'ecran Développement d'un site Web ou d'une appli mobile 28 Juin 2022
Problème largeur CSS avec banniere adaptable adsens Développement d'un site Web ou d'une appli mobile 2 Septembre 2015
Largeur maximale acceptée par Google pour site mobile Référencement Google 30 Avril 2015
FB Likebox : changement de la largeur minimum Facebook 12 Juin 2013
Largeur des iframes Développement d'un site Web ou d'une appli mobile 3 Avril 2013
largeur de site conseillée Demandes d'avis et de conseils sur vos sites 31 Mars 2011
Largeur de 1200px Développement d'un site Web ou d'une appli mobile 6 Juin 2010
largeur d'un champs Développement d'un site Web ou d'une appli mobile 6 Mai 2009
largeur de ces sites, comment la trouver? Problèmes de référencement spécifiques à vos sites 23 Septembre 2008
Déclarer une largeur de site en em ? Développement d'un site Web ou d'une appli mobile 13 Mai 2008
Le bon format pour un site web : quelle largeur ? Administration d'un site Web 17 Mars 2008
Largeur max d'une page... Développement d'un site Web ou d'une appli mobile 27 Décembre 2007
Prob Largeur cellule sous Internet explorer (uniquement) Développement d'un site Web ou d'une appli mobile 19 Août 2007
Background différent en fonction de la largeur du body Développement d'un site Web ou d'une appli mobile 29 Janvier 2007
[Réglé] [CSS] Problème de largeur de "div" Développement d'un site Web ou d'une appli mobile 31 Août 2006
probleme largeur de div Développement d'un site Web ou d'une appli mobile 2 Juin 2006
Un fond de largeur 100% en CSS Développement d'un site Web ou d'une appli mobile 21 Avril 2006
avoir la largeur d'une image Développement d'un site Web ou d'une appli mobile 18 Février 2006