28220 sujets

CSS et mise en forme, CSS3

Pb div / ul

Bonjour,

je veux faire un container <div> pour mon menu, menu composé de <ul><li>.

Je vous mets ici le code HTML + le CSS ce sera plus explicite :

HTML :

<html>

<head>
	<title>Test</title>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<link rel="stylesheet" type="text/css" href="style/menu.css" title="default" media="screen" />
</head>

<body>

  <div id="menu_container">

    <ul>
  
      <li><a href="#">Accueil</a></li>
      
      <li><a href="#">Menu1</a>
        <ul class="sousMenu">
          <li><a href="#">Sous menu1</a></li>
          <li><a href="#">Sous menu2</a></li>
          <li><a href="#">Sous menu3</a></li>
	</ul>
      </li>

      <li><a href="#">Divers</a>
        <ul class="sousMenu">
          <li><a href="#">Sous menu1</a></li>
          <li><a href="#">Sous menu2</a></li>
          <li><a href="#">Sous menu3</a></li>
	</ul>
      </li>

    </ul>

  </div>

</body>
</html>


CSS

#menu_container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  border: solid 1px #036;
}


ul {
  text-align: center;
  margin-bottom: 2px;
}

li {
  background-color: #036;
  color: #000000;
  list-style-type: none;
  float: left;
  width: 100px;
  margin-right: 2px;
}

li a {
  text-decoration: none;
  color: #FFFFFF;
}



.sousMenu {
  padding: 0px;
  margin: 0px;
  display: none;
  list-style-type: none;
}

.sousMenu ul {

}

.sousMenu li {
  background-color: #9FB6CD;
  border-top: solid 1px #FFFFFF;
  float: none;
}

.sousMenu li a {
  padding-left: 10px;
  padding-right: 10px;
}

.sousMenu li a:hover {
  color: #000000;
}

li:hover > .sousMenu { display: block; }



Comme vous pouvez le constater, mon menu n'est pas dans le container ... et je ne sais pas pourquoi. Voyez vous où est mon erreur (c'est peut etre meme une erreur de compréhension de CSS d'ailleurs Smiley langue ! )

Merci d'avance pour votre aide.
C'est probablement du aux marges appliquées par défaut par le navigateur aux élements ul

ajoute un margin:0 et un padding:0 dans ton selecteur ul
Salut,
je me demande si c'est pas du a ton float:left de ton li. C'est un menu horizontal ton menu principal?

<div id="menu_container">

    <ul>
  
      <li><a href="#">Accueil</a></li>
      
      <li><a href="#">Menu1</a>
        <ul class="sousMenu">
          <li><a href="#">Sous menu1</a></li>
          <li><a href="#">Sous menu2</a></li>
          <li><a href="#">Sous menu3</a></li>
	</ul>
      </li>

      <li><a href="#">Divers</a>
        <ul class="sousMenu">
          <li><a href="#">Sous menu1</a></li>
          <li><a href="#">Sous menu2</a></li>
          <li><a href="#">Sous menu3</a></li>
	</ul>
      </li>
      [#red]<div class="clear"></div>[/#]
    </ul>

  </div>


a écrit :
.clear{
clear:both;
/*si cela ne suffit pas parfois un border-top: 1px solid #fff; fait l'affaire en plus du clear:both*/
}



Essaie ceci, dis mois quoi si cela va mieux.
Merci pour vos réponses.

Ta solution fonctionne Oryo, merci bien ... Smiley biggrin
Modifié par nkdb (10 Aug 2006 - 14:37)
Maintenant que "je" suis arrivé à faire rentrer mon menu dans mon div, je suis confronté à un seconde problème qui est de centrer mon menu.

Voici l'avancée de mes travaux :

HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>
	<title>Test</title>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<link rel="stylesheet" type="text/css" href="style/style.css" title="default" media="screen" />
</head>

<body>

  <div id="menu_container">
    <ul>
      <li><a href="#">Accueil</a></li>
      <li><a href="#">Test Menu 1</a>
        <ul class="sousMenu">
          <li><a href="#">Sous menu 1</a></li>
          <li><a href="#">Sous menu 2</a></li>
          <li><a href="#">Sous menu 3</a></li>
	</ul>
      </li>
      <li><a href="#">Test Menu 2</a>
        <ul class="sousMenu">
          <li><a href="#">Sous menu 1</a></li>
          <li><a href="#">Sous menu 2</a></li>
          <li><a href="#">Sous menu 3</a></li>
	</ul>
      </li>
      <li><a href="#">Test Menu 3</a>
        <ul class="sousMenu">
          <li><a href="#">Sous menu 1</a></li>
          <li><a href="#">Sous menu 2</a></li>
          <li><a href="#">Sous menu 3</a></li>
	</ul>
      </li>
      <div class="clear"></div>
    </ul>
  </div>

  <div id="title_container">
    Le titre de la page ici 
  </div>

  <div id="datas_container">
	  Les datas ici 
	  plein de datas
	  <br /> plein plein plein
	  <br /> plein plein plein
	  <br /> plein plein plein
	  <br /> plein plein plein
	  <br /> plein plein plein
	  <br /> plein plein plein
	  <br /> plein plein plein
	  <br /> plein plein plein
	  <br /> plein plein plein
	  <br /> plein plein plein
	  <br /> plein plein plein
	  <br /> plein plein plein
	  <br /> plein plein plein
	  <br /> plein plein plein
	  <br /> plein plein plein
	  <br /> plein plein plein
	  <br /> plein plein plein
	  <br /> plein plein plein
	  <br /> plein plein plein
	  <br /> plein plein plein
  </div>

</body>
</html>


CSS :

#menu_container {
  height: 100px;
  border: solid 1px #036;
}


ul {
  margin: 0px;
  padding: 0px;
}

li {
  text-align: center;
  background-color: #036;
  color: #000000;
  list-style-type: none;
  float: left;
  width: 100px;
  margin-right: 2px;
}

li a {
  text-decoration: none;
  color: #FFFFFF;
}



.sousMenu {
  padding: 0px;
  margin: 0px;
  display: none;
  list-style-type: none;
}


.sousMenu li {
  background-color: #9FB6CD;
  border-top: solid 1px #FFFFFF;
  float: none;
}

.sousMenu li a {
  padding-left: 10px;
  padding-right: 10px;
}

.sousMenu li a:hover {
  color: #000000;
}

li:hover > .sousMenu { display: block; }

.clear {
  clear: both;
}


#title_container {
  text-align: center;
  height: 100px;
  border: solid 1px #036;
}

#datas_container {
  text-align: center;
  border: solid 1px #036;
}



Mes div "title_container" et "datas_container" sont centrés, car je suppose que l'instruction "text-align: center;" influe sur le texte pure, mais comme mes menus sont dans es ul/li cette instruction ne suffit pas.

Alors comment arriver à centrer mon menu ?

Merci d'avance.


PS: Haaaaa, le CSS c'est cool, mais c'est un peu "touchy" quand meme ... Smiley cligne
Sujet clos
Aller à