Menu largeur 100% qui fait pas 100% :/

Salut à tous,

Voila je suis nouveau, et vous l'avez deviné lol moi aussi j'ai un petit souci... voila en fait j'ai réalisé mon premier site entiérement fait en css compatible IE/ FF et j'en suis plutot fiert.

Seulement j'ai un bug ! Mon menu (inspiré des excellents tuto de ce meme site) qui a pourtant une largeur de 100% (sans padding sans rien) ne prend pas toute la largeur de la page sous IE :'( et je me demande vraiment pourquoi 12.5% x 8 ne fait pas 100% sous IE


Ma feuille de style :

dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}

#menu dd{
display:none;
}

#menu {
position:absolute;
z-index:100;
width:100%;
left:0px;
height:30px;
top:97px;
font-size:10px;
}

#menu dl {
z-index:100;
float: left;
width: 12.5%;
}

#menu dt {
z-index:100;
color:#fff;
cursor: pointer;
vertical-align:middle;
text-align: center;
font-weight: bold;
height: 30px;
}

#menu dd {
z-index:100;
height: 10px;
float:left;
width:100%;
}
#menu li, #menu ul {
z-index:100;
height: 20px;
}
.smenu
{

}

#menu li a, #menu dt a {
color:#FFFFFF;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover {
background: #000;
}

Ne pleurez pas sur ma feuille de style ^^ j'ai fait plusieurs test parce que je cherche d'ou ca vient ce bug y'a plein de truc inutile dedans j'optimiserais ca dès que ca fonctionnera

Et voila mon menu (j'ai 8 dl en tous avec plein plein de sous categorie mais j'ai pas envie de spamer donc j'ai mis 1 dl seulement mais y'en a bien 8 (8x 12.5 % = 100%) ^^

<div id="menu">
<dl>
 <dt title="MA CATEGORIE" onmousedown="javascript:cache('smenu1');" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();" class="categorie1">MA CATEGORIE</dt>
  <dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();">
   <ul>    
    <li class="categorie1"><a href="#">sous categorie</a></li>
   </ul>
</dd>
</dl>
</div>

Voila, je me demande vraiment pourquoi j'ai quelque pixel qui se balade a droite de mon menu, j'ai certe trouvé une astuce... je remplis le <div id="menu"> de la meme couleur que le <dl> le plus a droite mais j'aime pas le bricolage ...

Sinon les classes categorie1 etc. ce sont des classe qui sont généré via un module PHP en effet j'ai fait une page style.css qui est générée par php de facon à ce que je puisse modifier les couleurs de mes catégories à la volé sur tous mon site. Donc n'en tenez pas trop compte, je determine juste la couleur de fond et la couleur d'ecriture, color et background-color pour chaque categorie $i...

Meme si j'enleve tous le reste de mon site j'ai tjrs cet espace de 3, 4 pixels

Hello et bienvenue ici,

As-tu commencé par supprimer toutes les marges du document ? (margin et padding à zéro sur le body)

Si oui, ton problème se situe peut-être ailleurs :
http://blog.alsacreations.com/2005/01/09/109-histoires-de-pourcentages-calcul-arrondi

Bonne chance

PS : à quoi te sert le vertical-align:middle; dans ton cas ? Si c'est pour essayer un centrage vertical, ce n'est pas opérationnel (cf la FAQ)
Modifié par Raphael (30 Sep 2005 - 16:12)

Salut et merci pour ta réponse

Oui exactement le vertical-align:middle c'était pour tester le centrage vertical du texte sans succès d'ailleur... Je suis un adepte de la technique du "try and pry" lol même si depuis quelques jour c'est plutot "Try and Cry", mais j'ai pour habitude de passer apres du temps sur l'optimisation.

Sinon, oui j'ai toutes mes margins et paddings a 0px. j'aurrai vraiment souhaité que ce soit juste un oublie mais je vien de vérifier

Par contre, j'ai l'impression que mon souci est bien celui ennoncé sur la page à laquelle tu fais référence...

Surement un probleme d'arrondi dans la dimention de mes dl (12.5%) comme énnoncé IE arrondi 12.5%x8 à 99,5% au le vilain pas beau !

Apres teste si je fais un div de 99,5% de couleur noir sous mon menu... et bien en effet l'espace a droite de la ligne noir et l'espace a droite de mon menu sont bien les mêmes.

Ma solution donc... faire un nouveau div de meme dimension que le menu mais avec un Z-index différent et lui attribuer la class de fond de la derniere categorie de mon menu.

Au cas où si ca intéresse du monde :

La partie du Css qui a changé :

#fondmenu
{
position:absolute;
z-index:100;
width:100%;
height:30px;
top:97px;
font-size:10px;
}

#menu {
position:absolute;
z-index:101;
width:100%;
height:30px;
top:97px;
font-size:10px;
}

Le code de la page menu.php qui a changé :

<div id="fondmenu" class="categorie<?php echo $tabCategorieMenu[0][$nbCategorie-1]; ?>"></div>
<div id="menu">
<?php
$i=0;

while($i<$nbCategorie)
{
?>
<dl>
 <dt title="<?php echo $tabCategorieMenu[1][$i]  ?>" onmousedown="javascript:cache('smenu<?php echo $i+1 ?>');" onmouseover="javascript:montre('smenu<?php echo $i+1 ?>');" onmouseout="javascript:montre();" class="categorie<?php echo $tabCategorieMenu[0][$i]; ?>"><?php echo $tabCategorieMenu[1][$i]  ?></dt>
  <dd id="smenu<?php echo $i+1 ?>" onmouseover="javascript:montre('smenu<?php echo $i+1 ?>');" onmouseout="javascript:montre();">
   <ul><?php

$nbSC = $tabCategorieMenu[3][$i];
$j=0;

while($j<$nbSC)
{
?>
    <li class="categorie<?php echo $tabCategorieMenu[0][$i]; ?>"><a href="#"><?php echo $tabSousCategorie[$i][$j] ?></a></li>
<?php
$j++;
}
?></ul>
</dd>
</dl>
<?php
$i++;
}
?>
</div>

Ca me permet de vous montrer le contenu de la page dynamique PHP tjrs au cas où ^^ personnelement je trouve que le couple php+css+model dreamweaver = ca tabasse bien comme il faut

Attention cependant à dreamweaver qui a tendance a rajouter des parasites au code voir meme des balises pas trop class et surtout qui n'ecrit pas du code xhtml stricte comme il faut (balisage en majuscule identation de porcs etc.) mais quand on le gére bien et qu'on corrige ces erreur je vous assure que c'est le grand panard

Je laisse le topic ouvert au cas où il y'ait un commentaire ou une autre suggestion apres je le passe en résolu
Modifié par haugure (03 Oct 2005 - 13:04)