Impossible de centrer la navigation dans div

Bonjour, je travaille sur un site Web réactif. En ce moment j'ai un problème avec ma navigation que je ne peux pas centrer dans mon div. Aussi, j'ai un problème avec mon menu déroulant qui détruit l'otder quand ma navigation commence à s'adapter à la div.Impossible de centrer la navigation dans div

index.html

<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
     <meta name="viewport" content="width=device-width"> 
     <link rel="stylesheet" type="text/css" href="style.css"> 

     <title>Test</title> 
    </head> 

    <body> 
     <div id="body_wrapper"> 
       <div id="header_wrapper" class="clearfix"> 
        <div id="header_content" class="content_container"> 
         <div id="language_wrapper"> 

          <div class="language active"> 
           <span>Deutsch</span> 
          </div> 
          <div class="language"> 
           <a href="#"> 
           <span>Englisch</span> 
           </a> 
          </div> 
         </div> 
         <div id="hLogo_wrapper"> 
          <a href="#"> 
           <img src="images/starbucks.png"> 
          </a> 
         </div> 

        </div> 

       </div> 
       <div id="inner_content" class="content_container"> 
        <div class="mainMenu clearfix" > 
         <ul class="clearfix"> 
          <li><a href="#">Home</a></li> 
          <li><a href="#">Aktuelles</a></li> 
          <li> 
           <a href="#">Speisekarte ￬</a> 
           <ul class="hidden"> 
            <li><a href="#">Mittagstisch</a></li> 
            <li><a href="#">Frühstück</a></li> 
           </ul> 
          </li> 
          <li><a href="#">Reservierung</a></li> 
          <li><a href="#">Gallerie</a></li> 
          <li><a href="#">Kontakt</a></li> 
          <li><a href="#">Jobs</a></li> 
         </ul> 
        </div> 

       </div> 
       <div id="footer_wrapper"></div> 
     </div> 

    </body> 
</html>

et voici mon fichier css jusqu'à présent

* { 
    margin: 0; 
    padding: 0; 
    font-family: Trebuchet MS; 

    -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box; 
      box-sizing: border-box; 
} 
img {border: 0;} 

.clearfix:after{ 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
} 


.content_container{ 
    margin: 0 auto; 
    width: 62.5%; 
} 

#inner_content{ 
} 


#header_wrapper{ 
    height: 220px; 
    background: url('images/header.png'); 


} 

#hLogo_wrapper img{ 
    max-width: 100%; 

} 


#language_wrapper{ 
    float: right; 
} 
#language_wrapper .language{ 
    display: inline; 
} 

#hLogo_wrapper{ 
    float: left; 
} 
.mainMenu{ 
    height: 60px; 
    margin: 0 auto; 
} 

.mainMenu ul { 
    position: relative; 
    list-style-type:none; 
    margin:0; 
    padding:0; 
    left: 10%; 

} 


.mainMenu li { 
    display:inline; 
    float: left; 
    margin-right: 1px; 
} 

.mainMenu li a { 
    display:inline-block; 
    min-width:140px; 
    height: 50px; 
    text-align: center; 
    line-height: 50px; 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
    color: #fff; 
    background: #2f3036; 
    text-decoration: none; 
} 


.mainMenu li:hover a { 
    background: #19c589; 
} 


.mainMenu li:hover ul a { 
    background: #f3f3f3; 
    color: #2f3036; 
    height: 40px; 
    line-height: 40px; 
    z-index: 120; 

} 

/*Hover state for dropdown links*/ 
.mainMenu li:hover ul a:hover { 
    background: #19c589; 
    color: #fff; 
} 

.mainMenu li ul { 
    display: none; 
} 


.mainMenu li ul li { 
    display: block; 
    float: none; 
} 


.mainMenu li ul li a { 
    width: auto; 
    min-width: 140px; 
    padding: 0 20px; 
} 


.mainMenu ul li a:hover + .hidden, .hidden:hover { 
    display: block; 
}

Source

2014-06-23 ComputerDully

Bienvenue à SO. Que voulez-vous dire par détruire l'otder quand ma navigation commence à tenir le div. Peux-tu être plus précis..? Si possible, ajoutez une démo simple dans quelque chose comme [jsfiddle] (http://jsfiddle.net) ou une image ..? –

Vous avez laissé marqué à 10% dans votre menu ul qui est la cause de votre chute vers le bas contenu pour devenir hors -entré.

Modification à gauche de 0; va redresser cela.

.mainMenu ul { 
position: relative; 
list-style-type:none; 
margin:0; 
padding:0; 
left: 0;

Source

2014-06-23 21:53:07 chrisl0lz

Impossible de centrer la navigation dans div

Répondre

Questions connexes