Besoin d'aide (probleme de menu )

debutantweb Messages postés 3 Statut Membre -
Lerendra Messages postés 553 Statut Membre - 11 avr. 2016 à 12:28

SVP j'ai un probleme dans le menu d'un site que je vient de creer , les pages se regroupent dans le meme endroit comme dans la foto , si vous avez un solution svp

Afficher la suite

1 réponse

Réponse 1 / 1
Lerendra Messages postés 553 Statut Membre 299

Salut debutantweb

Pourrais-tu nous donner ton code pour que l'on puisse t'aider
0
1. debutantweb Messages postés 3 Statut Membre
  
  voila le code html:
  
  <!DOCTYPE HTML>
  <html>
  
  <head>
  <link rel="shortcut icon" href="images/mogo.jpg">
  <title></title>
  <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
  
  <link href="css/slider.css" rel="stylesheet" type="text/css" media="all"/>
  <script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
  <script type="text/javascript" src="js/jquery.nivo.slider.js"></script>
  <script type="text/javascript">
  $(window).load(function() {
  $('#slider').nivoSlider();
  });
  </script>
  </head>
  <body>
  <div class="header-bottom">
  <div class="wrap">
  <div class="logo">
  <a href="index.html"><img src="images/logo.png" alt=""></a>
  </div>
  <div class="header-right">
  <ul class="follow_icon">
  <li><a href="#"><img src="images/fb.png" alt=""></a></li>
  
  <li><a href="#"><img src="images/tw.png" alt=""></a></li>
  <li><a href="#"><img src="images/g+.png" alt=""></a></li>
  <li><a href="#"><img src="images/inst.png" alt=""></a></li>
  </ul>
  </div>
  
  <div class="clear"></div>
  
  <div class="search_box">
  
  </div>
  </div>
  </div>
  
  <div class="header">
  <div class="header-top">
  <div class="wrap">
  <div class="top-nav">
  
  <ul>
  
  <li><a href="index.html"> ACCUEIL</a></li>
  <li><a href="huiles.html">HUILES</a></li>
  <li><a href="beaute.html">BEAUTE</a></li>
  <li><a href="hygiene.html">HYGIENE</a></li>
  <li><a href="the.html">THE</a></li>
  <li><a href="divers.html">DIVERS </a></li>
  <li><a href="contact.html">CONTACT</a></li>
  </ul>
  
  </div>
  <div class="clear"></div>
  </div>
  
  </div>
  
  
  <div class="slider">
  <div class="slider-wrapper theme-default">
  <div id="slider" class="nivoSlider">
  <img src="images/slider/banner2.jpg" alt="" />
  <img src="images/slider/banner1.jpg" alt="" />
  <img src="images/slider/banner3.jpg" alt="" />
  <img src="images/slider/banner4.jpg" alt="" />
  <img src="images/slider/banner5.jpg" alt="" />
  </div>
  </div>
  </div>
  
  
  
  </div>
  </div>
  <div class="col_1_of_4 span_1_of_4">
  <div class="tab-img" style="text-align:center;">
  <div class="chair">
  
  </div>
  </div>
  <div class="col_1_of_4 span_1_of_4">
  <div class="tab-img" style="text-align:center;">
  
  </div>
  <div class="col_1_of_4 span_1_of_4">
  <div class="tab-img" style="text-align:center;">
  
  </div>
  </div>
  <div class="clear"></div>
  </div>
  </div>
  </div>
  <div class="content-middle">
  <div class="wrap">
  <div class="middle-content">
  <FONT color="green"> <h1> A PROPOS DE NOUS</h1></FONT>
  <hr class="hr1"><br>
  <hr class="hr2">
  <p><h3>.</h3><br>
  </p>
  </div>
  
  <div class="middle-content">
  <FONT color="green"> <h1>NOS PRODUITS</h1></FONT>
  <hr class="hr1"><br>
  <hr class="hr2">
  <p><h1></h1><br>
  </p>
  </div>
  
  <div class="section group">
  <div class="col_1_of_4 span_1_of_4">
  <div class="homeBox">
  <div class="one_fourth">
  <div class="boxImage">
  
  <img src="images/accueil/pic6.jpg" alt=""/></div>
  </div>
  </div>
  </div>
  <div class="col_1_of_4 span_1_of_4">
  <div class="homeBox">
  <div class="one_fourth">
  <div class="boxImage"><img src="images/accueil/pic7.jpg" alt=""/></div>
  </div>
  </div>
  </div>
  <div class="col_1_of_4 span_1_of_4">
  <div class="homeBox">
  <div class="one_fourth">
  <div class="boxImage"><img src="images/accueil/pic8.jpg" alt=""/></div>
  </div>
  </div>
  </div>
  <div class="col_1_of_4 span_1_of_4">
  <div class="homeBox">
  <div class="one_fourth">
  <div class="boxImage"><img src="images/accueil/pic9.jpg" alt=""/></div>
  </div>
  </div>
  </div>
  <div class="clear"></div>
  
  </div>
  <div class="section group">
  <div class="col_1_of_4 span_1_of_4">
  <div class="homeBox">
  <div class="one_fourth">
  <div class="boxImage"><img src="images/accueil/pic10.jpg" alt=""/></div>
  </div>
  </div>
  </div>
  <div class="col_1_of_4 span_1_of_4">
  <div class="homeBox">
  <div class="one_fourth">
  <div class="boxImage"><img src="images/accueil/pic11.jpg" alt=""/></div>
  </div>
  </div>
  </div>
  <div class="col_1_of_4 span_1_of_4">
  <div class="homeBox">
  <div class="one_fourth">
  <div class="boxImage"><img src="images/accueil/pic12.jpg" alt=""/></div>
  </div>
  </div>
  </div>
  <div class="col_1_of_4 span_1_of_4">
  <div class="homeBox">
  <div class="one_fourth">
  <div class="boxImage"><img src="images/accueil/pic13.jpg" alt=""/></div>
  </div>
  </div>
  </div>
  <div class="clear"></div>
  </div>
  </div>
  </div>
  <div class="middle-bottom">
  <div class="wrap">
  </div>
  <div class="footer-bottom">
  <div class="wrap">
  <div class="copy">
  <p> © 2016 Tout droits resérvés |</a></p>
  </div>
  </div>
  </div>
  </body>
  
  </html>
  
  le CSS du partie header:
  
  body{
  font-family:Arial, Helvetica, sans-serif;
  
  }
  .wrap{
  width:80%;
  margin:0 auto;
  -moz-transition:all .2s linear;
  -webkit-transition:all .2s linear;
  -o-transition:all .2s linear;
  -ms-transition:all .2s linear;
  }
  .header-top{
  background:#669900;
  
  }
  /*--menu--*/
  .top-nav ul li {
  display: inline-block;
  float: left;
  padding: 15px;
  width: 10px;
  }
  .top-nav li.active a, .top-nav li a:hover {
  color:#000;
  }
  .top-nav ul li a {
  font-family: 'Roboto', sans-serif;
  color:#fff;
  display: block;
  position: relative;
  text-transform: uppercase;
  transition: 0.5s ease;
  -o-transition: 0.5s ease;
  -webkit-transition: 0.5s ease;
  font-size:15px;
  position: relative;
  
  margin-top: 1px;
  }
  .logo {
  float: left;
  margin-top: -4px;
  
  }
  .header-right{
  float: right;
  }
  .follow_icon li {
  float: left;
  margin-left: 1px;
  }
  .follow_icon li a img {
  vertical-align: middle;
  }
  .follow_icon li a:hover{
  opacity: 0.7;
  }
  
  .header-bottom{
  
  padding:20px 0;
  background: url('../images/bg.jpg');
  
  0
2. Lerendra Messages postés 553 Statut Membre 299
  
  Dans ton css il y a un problème ! A partir du moment ou tu as un inline-block, tu nas pas besoin de mettre un float. Mais c'est pas sa le souci, c'est avec ton width ! Il est trop petit ducoup, les lien sont serré !
  
  Remplace par sa dans ton css pour le top-nav ul li
  
  /*--menu--*/
  .top-nav ul li {
  display: inline-block;
  padding: 15px;
  }
  
  0
  1. debutantweb Messages postés 3 Statut Membre > Lerendra Messages postés 553 Statut Membre
    
    merci bk Lerendra , mais il ya tjr un soucis , j'ai remplacé avec le nouveau code css que tu as envoyé , ça marche un peu il ya un petit espace entre les liens pas comme avant trop serré mais le probleme existe tjr , dans mon pc le lien CONTACT a été deplacé dans la 2eme ligne du menu , est ce qu'il ya une solution pour qu'il s'adapte avec tt type d'ecran ? grands et petits , dans un grand ecran ça se voit bk ce problem , dsl encore
    
    0
3. Lerendra Messages postés 553 Statut Membre 299
  
  Il faut que tu regardes le responsive ! Je te passe un lien qui pourra t'aider : Responsive
  
  0

Besoin d'aide (probleme de menu )

1 réponse

Discussions similaires

Newsletters