28172 sujets

CSS et mise en forme, CSS3

Numérotation qui déborde du cadre li

Bonjour à tous,

Voila un code que j'ai trouvé posté sur un forum, pour lequel son auteur cherche à régler le problème des numéros de liste qui viennent s'afficher hors du titre cadré :

Voir ICI


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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>Hello!</title>
  <style type="text/css">
  /*<![CDATA[*/
  #wrapper {
  margin: 0;
  padding: 0;
}


#navMenu ul {
  margin: 0;
  padding: 0;
  line-height: 30px;
}

#navMenu li {
  margin-left: 5px;
  padding: 0;
  list-style: decimal inside;
  list-style-position: outside;
  float: right;
  position: relative;
  background: #f1f1f1;
}

#navMenu ul li a {
  text-align: center;
  font-family: Tahoma;
  text-decoration: none;
  height: 30px;
  width: 150px;
  display: block;
  color: #000;
  border: 1px solid #999;
}

#navMenu ul ul {
  position: absolute;
  visibility: hidden;
  top: 32px;
}

#navMenu ul ul li {
  padding: 0;
  margin: 0;
}

#navMenu ul li:hover ul {
  visibility: visible;
}

/******************************************/

#navMenu li:hover {
  background: #CCC;
}

#navMenu ul li:hover ul li a:hover  {
  background: ##999999;
  color: #fff;
}

#navMenu a:hover {
  color: #fff;
}

.clearFloat {
  clear: both;
}
  /*]]>*/
  </style>
</head>

<body>
<div id="hedar">
<div class="HedRight"></div>
<div class="HedLeft"></div>
</div>
<div id="wrapper">
<div id="navMenu">
<ul>
<li><a href="#">Home</a>
<ul>


<li><a href="#">Link test 1</a></li>
<li><a href="#">Link test 2</a></li>
<li><a href="#">Link test 3</a></li>
<li><a href="#">Link test 4</a></li>
<li><a href="#">Link test 5</a></li>


</ul><!-- end ineer UL -->
</li><!-- end main Li -->
</ul><!-- end main UL  -->

<br class="clearFloat" />
</div><!-- end navMenu -->
</div><!-- end wrapper -->

</body>

</html>


Merci d'avance.
Modifié par apt (22 Jan 2011 - 19:28)
Voila une modification qui fonctionne :

#navMenu li {
  margin-left: 5px;
  padding: 0;
  list-style: decimal ;
  list-style-position: inside; // changement de outside en inside
  float: right;
  position: relative;
  background: #f1f1f1;
  border: 1px solid #999;
  height: 30px;
  width: 150px;
  }

#navMenu ul li a {
  text-align: center;
  font-family: Tahoma;
  text-decoration: none;
  display: inline; // changement de block en inline 
  color: #000;
  }


S'il n'y a pas d'inconvénient

ICI
Modifié par apt (23 Jan 2011 - 09:52)
Bonsoir,

Normalement c'est juste une question de :
list-style-position: inside; // outside sort la numérotation ou la puce du container
Bonsoir,

Réaction normale, tu as le CSS suivant qui centre le texte dans ton "li" qui fait 150px de large donc forcément, la puce ne peut pas sortir vu que le bloc est plus large que la longueur du texte+la puce :

#navMenu ul {
  line-height: 30px;
  text-align: center;
}

Si tu mets un "text-align:left" tu verra que la réaction "outside" et "inside" est totalement différente.
Sujet clos
Aller à