Bonjour à tous !
Comme c'est mon premier post ici je tiens à vous dire bravo pour votre site et votre forum qui sont de vraies mines d'or (surtout pour les anciens partisans de la mise-en-forme-dans-la-page tout-avec-des-tables dont je faisais parti) !
J'ai donc décidé de me mettre un peu "à la page", mais j'ai des problèmes qui commencent à me faire baisser les bras
...
J'essaie désespérement de faire un menu horizontal avec des UL/LI dans une div positionnée au sommet d'une autre div, mais le menu me résiste
.
Voilà le code de la page (simplifié au maximum) :
On a donc une div "de fond" (contents) qui me sert à centrer le tout sur la page et une div principale (maincenter) qui contient toutes les autres div de la page (le header, le menu, le footer...).
Dans la div "menu", j'ai donc ma liste UL/LI qui est centrée horizontalement, mais je n'arrive pas à la centrer verticalement sous FF1.5 et IE6 alors que sous IE5 cela passe très bien .
Voici le code CSS (simplifié) :
Et voici les résultats sous différents navigateurs :
FF1.5, la liste est décalée vers le haut.
http://membres.lycos.fr/pompoire/F0rum/menuDiv/images/pbDiv_alsa_ff1-5.jpg
IE5, c'est exactement ce à quoi j'aimerai arriver.
http://membres.lycos.fr/pompoire/F0rum/menuDiv/images/pbDiv_alsa_ie5.jpg
IE6, la liste est toute réduite, la faute au padding/margin à 0, mais si je change ça ça décale sur les autres navigateurs...
http://membres.lycos.fr/pompoire/F0rum/menuDiv/images/pbDiv_alsa_ie6.jpg
J'ai lu la FAQ et divers posts de ce forum et d'autres, mais toutes les solutions que j'ai essaié ne fonctionnent pas, avec les padding/margin j'ai un décalage entre les navigateurs, en ajoutant avant ou après le menu des div clear: both j'ai un ecart en haut et en bas du menu, avec des display différents rien n'y fait.
Je suis un peu perdu !
Peut être faudrait-il que j'essaie d'autres types de blocs ???
Merci d'avance à ceux qui prendrons le temps de me lire !
Speed.
EDIT : J'ai oublié de dire que vous pouvez voir un exemple de la page ici .
EDIT 2 : Désolé pour les pubs sur la pages de test .
Modifié par speedfightor (08 Mar 2006 - 11:46)
Comme c'est mon premier post ici je tiens à vous dire bravo pour votre site et votre forum qui sont de vraies mines d'or (surtout pour les anciens partisans de la mise-en-forme-dans-la-page tout-avec-des-tables dont je faisais parti) !
J'ai donc décidé de me mettre un peu "à la page", mais j'ai des problèmes qui commencent à me faire baisser les bras
...J'essaie désespérement de faire un menu horizontal avec des UL/LI dans une div positionnée au sommet d'une autre div, mais le menu me résiste
.Voilà le code de la page (simplifié au maximum) :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>
Marche pas sous FF :o !
</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="contents">
<div id="mainCenter">
<div id="menu">
<ul class="menu">
<li class="menu">
<a href="#">Accueil</a>
</li>
<li class="menu">
<a href="#">Informations</a>
</li>
<li class="menu">
<a href="<#">Evènements</a>
</li>
<li class="menu">
<a href="#">Documents</a>
</li>
<li class="menu">
<a href="#">Déconnexion</a>
</li>
</ul>
</div><!-- Close menu -->
</div><!-- Close mainCenter -->
</div><!-- Close contents -->
</body>
</html>On a donc une div "de fond" (contents) qui me sert à centrer le tout sur la page et une div principale (maincenter) qui contient toutes les autres div de la page (le header, le menu, le footer...).
Dans la div "menu", j'ai donc ma liste UL/LI qui est centrée horizontalement, mais je n'arrive pas à la centrer verticalement sous FF1.5 et IE6 alors que sous IE5 cela passe très bien
.Voici le code CSS (simplifié) :
#contents { /* Bloc de fond/général - UNIQUE */
margin: 15px auto 0 auto;
padding: 0;
width: 700px;
text-align: left;
border: #000000 0 solid;
background: transparent;
}
#mainCenter { /* Bloc principal - UNIQUE */
background: #FFFFFF url(../images/bg_wtoblue.jpg) repeat-x left bottom;
width: 100%;
margin: 0 auto 0 auto;
border: #505050 1px solid;
padding: 0 0 30px 0;
text-align: center;
}
.mainCenterDiv { /* Bloc de présentation dans #MAINCENTER - MULTIPLE */
background: #transparent;
margin: 0 auto 0 auto;
padding: 2px;
border: #000000 0 solid;
}
body, td, p, li, textarea, input, select { /* Style de police par défaut */
font-family: bitstream vera sans, verdana, arial, sans-serif;
font-size: 11px;
}
#menu {
background: #F4F4F4 url(../images/bg_li.jpg) repeat-x left top;
border: #505050 0px solid;
border-bottom: #505050 1px solid;
margin: 0 auto 30px auto;
/*padding: 5px 2px 5px 2px;*/
padding: 0;
height: 22px;
text-align: center;
vertical-align: middle;
color: #000000;
letter-spacing: 1px;
}
ul.menu {
list-style: none outside;
padding: 0 0 0 0;
margin: 0 0 0 0;
}
li.menu {
display: inline;
border: #D7D7D7 0px solid;
background: transparent url(../images/bg_li-9.jpg) repeat-x left top;
margin: 0;
padding: 5px;
width: 100px;
}
Et voici les résultats sous différents navigateurs :
FF1.5, la liste est décalée vers le haut.
http://membres.lycos.fr/pompoire/F0rum/menuDiv/images/pbDiv_alsa_ff1-5.jpg
IE5, c'est exactement ce à quoi j'aimerai arriver.
http://membres.lycos.fr/pompoire/F0rum/menuDiv/images/pbDiv_alsa_ie5.jpg
IE6, la liste est toute réduite, la faute au padding/margin à 0, mais si je change ça ça décale sur les autres navigateurs...
http://membres.lycos.fr/pompoire/F0rum/menuDiv/images/pbDiv_alsa_ie6.jpg
J'ai lu la FAQ et divers posts de ce forum et d'autres, mais toutes les solutions que j'ai essaié ne fonctionnent pas, avec les padding/margin j'ai un décalage entre les navigateurs, en ajoutant avant ou après le menu des div clear: both j'ai un ecart en haut et en bas du menu, avec des display différents rien n'y fait.
Je suis un peu perdu !
Peut être faudrait-il que j'essaie d'autres types de blocs ???
Merci d'avance à ceux qui prendrons le temps de me lire !
Speed.
EDIT : J'ai oublié de dire que vous pouvez voir un exemple de la page ici .
EDIT 2 : Désolé pour les pubs sur la pages de test
. Modifié par speedfightor (08 Mar 2006 - 11:46)
