[Résolu]Menu déroulant horizontal - décalage sous-menu IE7

Question

sebcbien0

3 Aug 2007 à 14:47

Bonjour à tous !

Pour mon premier message, je viens vous proposer un problème surement très simple, mais que je n'arrive pas à solutionner.

Le problème est visible sur cette page.

Le thème de base est celui du tutoriel permettant de réaliser un thème complet (XHTML/CSS) en 5 étapes.

J'ai ensuite modifié le menu, afin de le rendre déroulant.
Je l'ai réalisé en me servant de cette page.

Voici mon code pour le CSS:



body
{
margin: 10px 0 ;
padding: 0 ;
text-align: center ;
font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
background: #dea ;
}

div#conteneur
{
width: 770px ;
margin: 0 auto ;
text-align: left ;
border: 2px solid #ab4 ;
background: #fff ;
}

h1#header
{
height: 150px ;
background: url(images/apple.jpg) no-repeat left top ;
margin: 0 ;
}

h1#header a
{
width: 400px ;
height: 70px ;
display: block ;
background: url(images/title.gif) no-repeat ;
position: relative ;
left: 350px ;
top: 15px ;
text-indent: -5000px ;
}/* On donne les mêmes dimensions au lien, chose
possible grâce à la propriété display: block ; qui transforme le lien
en élément de type block, auquel on peut donner des propriétés de taille.
On met aussi l'image de fond qui a les mêmes dimensions que le cadre ainsi créé */
/* Le text-indent négatif est fait pour pouvoir ne
cacher le texte hors de la page, ce que nous voulons. Ainsi il reste
exploitable pour les syntèses vocales */

#menu {
height: 35px ;
background: url(images/bg_menu.gif) repeat-x 0 -25px ;
margin: 0 ;
padding: 0 ;
}

#menu, #menu ul {	
padding: 0;
margin: 0;
list-style: none;
text-align: center ;
}

#menu a {
display: block;
width: 140px;
text-decoration: none ;
}

#menu li {
	padding: 0;
margin: 0;
float: left;
width: 140px;
}

#menu li ul {
	padding: 0;
margin: 0;
	position: absolute;
	width: 140px;
	left: -999em;
}

#menu li:hover ul {
	left: auto;
}

#menu li:hover ul, #menu li.sfhover ul {
	left: auto;
}

.cat{
line-height: 25px ;
border-right: 2px solid #dea ;
}

.subcat{
line-height: 20px ;
}

.cat a {
font-size: 1.2em ;
font-weight: bold ;
letter-spacing: 2px ;
color: #fff ;
display: block ;
background: url(images/bg_menu.gif) repeat-x 0 -25px ;
}

.subcat li a {
font-size: 1em ;
font-weight: normal ;
letter-spacing: 1px ;
color: #fff ;
display: block ;
background: url(images/bg_menu.gif) repeat-x 0 -25px ;
}

.cat a:hover , .subcat a:hover{
background: url(images/bg_menu.gif) repeat-x 0 0 ;
}

/* Ex Menu */
/*
ul#menu
{
height: 35px ;
margin: 0 ;
padding: 0 ;
background: url(images/bg_menu.gif) repeat-x 0 -25px ;
list-style-type: none ;
}
/* On donne une hauteur au menu, correspondant a
la taille de l'image utilisée en fond, on met ensuite l'image de fond
avec un décalage de 25 pixels vers le haut pour utiliser la technique de roll over expliquée dans un autre tutoriel; */
/*

ul#menu li
{
float: left ;
text-align: center ;
}/* On rend les li en flottant pour pouvoir les
afficher horizontalement, on cache les puces, et on centre le texte */
/*
ul#smenu1 li
{
text-align: center ;
}/* On rend les li en flottant pour pouvoir les
afficher horizontalement, on cache les puces, et on centre le texte */
/*
ul#menu li a
{
width: 120px ;
line-height: 25px ;
font-size: 1.2em ;
font-weight: bold ;
letter-spacing: 2px ;
color: #fff ;
display: block ;
text-decoration: none ;
border-right: 2px solid #dea ;
}/* C'est sur les liens que le gros du travail est
effectué, largeur, hauteur de ligne, taille de police, graisse de police,
espacement des lettres, couleur, bordure et decoration du texte. Nous pouvons dimensionner les a grâce à la propriété display: block ; */

/* ul#menu li a:hover
{
background: url(images/bg_menu.gif) repeat-x 0 0 ;
}/* Et pour finir on décale l'image de fond au passage
de la souris pour laisser aparaître l'état survolé de l'image, voir le tutoriel sur les roll over pour plus de détails */

/* fin ex menu */
div#contenu
{
padding: 0 25px 0 100px ;
background: url(images/bg_page.gif) no-repeat 15px 15px ;
}
div#contenu h2
{
padding-left: 25px ;
line-height: 25px ;
font-size: 1.4em ;
background: url(images/little_apple.gif) no-repeat left bottom ;
color: #9b2 ;
border-bottom: 1px solid #9b2 ;
}
div#contenu h3
{
margin-left: 15px ;
padding-left: 5px ;
border-bottom: 1px solid #9b2 ;
border-bottom-style:dotted;
color: #9b2 ;
}
div#contenu p
{
text-align: justify ;
text-indent: 2em ;
line-height: 1.7em ;
}
div#contenu a
{
color: #8a0 ;
}
div#contenu a:hover
{
color: #9b2 ;
}
p#footer
{
margin: 0 ;
padding-right: 10px ;
line-height: 30px ;
text-align: right ;
color: #8a0 ;
}
pre
{
overflow: auto ;
background: #dea ;
border: 2px solid #9b2 ;
padding: 5px 0 0 5px ;
font-size: 1.2em ;
}
pre span
{
color: #560 ;
}
pre span.comment
{
color: #b30000 ;
}

<!--[if IE]>
html pre
{
width: 636px ;
}
<!--[endif]-->

et voici comment est constitué mon menu:



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>Gite rural</title>


  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">

  <meta http-equiv="Content-Style-Type" content="text/css">

  <meta http-equiv="Content-Language" content="fr">
  
  <script type="text/javascript">
<!--
sfHover = function() {
	var sfEls = document.getElementById("menu").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//-->

</script>

  <style type="text/css">@import "style.css";</style>

 
</head>
<body>

<div id="conteneur">

  <h1 id="header" >
    <a href="index.php" title="Gite - Accueil"><span>Gite</span></a>  </h1>

  
  <ul id="menu">
    
<li class="cat"><a href="#">Accueil</a></li>

<li class="cat"><a href="#">Le Gite</a>
	<ul class="subcat">
		<li><a href="#">Chambre 1</a></li>
		<li><a href="#">Chambre 2</a></li>
		<li><a href="#">Mobilité réduite</a></li>

		<li><a href="#">Les communs</a></li>
		<li><a href="#">Extérieur</a></li>
	</ul>
</li>

<li class="cat"><a href="#">Infos</a>
	<ul class="subcat">
		<li><a href="#">S'y rendre</a></li>

		<li><a href="#">Tarifs</a></li>
		<li><a href="#">Planning</a></li>
	</ul>
</li>

<li class="cat"><a href="#">A voir</a>
	<ul class="subcat">
		<li><a href="#">Musée</a></li>

		<li><a href="#">Des trucs</a></li>
		<li><a href="#">D'autres trucs</a></li>
	</ul>
</li>

<li class="cat"><a href="#">Contact</a></li>
    
      </ul>
  
<div id="contenu">

<p>Mettez ici simplement le contenu que vous voulez voir afficher en accueil.</p></div> 

<p id="footer">
R&eacute;alisation : Sebcbien 
</p> 
</div>
</body>
</html>

Mon problème: le sous menu est décalé sous IE, mais pas sous firefox ...
J'ai effectué une recherche dans les sujets résolus, mais je n'ai pas trouvé d'équivalents ...

Merci d'avance pour votre aide !
[/i][/i]
Modifié par sebcbien0 (03 Aug 2007 - 16:25)

ghost

3 Aug 2007 à 16:03

Bonjour,

Sauf erreur, left: auto; je ne connais pas. Smiley cligne

Il faudrait peut être placer tes #menu li en position: relative; pour servir de repère de positionnement à ton menu déroulant qui est en position absolute et affecter tes #menu li:hover ul, #menu li:hover ul, #menu li.sfhover ul d'un top: 25px (par exemple) et left: 0;


#menu li {
	padding: 0;
margin: 0;
float: left;
width: 140px;
position: relative;
}

#menu li:hover ul {
	left: 0;
	top: 25px;
}

#menu li:hover ul, #menu li.sfhover ul {
	left: 0;
	top: 25px;
}

sebcbien0

3 Aug 2007 à 16:24

Merci beaucoup, ghost !

J'ai effectué les modifications que tu m'a apporté, et cela fonctionne parfaitement, maintenant !

En fait, j'avais utilisé left: auto; car c'est ce qui est indiqué dans ce tutoriel ...

Peux tu m'expliquer plus amplement la différence entre les 2, et à quoi correspond le top: 25px; ? (je pense que c'est pour le placer directement sous le menu).

De même, le validateur W3C me trouve une erreur a ce niveau:

<!--[if IE]>

html pre

{

width: 636px ;

}

<!-- endif -->

Ou dois-je mettre cette ligne, pour ne plus avoir d'erreur ?

Merci encore à toi, et merci d'avance pour les précisions ! Smiley ravi

(je passe en résolu ...)

ghost

3 Aug 2007 à 17:27

Re,

Pour le tuto, à vrai dire, je n'ai jamais utiliser left: auto; Smiley lol

mais je vais me renseigner (si un érudit passe par là ...)
Pour le positionnement, tu places tes li en relative qui servent de référence de positionnement pour tes absolutes, donc left: 0 et top 25px qui correspond à la hauteur actuelle de tes li (tu peux aussi fixer un height à tes li et l'utiliser pour le décalage) ce qui place les items du menu déroulant juste en dessous de tes li ...
Pour le commentaire conditionnel fautif au validateur, je crois qu'il ne te sert à rien pour ton code Smiley cligne

Sujet clos

CSS et mise en forme, CSS3

[Résolu]Menu déroulant horizontal - décalage sous-menu IE7