menu horizontal défilant en css...un problème d'alignement

[cheloniologue]

Bonjour,

Alors je tente de faire une barre de menu déroulant. En gros plusieurs menu déroulant cote à cote.
Et c'est là que mon problème apparait ... je n'arrive pas à les aligner !!!

Voici le résultat actuel : http://www.cheloniophilie.com/Copie-index.php

Je voudrai les coller ...mais je n'y arrive pas ... j'arrive pas à voir quoi modifier dans le CSS ...

Code: Tout sélectionner

<STYLE type=text/css>#monmenu {
   FONT-WEIGHT: bold; FONT-SIZE: 90%; FONT-FAMILY: trebuchet ms,arial,tahoma,verdana,sans-serif
}
#monmenu UL UL {
   BORDER-RIGHT: #b0b0b0 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #b0b0b0 1px solid; DISPLAY: none; PADDING-LEFT: 0px; LEFT: 164px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: #b0b0b0 1px solid; PADDING-TOP: 0px; BORDER-BOTTOM: #b0b0b0 1px solid; POSITION: absolute; TOP: -1px
}
#monmenu LI {
   PADDING-RIGHT: 2px; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; MARGIN: 0px; WIDTH: 160px; PADDING-TOP: 2px; LIST-STYLE-TYPE: none; POSITION: relative; BACKGROUND-COLOR: #e0e0e0
}
#monmenu LI:hover {
   BACKGROUND-COLOR: #ffff70
}
#monmenu LI.sfhover {
   BACKGROUND-COLOR: #ffff70
}
#monmenu LI A {
   TEXT-DECORATION: none
}
#monmenu LI:hover UL.niveau2 {
   DISPLAY: block
}
#monmenu LI LI:hover UL.niveau3 {
   DISPLAY: block
}
#monmenu LI.sfhover UL.niveau2 {
   DISPLAY: block
}
#monmenu LI LI.sfhover UL.niveau3 {
   DISPLAY: block
}
#monmenu LI.plus {
   BACKGROUND-POSITION: right 50%; BACKGROUND-IMAGE: url(illustrations/fdroite.gif); BORDER-BOTTOM: #b0b0b0 1px solid; BACKGROUND-REPEAT: no-repeat
}
</STYLE>

Quelqu'un peut il m'aider ?

[cheloniologue]

je rappelle bien que c'est du css ... un menu déroulant en Javascript j'ai déjà fait sans problème mais en css je bloque quelque part ...

[stone66]

Bonjour,

j'aime pas du tout ce code mais bon ça ne regarde que moi

ton problème est que tu ne defini pas ta class niveau1 que tu mets dans ton <UL class=niveau1>

donc il faut ajouter à ta feuille css:

Code: Tout sélectionner

.niveau1 { padding-left:0;}

et ensuite tu mets ton <table width="100%">

donc il va utiliser toute la page, il faut retirer width="100%" ou mettre la taille exacte que tu veux.

Amicalement,
Stone66

[spout]

Tu rajoutes:

Code: Tout sélectionner

*{margin:0;padding:0;}

Puis tu enlèves le width:160px de #monmenu LI

[cheloniologue]

Merci !!! vraiment merci cela fonctionne impeccable !!! SEULEMENT si vous regardez par vous même ... les liens dans le menu déroulant n'ont pas la même longueur que le rectangle du haut !!!
Comment faire pour que les dimensions des "rectangles" soient les mêmes ???
regardez http://www.cheloniophilie.com/Copie-index.php

Voici le code actuel (j'ai viré les dimensions en 164px pour que tout rentre dans ma balise "with=100%")
PS: Le java c'est pour que cela fonctionne avec IE5 et IE6

Code: Tout sélectionner

<STYLE type=text/css>#monmenu {
   FONT-WEIGHT: bold; FONT-SIZE: 90%; FONT-FAMILY: trebuchet ms,arial,tahoma,verdana,sans-serif
}
#monmenu UL UL {
   BORDER-RIGHT: #b0b0b0 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #b0b0b0 1px solid; DISPLAY: none; PADDING-LEFT: 0px; LEFT: 100%; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: #b0b0b0 1px solid; PADDING-TOP: 0px; BORDER-BOTTOM: #b0b0b0 1px solid; POSITION: absolute; TOP: -1px
}
#monmenu LI {
   PADDING-RIGHT: 2px; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; MARGIN: 0px; WIDTH: 100%; PADDING-TOP: 2px; LIST-STYLE-TYPE: none; POSITION: relative; BACKGROUND-COLOR: #e0e0e0
}
#monmenu LI:hover {
   BACKGROUND-COLOR: #ffff70
}
#monmenu LI.sfhover {
   BACKGROUND-COLOR: #ffff70
}
#monmenu LI A {
   TEXT-DECORATION: none
}
#monmenu LI:hover UL.niveau2 {
   DISPLAY: block
}
#monmenu LI LI:hover UL.niveau3 {
   DISPLAY: block
}
#monmenu LI.sfhover UL.niveau2 {
   DISPLAY: block
}
#monmenu LI LI.sfhover UL.niveau3 {
   DISPLAY: block
}
#monmenu LI.plus {
   BACKGROUND-POSITION: right 50%; BACKGROUND-IMAGE: url(illustrations/fdroite.gif); BORDER-BOTTOM: #b0b0b0 1px solid; BACKGROUND-REPEAT: no-repeat
}
.niveau1 { padding-left:0; margin:0;padding:0;}

</STYLE>
<!--[if lt IE 7]>
<SCRIPT type=text/javascript>
// Fonction destinée à remplacer le "LI:hover" pour IE 6
sfHover = function() {
var sfEls = document.getElementById("monmenu").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover = function() {
this.className = this.className.replace(new RegExp(" sfhover"), "");
this.className += " sfhover";
}
sfEls[i].onmouseout = function() {
this.className = this.className.replace(new RegExp(" sfhover"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</SCRIPT>

<STYLE type=text/css>#monmenu LI {
   WIDTH: 100%
}
</STYLE>
<![endif]-->

[stone66]

tu ajoutes width: 100%; à #monmenu UL UL
et pour faire plus beau tu retires PADDING-RIGHT: 2px; PADDING-LEFT: 2px; à #monmenu LI

sinon juste pour un peu optimiser, ton css pourrais tenir en ces quelques lignes :

Code: Tout sélectionner

<STYLE type="text/css">
<!--
* { border:0;margin:0;padding:0}
#monmenu {
   FONT-WEIGHT: bold; FONT-SIZE: 90%; FONT-FAMILY: trebuchet ms,arial,tahoma,verdana,sans-serif
}
#monmenu UL UL {
   width:100%; BORDER: #b0b0b0 1px solid; DISPLAY: none; LEFT: 100%; POSITION: absolute; TOP: -1px
}
#monmenu LI {
   PADDING: 2px 2px; WIDTH: 98%; LIST-STYLE-TYPE: none; POSITION: relative; BACKGROUND-COLOR: #e0e0e0
}
#monmenu LI:hover, #monmenu LI.sfhover  {
   BACKGROUND-COLOR: #ffff70
}
#monmenu LI A {
   TEXT-DECORATION: none
}
#monmenu LI:hover UL.niveau2, #monmenu LI LI:hover UL.niveau3, #monmenu LI.sfhover UL.niveau2,#monmenu LI LI.sfhover UL.niveau3  {
   DISPLAY: block
}
#monmenu LI.plus {
   BACKGROUND-POSITION: right 50%; BACKGROUND-IMAGE: url(illustrations/fdroite.gif); BORDER-BOTTOM: #b0b0b0 1px solid; BACKGROUND-REPEAT: no-repeat
}

-->
</STYLE>

[cheloniologue]

Merci !!!

voilà la gueule que ça donne au final !!!
http://www.cheloniophilie.com/Copie-index.php

PS: j'ai pas encore touché au css du texte ... je vais m'en occuper

Merci beaucoup pour vos conseils

Cordialement