Problème de liste

Bonjour,

Mon menu est constitué de deux div pour faire les angles arrondis (cadre et bloccadre) et d'une div pour le contenu.

Jusque là tout va bien, tout est centré.. Par contre dès que j'introduis une liste à puce, sous Firefox ça beugue (pour une fois c'est pas IE lol).

Je ne parviens pas à centrer ma liste vers le haut du cadre, il y a toujours un gros espace entre mon titre MENU1 et le haut du cadre...

Ca fais bien 3 heures que je suis dessus et je comprend rien

pouvez-vous me donner un ptit coup de pouce SVP ???? car je désespère et je n'ai trouvé aucun post qui corresponde à ce problème précis ...

CODE :

<div class="cadre">
<div class="bloccadre">
<div id="menu1">MENU1<br /><br />
<ul>
<li><a class="sm" onclick="showhide('sma',1);">Introduction</a>
<ul id="sma1">
<li><a class="ss" href="1_1_a.html">A</a>
<li><a class="ss" href="1_1_b.html">B</a>
<li><a class="ss" href="1_1_c.html">C</a>
<li><a class="ss" href="1_1_d.html">D</a>
</ul>
</div>
</div>
</div>

CSS:

.cadre     { background: url("menu_top.gif") no-repeat left top; margin: 10px auto; padding: 15px 0 0; position: relative; width: 160px; }
.bloccadre     { background: url("menu_bottom.gif") no-repeat left bottom; padding: 0 0 15px }
div#menu0, #menu1, #menu2, #menu3, #menu4,     { margin: 0 auto; padding: 0; position: relative; width: 160px; }

a.sm    { cursor: pointer; color: #2e4f6e; font-size: 12px; font-style: italic; text-decoration: none }
a.sm:hover  { color: #f3b12b; font-size: 13px; font-style: italic; text-decoration: none }
a.ss      { color: #66abff; font-size: 11px; text-decoration: none; margin-left: 10px }
a.ss:hover       { color: #f3b12b; font-size: 12px; text-decoration: none }

ul    { list-style-type: none; margin: 0; padding: 0 }
li  { margin: 0; padding: 0 }

Salut,
ton problème vient du padding :

.cadre { background-color:#0000FF; margin:10px auto; /*padding: 15px 0 0;*/ position: relative; width: 160px; }

Là plus d'espace en haut.

Un petit conseil pour tester d'où vient un problème : mettre des portions du code en commentaires, parfois ça aide et on voit tout de suite

/edit/
A défaut d'image j'ai testé avec une couleur de fond....
Modifié par cktoon (30 Aug 2005 - 18:30)

salut,

peut tu monter les deux images sur le serveur ?


merci

il manque un </ul> aussi puis les deux <br /><br /> c'est pas trop propre...
Modifié par ernstein (30 Aug 2005 - 18:28)

salut et merci de vos réponses

malheureusement cktoon, ce n'est pas une histoire de padding, j'ai déjà testé cette soluce (ces padding-là servent seulement à ce qu'il est des espaces proportionnels sur et sous le texte). Il s'agit d'un autre espace (qui vient se rajouter là-dessus) qui sort de je ne sais où...

Ernstein, il manque un ul en effet (je vous ai pas mis tous mon code pour alléger la chose donc j'ai oublié de la copier) et les deux br, je reconnais, c pas magnifique, je vais mettre en p, ca ira mieux

Ceci ne résoud pas mon problème d'espace, donc voilà les deux images:

>> celle du haut (div cadre) et qui mesure 160px X 30px:


>> celle du bas (div bloccadre) qui mesure 160px X 415px:


merci d'avance

Alors je ne comprends pas ton problème : pour moi, l'affichage est correcte sur les 2 navigateurs...
Tu parles de l'espace à l'intérieur du cadre ou de celui de l'ensemble du menu par rapport au haut de la fenêtre ?

salut,

effectivement, je viens de tester cette partie seule et ça fonctionne, c'est parcqu'il n'y a pas les js avec, ni les reste de ma mise en page, ce qui me fait comprendre que mon problème vient d'ailleurs.

j'ai dû très mal structurer ma page je pense... merci d'avoir tenté le coup, je n'ai plus qu'à revoir le tout le crois

merci @bientot

Un p'tit [Résolu] dans le titre