Bonjour
Je suis en train de faire un menu avec image. J'ai un problème sous IE tout va bien et sur Firefox ça se décale (pour le lien de retour). J'ai pris le script donné sur le bouquin (sur le site ça doit être pareil), remanié à ma sauce parce que ça change un peu. Sauf que ça ne marche pas bien. Je n'arrivais pas à avoir un truc niquel sur IE et sans problème pour Firefox, et puis maintenant c'est le contraire. Bref, j'ai ajouté un display: inline; dans la partie decalage ... mais là je ne vois pas comment résoudre le problème maintenant sous firefox :
htt://lbarbado.free.fr/menus/sous_menu.html
htt://lbarbado.free.fr/menus/menu_principal.html (là ça marche mais c'était moins compliqué ...)
Merci d'avance pour vos remarques et votre aide
Loïc
Modifié par _Lolo (14 Feb 2008 - 14:03)
Je suis en train de faire un menu avec image. J'ai un problème sous IE tout va bien et sur Firefox ça se décale (pour le lien de retour). J'ai pris le script donné sur le bouquin (sur le site ça doit être pareil), remanié à ma sauce parce que ça change un peu. Sauf que ça ne marche pas bien. Je n'arrivais pas à avoir un truc niquel sur IE et sans problème pour Firefox, et puis maintenant c'est le contraire. Bref, j'ai ajouté un display: inline; dans la partie decalage ... mais là je ne vois pas comment résoudre le problème maintenant sous firefox :
htt://lbarbado.free.fr/menus/sous_menu.html
htt://lbarbado.free.fr/menus/menu_principal.html (là ça marche mais c'était moins compliqué ...)
ul, li { /* Suppression des marges et des puces
des éléments <ul> et <li> */
list-style-type: none;
margin:0;
padding:0;
}
ul {
position: absolute; /* Positionnement pour IE5 et IE5.5 */
left: 25px; /* Positionnement de l?élément <ul>
par rapport à la gauche du conteneur */
top: 205px; /* Positionnement de l?élément <ul>
par rapport au sommet du conteneur */
background: transparent url(images/sous_menus_CSS.jpg) top left no-repeat;
/* Arrière-plan général du menu */
height: 315px;
width: 142px;
/*padding-top: 27px;*/
text-align: center;
}
li {
display: inline; /* Correction pour IE5 et IE5.5 */
}
li a {
border-bottom-style: solid; border-bottom-width: 1px; border-color: #32354E;
display: block;
height: 40px;
width: 142px;
line-height: 40px;
color: #32354E; /*#B1B184;*/
font-size: 13px;
font-family: arial, serif;
text-decoration: none;
font-weight: bold;
font-style: italic;
}
a#lien_retour { /*dernier bloc de retour page accueil*/
border-bottom-style: none;
display: block;
height: 40px;
width: 142px;
line-height: 40px;
}
li#titre {
border-bottom-style: none;
display: block;
height: 27px;
width: 142px;
line-height: 27px;
color: #32354E;
font-size: 16px;
font-family: arial, serif;
font-weight: bold;
font-style: italic;
}
li.vide { /* bloc sans lien */
border-bottom-style: none;
display: block;
height: 41px;
width: 142px;
line-height: 41px;
margin:0;
padding:0;
}
li#espaceur { /* decalage entre les differentes cases de 40px (+1 ligne) et le lien retour */
border-bottom-style: none;
display: block;
height: 2px;
width: 142px;
line-height: 2px;
margin:0;
padding:0;
display: inline;
}
li a:hover {
color: #033D36;
background: transparent url(images/sous_menus_CSS.jpg) top left no-repeat;
}
a#lien1:hover {
background-position: 0% -342px; /* Décalage de l?arrière-plan
pour chaque bouton */
}
a#lien2:hover {
background-position: 0% -383px;
}
a#lien3:hover {
background-position: 0% -424px;
}
a#lien4:hover {
background-position: 0% -465px;
}
a#lien5:hover {
background-position: 0% -506px;
}
a#lien6:hover {
background-position: 0% -547px;
}
/*a#vide:hover {
background: transparent url(images/sous_menus_CSS.jpg) top left no-repeat;
}*/
a#lien_retour:hover {
background-position: 0% -590px;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Un menu avec multiples survols sans preload d'images</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="sous_menus.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<ul>
<li id="titre">Le marais</li>
<li><a id="lien1" href="#">Agenda</a></li>
<li><a id="lien2" href="#">Notre association</a></li>
<li><a id="lien3" href="#">Bourse aux parcelles</a></li>
<li><a id="lien4" href="#">Contacts</a></li>
<li class="vide"> </li>
<li class="vide"> </li>
<li id="espaceur"> </li>
<li><a id="lien_retour" href="#"> </a></li>
</ul>
</body>
</html>Merci d'avance pour vos remarques et votre aide
Loïc
Modifié par _Lolo (14 Feb 2008 - 14:03)