Forum d'entraide PHPFrance

Bonjour j'essaie de modifie un code pour creer des boites mais lorsque je lance dans explorer mes deux derniers onglets ne sont pas sue la meme ligne que les 5 autres. ils apparaissent sur la ligne du dessous?

Voici le code:

Code : Tout sélectionner

<style type="text/css">
body{padding: 20px;background-color: #FFF;
    font: 76% Verdana,Arial,sans-serif}
div#menu{float:left;width: 600px;padding-top:30px;background: url(navbk.jpg)}
ul#nav,ul#nav li{list-style-type:none;margin:0;padding:0}
ul#nav{padding-left: 15px}
ul#nav li{float:left;width:101px;margin-right:2px;text-align: center}
ul#nav a{float:left;width:101px;padding: 2px 0 5px;text-decoration:none;background: #BEFF9A;color: #999}
ul#nav li.activelink a,ul#nav a:hover{color: #000}
</style>

<body>
<div id="menu">
    
  <ul id="nav">
    <li id="depeches" class="activelink"><a href="#">Depeches</a></li>
    <li id="labo"><a href="#">Laboratoires</a></li>
    <li id="Forum"><a href="#">Forum</a></li>
    <li id="Arch"><a href="#">Archives</a></li>
    <li id="abon"><a href="#">S'abonner</a></li>
    <li id="contact"><a href="#">Contact</a></li>
    <li id="Mentions"><a href="#">Mentions légales</a></li>
  </ul>
</div>
</body>

Merci pour votre aide

N'applique pas ton style à ul#nav, puisque le id "nav" est appliqué en commençant à un "ul", n'utilise que #nav.

Il est tout à fait normal que cela n'apparaisse pas sur la même ligne puisque qu'il s'agit d'une liste.

En clair ca veut dire quoi?

Merci de ton aide...

mes deux derniers onglets ne sont pas sue la meme ligne que les 5 autres.
ils apparaissent sur la ligne du dessous ?

L'explication est dans ton code :

div#menu  { float:left ; width:600px ; padding-top:30px ; background:url(navbk.jpg) ; }
ul#nav li { float:left ; width:101px ; margin-right:2px ; text-align:center ; }

Ton menu mesure 600 pixels de large
Chaque élément li mesure 101 pixels de large
Ton menu contient 7 éléments li.

7 * 101 > 600

7 li ne peuvent pas tenir sur une seule ligne
6 * 101 > 600

6 li ne peuvent pas tenir sur une seule ligne
5 * 101 < 600

5 li peuvent tenir sur une seule ligne

mieux que ça : il y a en plus un margin-right, ce qui fait 101 + 2 * 7

lollll..............

Merci c'est résolu.

J'ai tout compris...

Aligato osayimasss

Forum d'entraide PHPFrance

style css: création de boites

style css: création de boites

Re: style css: création de boites