Menu horizontal full CSS

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Menu horizontal full CSS

BLJC

Bonjour à tous,

Je tente en ce moment de faire mon propre template de menu horizontal full CSS. Je suis en bon chemin mais je butte sur problème pour centrer ma barre de navigation.

Je voudrais que mes boutons soient centrés dans ma barre, mais je n'y arrive pas. En fait mon premier <ul> prend toute la longueur de la barre de navigation et je ne sais pas comment centre les <li> contenus avec le display:inline-block.

Bref, j'ai essayé plusieurs solutions en vain... :aie:

Voici mon code html:

Code :

<div class="main">
    <div class="barre">
        <ul class="ulParent">
            <li><a class="liCatA" href="#">Cat&eacute;gorie 1</a>
                <ul class="ulEnfant">
                    <li><a class="liSubCatA" href="#">Sous-cat&eacute;gorie 1.1</a></li>
                    <li><a class="liSubCatA" href="#">Sous-cat&eacute;gorie 1.2</a></li>
                    <li><a class="liSubCatA" href="#">Sous-cat&eacute;gorie 1.3</a></li>
                    <li><a class="liSubCatA" href="#">Sous-cat&eacute;gorie 1.4</a></li>
                    <li class="liSubCatLast"><a class="liSubCatALast" href="#">Sous-cat&eacute;gorie 1.5</a></li>
                </ul><!-- .ulEnfant -->        
            </li><!-- .liCat -->
            <li><a class="liCatA" href="#">Cat&eacute;gorie 2</a>
                <ul class="ulEnfant">
                    <li><a class="liSubCatA" href="#">Sous-cat&eacute;gorie 2.1</a></li>
                    <li><a class="liSubCatA" href="#">Sous-cat&eacute;gorie 2.2</a></li>
                    <li class="liSubCatLast"><a class="liSubCatA" href="#">Sous-cat&eacute;gorie 2.3</a></li>
                </ul><!-- .ulEnfant -->        
            </li><!-- .liCat -->
            <li><a class="liCatA" href="#">Cat&eacute;gorie 3</a>
                <ul class="ulEnfant">
                    <li><a class="liSubCatA" href="#">Sous-cat&eacute;gorie 3.1</a></li>
                    <li><a class="liSubCatA" href="#">Sous-cat&eacute;gorie 3.2</a></li>
                    <li><a class="liSubCatA" href="#">Sous-cat&eacute;gorie 3.3</a></li>
                    <li><a class="liSubCatA" href="#">Sous-cat&eacute;gorie 3.4</a></li>
                    <li><a class="liSubCatA" href="#">Sous-cat&eacute;gorie 3.5</a></li>
                    <li class="liSubCatLast"><a class="liSubCatA" href="#">Sous-cat&eacute;gorie 3.6</a></li>
                </ul><!-- .ulEnfant -->        
            </li><!-- .liCat -->
            <li><a class="liCatA" href="#">Cat&eacute;gorie 4</a>
            </li><!-- .liCat -->
        </ul><!-- .ulParent -->
    </div><!-- .barre -->
</div><!-- .main -->

et le css qui va avec:

Code :

@charset "utf-8";
/* CSS Document */
body { color:#000; background:#CCC; width:100%; }
 
.main { 
    background-color:#999;
    width:980px;
    height:600px;
    margin:0 auto;
}
.barre { 
    width:980px; 
    height:50px;
    margin-top:40px; 
    margin-left:0 auto; 
    margin-right:0 auto; 
    background-color:#026DA8; 
    vertical-align:middle;
    position:relative;
    color:#FFF;
}
.barre ul {
    list-style-type:none; 
    margin:0 auto; 
    clear:both; 
    line-height:50px;
    width:970px;
}
.barre ul li {
    line-height:50px; 
    padding:0 12px;
    display:block;
    float:left;
    width:150px;
    position:relative;
    text-align:center;
    font-family:Verdana, Geneva, sans-serif;
    font-size:0.9em;
}
.barre ul li:hover {
    background-color:#026DA8;
}
.barre ul li a.liCatA {
    width:150px;
    line-height:49px;
    height:49px;
    text-align:center;
    display:block;
    margin:0;
    padding:0;
    color:#FFF;
    text-decoration:none;
    font-family:Verdana, Geneva, sans-serif;
    font-size:0.9em;
}
.barre ul li:hover a.liCatA {
    background-color:#0283CA;
    width:150px;
    line-height:49px;
    height:49px;
    text-align:center;
    display:block;
    margin:0;
    padding:0;
    color:#FFF;
    text-decoration:underline;
}
.barre ul li:hover ul li a.liSubCatA {
    background-color:#0283CA;
    width:150px;
    line-height:49px;
    height:49px;
    text-align:center;
    display:block;
    margin:0;
    padding:0;
    color:#FFF;
    text-decoration:none;
}
.barre ul li:hover ul li.liSubCatLast a:hover {
    background-color:#038AD5;
    text-decoration:underline;
}
.barre ul li ul li.liSubCatLast {
    background-color:#026DA8;
    width:150px;
    line-height:49px;
    height:49px;
    text-align:center;
    display:block;
    margin-bottom:13px;
    padding:0;
    color:#FFF;
    text-decoration:none;
}
.barre ul li:hover ul li.liSubCatLast a {
    background-color:#0283CA;
    width:150px;
    line-height:49px;
    height:49px;
    text-align:center;
    display:block;
    margin:0;
    padding:0;
    color:#FFF;
    text-decoration:none;
}
.barre ul li:hover ul li.liSubCatLast a:hover {
    text-decoration:underline;
}
.barre ul li:hover ul li a:hover {
    text-decoration:underline;
}
.barre ul li:hover ul li a {
    font-family:Verdana, Geneva, sans-serif;
    font-size:0.85em;
    text-decoration:none;
}
.barre ul li:hover liCatA {
    background-color:#0283CA;
    border-bottom:1px solid #00F; 
    display:block;
    margin:0;
    padding:0;
}
.barre ul li ul {
    list-style-type:none; 
    margin:0; 
    padding:0;
    clear:both; 
    line-height:50px;
    width:150px;
    display:none;
    background-color:#026DA8;
}
.barre ul li ul li {
    line-height:50px; 
    display:block;
    padding:0; 
    width:150px;
}
.barre ul li:hover {
    cursor:pointer;
}
.barre ul li:hover ul { 
    display:block;
}
.barre ul li:hover ul li a {
    color:#FFF;
    text-decoration:none;
}

Avez vous une idée de ce qui ne va pas dans mon code?

Cordialement

Publicité

gatsu35

Blablaté par Harko

première chose, quand tu fais un :hover, tu n'as pas à recopier/coller le code déjà déclaré dans l'état normal.

Donc d'abord je te conseille de nettoyer ton code

---------------
Blablaté par Harko

SV_LVH

Ok merci Gatsu35,

C'est vrai que je pourrais commencer par nettoyer mon code ça ne peut pas faire de mal. Je nettoie et je donne le nouveau code ce soir.

Thx.

GoldAdvance

Audiste corrompu.

En déclarant une width identique à chaque <li> de calculer avec les marges la width totale, puis d'appliquer une margin-left pour center le tout.

Pour éviter d'utiliser un ID pour tes <li> tu peux faire ul.maclasse li:first-child {

Car là c'est ton float: left qui cale tout à gauche.

Sinon il te reste plus qu'à centrer le texte pour tes <li> et virer le float: left. Le float:left est rarement utile lorsqu'il est couplé à display: inline-block

---------------
Les hommes construisent trop de murs et pas assez de ponts. Isaac Newton

FORUM HardWare.fr

Programmation

HTML/CSS

Menu horizontal full CSS

Sujets relatifs
Griser une Iframe CSS opacity	CSS couleur texte + position texte
[JS / CSS] Ignorer une div	Problème d'affichage CSS sous Internet Explorer
Problème de lecture du CSS sous IE	[CSS3] Pb de remonté menu animé
Porfolio horizontal	[PHP/CSS] Acheter un thème wordpress pour s'en inspirer
quel CSS/html pour avoir un texte qui encercle une image
Plus de sujets relatifs à : Menu horizontal full CSS

Page générée en 0.061 secondes