18041 sujets

Questions générales et questions de débutants

Décalage avec menu déroulant... différent sous ie et firefox !

Bonjour, quelques images parlant plus qu'un long discours :

Voici la page type de galerie du site tel que je le voudrais (en gros) !!!

Et j'ai donc plusieurs petits problèmes, à savoir sous IE 6 un décalage du corps en entier, ici.

Et sous firefox, c'est un peu différent, seul la galerie glisse, mais le background passe bien sous les menus, ici ?
Et j'ai en plus, uniquement sous firefox un problème de footer qui ne veut pas rester en bas...

Donc le code html du menu :
<div id="menu">
			<dl><!-- Menu Salon !-->
				<dt onmouseover="javascript:montre('smenu1');">SALON</dt>
					<dd id="smenu1" onmouseover="javascript:montre('smenu1');"onmouseout="javascript:montre('');">
						<ul> 
							<li><a href="galerie-beta.php">Canapé</a></li>
							<li><a href="galerie-beta.php">Convertible</a></li>
							<li><a href="galerie-beta.php">Rangement</a></li>
						</ul>
					 </dd>
				</dt>
			</dl>
	
			<dl><!-- Menu Salle à manger !-->			
				<dt onmouseover="javascript:montre('smenu2');">SALLE A MANGER</dt>
					<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
						<ul>
							<li><a href="galerie-beta.php">Table</a></li>
							<li><a href="galerie-beta.php">Chaise</a></li>
							<li><a href="galerie-beta.php">Rangement</a></li>
						</ul>
					</dd>
				</dt>
			</dl>	
			<dl><!-- Menu Chambre !-->		
				<dt onmouseover="javascript:montre('smenu3');">CHAMBRE</dt>
					<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
						<ul>
							<li><a href="galerie-beta.php">Literie</a></li>
							<li><a href="galerie-beta.php">Convertible</a></li>
							<li><a href="galerie-beta.php">Rangement</a></li>
							<li><a href="galerie-beta.php">Accessoire</a></li>
						</ul>
					</dd>
				</dt>
			</dl>

			<dl><!-- Gain de place !-->		
				<dt onmouseover="javascript:montre('smenu4');">Gain de place</dt>
					<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">
						<ul>
							<li><a href="galerie-beta.php">Convertible</a></li>
							<li><a href="galerie-beta.php">Pont</a></li>
							<li><a href="galerie-beta.php">Gigogne</a></li>
						</ul>
					</dd>
				</dt>
			</dl>
			
			
			<dl><!-- Menu types de meubles !-->		
				<dt onmouseover="javascript:montre('smenu5');">Types de Meubles</dt>
					<dd id="smenu5" onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre('');">
						<ul>
							<li><a href="galerie-beta.php">Pont</a></li>
							<li><a href="galerie-beta.php">Buffet</a></li>
							<li><a href="galerie-beta.php">Convertible</a></li>
							<li><a href="galerie-beta.php">Literie</a></li>
							<li><a href="galerie-beta.php">Fauteuil</a></li>
							<li><a href="galerie-beta.php">Table</a></li>
							<li><a href="galerie-beta.php">Chaise</a></li>
							<li><a href="galerie-beta.php">Gigogne</a></li>
						</ul>
					</dd>
				</dt>
			</dl>
	
			
			<dl><!-- Matières et couleurs !-->		
				<dt onmouseover="javascript:montre('smenu6');">Matières et Couleurs</dt>
					<dd id="smenu6" onmouseover="javascript:montre('smenu6');" onmouseout="javascript:montre('');">
						<ul>
							<li><a href="galerie-beta.php">Pin</a></li>
							<li><a href="galerie-beta.php">Rotin</a></li>
							<li><a href="galerie-beta.php">Chêne</a></li>
							<li><a href="galerie-beta.php">Vernis</a></li>
							<li><a href="galerie-beta.php">Laques</a></li>
						</ul>
					</dd>
				</dt>
			</dl>
			

			<dl><!-- Menu Contact !-->
				<dt onmouseover="javascript:montre();"><a href="../contact.php" title="Contact">CONTACT</a></dt>
			</dl>
			
			
			<dl><!-- Menu Retour !-->
				<dt onmouseover="javascript:montre();"><a href="../accueil.php" title="Retour Accueil">RETOUR</a></dt>
			</dl>
</div>


Et sa CSS : 
dl, dt, dd, ul, li {
	margin: 0;
	padding: 0;
	z-index: 100;
	list-style-type: none;
	color: White;
	font: /12 "Futura Lt BT", "Futura Md BT", "Futura XBlk BT", "FuturaBlack BT";
}

#menu {
	top: 0;
	width: 800px; /* correction pour Opera */
}

#menu dl {
	float: left;
	width: 100px;
}

#menu dt {
	cursor: pointer;
	text-align: center;
	font-weight: normal;
	background: transparent url(../images/menu.gif) no-repeat;
	height: 30px;
}


#menu li {
	text-align: center;
	background: transparent url(../images/smenu.gif) no-repeat;
	height: 20px;
}
#menu li a, #menu dt a {
	color: White;
	text-decoration: none;
	display: block;
	height: 100%;
	border: 0 none;
}
#menu :hover {
	background: transparent url(../images/menu2.gif) no-repeat;
}

#menu li a:hover, #menu li a:focus {
	z-index: 100;
	background: transparent url(../images/smenu2.gif) no-repeat;
}


A mon avis tout ça va vous paraitre bien bordélique, mais je débute et j'bidouille un peu comme je peux... Si y a des trucs inutile ou qui ne sont pas trés "académiques" (c'est surement le cas), je me ferais une joie de nettoyer tout ça si on m'explique pourquoi ! Attention, j'comprends vite, mais faut m'expliquer longtemps...
Modifié par just_call_me_lol (19 Jul 2007 - 12:11)
Salut,

Une page en ligne et/ou l'intégralité du code html et css aideraient bien plus que des images à mon avis.

Quoi qu'il en soit, je pense que tu peux avoir un problème avec le positionnement de ton menu déroulant, il faudrait que le sous menu soit en position absolue, pour passer par dessus le contenu. Là il ne doit pas l'être, d'où le décalage du reste du site. Smiley cligne
Merci Mikachu, j'ai édité mon premier message en rajoutant le code du menu et la CSS qui va avec !

Bon alors j'ai essayé la position absolue, du coup le menu est à la place souhaité tout le temps, et les sous-menus "déroulent" bien par dessus le reste de la page, aussi bien sous IE que sous Firefox ! Suaf que... du coup, ces mêmes sous-menus ne "déroulent" plus entièrement (un seul titre-bouton apparait à chaque fois-le premier)... P'têt j'met pas le position : absolute où il faut, ou c'est ma CSS qu'est tellement bordélique que ça zone ????
Sujet clos
Aller à