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

WRInaute impliqué
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:
<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 ?
 
WRInaute impliqué
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 ...
 
WRInaute discret
Bonjour,

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

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:
.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
 
WRInaute impliqué
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:
<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]-->
 
WRInaute discret
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:
<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>
 
Discussions similaires
Haut