28172 sujets

CSS et mise en forme, CSS3

[Résolu] Centrage sous-menus

Bonjour à tous,
j'avais dit que je reviendrais lol

Voila alors cette fois c'est un truc que je ne comprend pas trop, j'ai fait un menu avec sous menus, le truc c'est que je n'arrive pas à centrer mes sous menus sous mes titres, les sous menus sont décalés à droite, c'est comme si les <li> des sous menus avait 40px de décalage par rapport aux titres du menu.

J'ai un peut testé dans tout les sens, j'ai même du laisser pas mal de trucs inutiles dans le css à force, mais je ne vois pas pourquoi ils ne veulent pas s'imbriquer et se center.
Si quelqu'un à une idée de là ou çà peut clocher, ce serais super sympa.

[b]Le php [/i]


<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" type="text/css" media="screen" href="css/t.css"/>


<script type="text/javascript">
function ShowHide(EltId) {
with(document.getElementById(EltId).style) {
 display=(display=="block" || display=="" ) ? "none" : "block";
}
}
</script>
   <title></title>
</head>
<body>





<div id="leftnav">
        
              
        <div class='smenu'> <!--menu Audio -->
         <a href="#" onclick="ShowHide('sousmenuaudio'); return false"><h3>Audio</h3></a>
         <ul style='display:none;' id='sousmenuaudio'> <!-- LES SOUS MENU -->
            <li><a href="#">Audacity</a></li>
            <li><a href="#">VLC</a></li>
         </ul>
        </div>
        
        <div class="smenu"> <!--menu Image-->
          <a href="#" onclick="ShowHide('sousmenuimage'); return false"><h3>Image</h3></a>
         <ul style='display:none;' id='sousmenuimage'>
            <li><a href="#">Gimp</a></li>
            <li><a href="#">Xnview</a></li>   
         </ul>   
        </div>
        
        <div class="smenu"> <!-- menu Video-->
         <a href="#" onclick="ShowHide('sousmenuvideo'); return false"><h3>Video</h3></a>
         <ul style='display:none;' id='sousmenuvideo'>
            <li><a href="#">Virtualdub</a></li>
            <li><a href="#">CamStudio</a></li>
         </ul>
        </div>

        <div class="smenu"> <!-- menu Cours-->
         <a href="#" onclick="ShowHide('sousmenucours'); return false"><h3>Cours</h3></a>
         <ul style='display:none;' id='sousmenucours'>
            <li><a href="#">Vide</a></li>
         </ul>
        </div>

        <div class="smenu"> <!-- menu Divers-->
         <a href="#" onclick="ShowHide('sousmenudivers'); return false"><h3>Divers</h3></a>
         <ul style='display:none;' id='sousmenudivers'>
            <li><a href="#">Vide</a></li>
         </ul>
        </div>

        <div class="smenu"> <!-- menu Divers-->
         <a href="#" onclick="ShowHide('sousmenucontacts'); return false"><h3>Contacts</h3></a>
         <ul style='display:none;' id='sousmenucontacts'>
            <li><a href="#">Vide</a></li>
         </ul>
        </div>







  </div>

</body>
</html>


[b]Le css[/i]


/*------------------------------------- =leftnav --------------------------------------------------*/




#leftnav {

  position: relative;
  top: 0px;
  width: 118px;
  float: left;
  display: block;
  clear: both;
  border-radius: 0px 0px 5px 5px;
  background: #353d46; /* Old browsers */
}


#leftnav a{
list-style-type: none;
white-space: nowrap;
text-decoration: none;
font-family: calidri;
font-size: 15px;
color:rgb(200,203,204);
color:#c8cbcc;
text-shadow: 0px -1px 0px rgb(0, 0, 0);
text-align: center;

}


#leftnav a:hover{
text-decoration: none;
text-shadow: 0px 0px 15px #FFFFFF, 0px -1px 0px rgb(0, 0, 0);

}

/*-----NIVEAU 2 : Listes Imbriquées----*/ 

#leftnav li {
  left: 0px;
padding: 0;
margin: 0;
list-style-type: none;
/*text-align: left;*/
display: block;
width: 118px;

}

Modifié par uniuc (16 Dec 2013 - 16:09)
Sujet clos
Aller à