Menu horizontal full CSS

Menu horizontal full CSS - HTML/CSS - Programmation

Marsh Posté le 20-03-2012 à 14:04:09    

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 :
  1. <div class="main"> 
  2.     <div class="barre"> 
  3.         <ul class="ulParent"> 
  4.             <li><a class="liCatA" href="#">Cat&eacute;gorie 1</a> 
  5.                 <ul class="ulEnfant"> 
  6.                     <li><a class="liSubCatA" href="#">Sous-cat&eacute;gorie 1.1</a></li> 
  7.                     <li><a class="liSubCatA" href="#">Sous-cat&eacute;gorie 1.2</a></li> 
  8.                     <li><a class="liSubCatA" href="#">Sous-cat&eacute;gorie 1.3</a></li> 
  9.                     <li><a class="liSubCatA" href="#">Sous-cat&eacute;gorie 1.4</a></li> 
  10.                     <li class="liSubCatLast"><a class="liSubCatALast" href="#">Sous-cat&eacute;gorie 1.5</a></li> 
  11.                 </ul><!-- .ulEnfant -->         
  12.             </li><!-- .liCat --> 
  13.             <li><a class="liCatA" href="#">Cat&eacute;gorie 2</a> 
  14.                 <ul class="ulEnfant"> 
  15.                     <li><a class="liSubCatA" href="#">Sous-cat&eacute;gorie 2.1</a></li> 
  16.                     <li><a class="liSubCatA" href="#">Sous-cat&eacute;gorie 2.2</a></li> 
  17.                     <li class="liSubCatLast"><a class="liSubCatA" href="#">Sous-cat&eacute;gorie 2.3</a></li> 
  18.                 </ul><!-- .ulEnfant -->         
  19.             </li><!-- .liCat --> 
  20.             <li><a class="liCatA" href="#">Cat&eacute;gorie 3</a> 
  21.                 <ul class="ulEnfant"> 
  22.                     <li><a class="liSubCatA" href="#">Sous-cat&eacute;gorie 3.1</a></li> 
  23.                     <li><a class="liSubCatA" href="#">Sous-cat&eacute;gorie 3.2</a></li> 
  24.                     <li><a class="liSubCatA" href="#">Sous-cat&eacute;gorie 3.3</a></li> 
  25.                     <li><a class="liSubCatA" href="#">Sous-cat&eacute;gorie 3.4</a></li> 
  26.                     <li><a class="liSubCatA" href="#">Sous-cat&eacute;gorie 3.5</a></li> 
  27.                     <li class="liSubCatLast"><a class="liSubCatA" href="#">Sous-cat&eacute;gorie 3.6</a></li> 
  28.                 </ul><!-- .ulEnfant -->         
  29.             </li><!-- .liCat --> 
  30.             <li><a class="liCatA" href="#">Cat&eacute;gorie 4</a> 
  31.             </li><!-- .liCat --> 
  32.         </ul><!-- .ulParent --> 
  33.     </div><!-- .barre --> 
  34. </div><!-- .main -->


 
et le css qui va avec:

Code :
  1. @charset "utf-8";
  2. /* CSS Document */
  3. body { color:#000; background:#CCC; width:100%; }
  4.  
  5. .main { 
  6.     background-color:#999;
  7.     width:980px;
  8.     height:600px;
  9.     margin:0 auto;
  10. }
  11. .barre { 
  12.     width:980px; 
  13.     height:50px;
  14.     margin-top:40px; 
  15.     margin-left:0 auto; 
  16.     margin-right:0 auto; 
  17.     background-color:#026DA8; 
  18.     vertical-align:middle;
  19.     position:relative;
  20.     color:#FFF;
  21. }
  22. .barre ul {
  23.     list-style-type:none; 
  24.     margin:0 auto; 
  25.     clear:both; 
  26.     line-height:50px;
  27.     width:970px;
  28. }
  29. .barre ul li {
  30.     line-height:50px; 
  31.     padding:0 12px;
  32.     display:block;
  33.     float:left;
  34.     width:150px;
  35.     position:relative;
  36.     text-align:center;
  37.     font-family:Verdana, Geneva, sans-serif;
  38.     font-size:0.9em;
  39. }
  40. .barre ul li:hover {
  41.     background-color:#026DA8;
  42. }
  43. .barre ul li a.liCatA {
  44.     width:150px;
  45.     line-height:49px;
  46.     height:49px;
  47.     text-align:center;
  48.     display:block;
  49.     margin:0;
  50.     padding:0;
  51.     color:#FFF;
  52.     text-decoration:none;
  53.     font-family:Verdana, Geneva, sans-serif;
  54.     font-size:0.9em;
  55. }
  56. .barre ul li:hover a.liCatA {
  57.     background-color:#0283CA;
  58.     width:150px;
  59.     line-height:49px;
  60.     height:49px;
  61.     text-align:center;
  62.     display:block;
  63.     margin:0;
  64.     padding:0;
  65.     color:#FFF;
  66.     text-decoration:underline;
  67. }
  68. .barre ul li:hover ul li a.liSubCatA {
  69.     background-color:#0283CA;
  70.     width:150px;
  71.     line-height:49px;
  72.     height:49px;
  73.     text-align:center;
  74.     display:block;
  75.     margin:0;
  76.     padding:0;
  77.     color:#FFF;
  78.     text-decoration:none;
  79. }
  80. .barre ul li:hover ul li.liSubCatLast a:hover {
  81.     background-color:#038AD5;
  82.     text-decoration:underline;
  83. }
  84. .barre ul li ul li.liSubCatLast {
  85.     background-color:#026DA8;
  86.     width:150px;
  87.     line-height:49px;
  88.     height:49px;
  89.     text-align:center;
  90.     display:block;
  91.     margin-bottom:13px;
  92.     padding:0;
  93.     color:#FFF;
  94.     text-decoration:none;
  95. }
  96. .barre ul li:hover ul li.liSubCatLast a {
  97.     background-color:#0283CA;
  98.     width:150px;
  99.     line-height:49px;
  100.     height:49px;
  101.     text-align:center;
  102.     display:block;
  103.     margin:0;
  104.     padding:0;
  105.     color:#FFF;
  106.     text-decoration:none;
  107. }
  108. .barre ul li:hover ul li.liSubCatLast a:hover {
  109.     text-decoration:underline;
  110. }
  111. .barre ul li:hover ul li a:hover {
  112.     text-decoration:underline;
  113. }
  114. .barre ul li:hover ul li a {
  115.     font-family:Verdana, Geneva, sans-serif;
  116.     font-size:0.85em;
  117.     text-decoration:none;
  118. }
  119. .barre ul li:hover liCatA {
  120.     background-color:#0283CA;
  121.     border-bottom:1px solid #00F; 
  122.     display:block;
  123.     margin:0;
  124.     padding:0;
  125. }
  126. .barre ul li ul {
  127.     list-style-type:none; 
  128.     margin:0; 
  129.     padding:0;
  130.     clear:both; 
  131.     line-height:50px;
  132.     width:150px;
  133.     display:none;
  134.     background-color:#026DA8;
  135. }
  136. .barre ul li ul li {
  137.     line-height:50px; 
  138.     display:block;
  139.     padding:0; 
  140.     width:150px;
  141. }
  142. .barre ul li:hover {
  143.     cursor:pointer;
  144. }
  145. .barre ul li:hover ul { 
  146.     display:block;
  147. }
  148. .barre ul li:hover ul li a {
  149.     color:#FFF;
  150.     text-decoration:none;
  151. }


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

Reply

Marsh Posté le 20-03-2012 à 14:04:09   

Reply

Marsh Posté le 20-03-2012 à 18:36:20    

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
Reply

Marsh Posté le 21-03-2012 à 07:31:56    

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.

Reply

Marsh Posté le 25-03-2012 à 22:53:58    

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
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed