28173 sujets

CSS et mise en forme, CSS3

Bug d'un menu (avec balise <li>) sous IE

Bonjour tout le monde,

je viens de faire un site web, mais après l'avoir éssayer sur différent navigateur, j'ai remarqué un petit bug avec ie.

Dans le menu rouge, les thèmes sont en gras, et les sous thèmes en "maigre", avec une indentation (un padding de 40px). Sauf que le dernier thème est décaler lui aussi ! Smiley sweatdrop et l'image que j'ai mis dans hover (pour les sous menu) apparait aussi lorsqu'on passe dessus...

Pour mieux comprendre voici le lien : http://b.richy.free.fr/Coaxial/coaxial/coaxialsynoptique.html

Code CSS :

div#sousmenu{
	background: #FF0000 url(images/sousmenu.png);
	background-repeat: repeat;
	position: absolute;
	width : 200px;
	height : 1000px;
	top:205px;
	left : 50%;
	margin-left:-450px;
	line-height : 150%;
	color: #000;
	font-size:10pt;
}

div#sousmenu li {
    height: 30px;
    width: 200px;
    text-align: left;
    line-height: 200%;
    list-style-type: none;
	margin-left : -16px;
	font: 10pt/30px "Verdana"; /*aligne le texte et le fond verticalement */

}

div#sousmenu li a {
    display: block;  /* prend toute la largeur de l'image */
    width: 200px;
    height: 30px;
    text-decoration: none;
	padding-left : 40px; /*décale les sous-thèmes */
	
}

div#sousmenu li a:link {
    color: #000;

}

div#sousmenu li a:visited {
    color: #000;
}

div#sousmenu li a:hover {
    font-weight: bold;
	background-image: url(images/boutonhover.jpg); 
	background-repeat: no-repeat;
    color: red;
} 

div#sousmenu li a:active {
    font-weight: bold;
	background-image: url(images/boutonhover.jpg); 
	background-repeat: no-repeat;
    color: red;
}

div#sousmenu li.actif{
    font-weight: bold;
	background-image: url(images/boutonhover.jpg); 
	background-repeat: repeat;
    color: red;
}

#sousmenubas{
	background-image: url(images/sousmenubas.jpg);
	width:200px;
	height : 30px;
	float : left;
	margin-right:30px;
	margin-bottom:30px;
	clear:both;
}

#sousmenu .theme {
color:#000;
font-weight:bold;
text-align : left;
padding-left: 20px;
font-family:"Verdana";
}

#sousmenu .theme a:link{
color:#000;
font-weight:bold;
text-align : left;
}
#sousmenu .theme a:visited{
color:#000;
font-weight:bold;
text-align : left;
}
#sousmenu .theme a:hover{
color:red;
font-weight:bold;
text-align : left;
text-decoration:none;
}
#sousmenu .theme a:active{
color:#000;
font-weight:bold;
text-align : left;
}
#sousmenu .themeused {
color:#C8C8C8;
font-weight:bold;
text-align : left;
padding-left:20px;
font-family:"Verdana"
}


Code HTML : 

<div id="sousmenu">
	<p class="theme"><a href="reference.html">Synoptique</a></p>
	<p class="theme">Ethique</p>
		<li><a href="ethique/confidentialite.html">Confidentialité</a></li>
		<li><a href="ethique/noninterventionnisme.html">Non interventionnisme</a></li>
		<li><a href="ethique/continuite.html">Continuité</a></li>
		<li><a href="ethique/nondependance.html">Non dépendance</a></li>
		<li><a href="ethique/cooperation.html">Coopération</a></li>
		<li><a href="ethique/coresponsabilite.html">Co-responsabilité</a></li>
	<p class="theme"><a href="reference.html">Références</a></p>
</div>


Pourquoi ne se comporte t'il pas comme les autres Smiley bawling ?

Merci de m'aider Smiley cligne
Modifié par Euthanatos (10 Jan 2007 - 20:07)
Salut,

essayes d'ajouter des <ul> autour de tes <li> !

Ce qui donnerait :


<ul>
<li>....................</li>
<li>....................</li>
<li>....................</li>
<li>....................</li>
</ul>


Car la ton code n'est pas valide.
Pourtant chez moi ca marche ........

Quand tu utilise des <li>, encore un fois : tu DOIS mettre des <ul> autour de ces <li> !

Donc ca donne : 


<ul>
	<li><a href="ethique/confidentialite.html">Confidentialité</a></li>
	<li><a href="ethique/noninterventionnisme.html">Non interventionnisme</a></li>
	<li><a href="ethique/continuite.html">Continuité</a></li>
	<li><a href="ethique/nondependance.html">Non dépendance</a></li>
	<li><a href="ethique/cooperation.html">Coopération</a></li>
	<li><a href="ethique/coresponsabilite.html">Co-responsabilité</a></li>
</ul>
Salut Euthanatos!

Petite remarque en passant: quand tu rencontres ce genre de problème, n'hésite pas à soumettre ton code au validateur du W3C. C'est typiquement le genre d'erreur qu'il peut te signaler.

Un code valide étant indispensable pour assurer un rendu cohérent sur les différents navigateurs du marché, c'est une étape absolument nécessaire. Essayer de résoudre des problèmes d'affichage sur base d'un code erroné est une perte de temps, tu es certain de les voir réapparaitre d'une façon ou d'une autre.

Un tuyau: l'extension "webdeveloper toolbar" de Firefox permet de soumettre des pages en ligne ou locales au validateur via la barre d'outil, très pratique!

Par ailleurs, si tu considères le sujet comme [Résolu], peux tu le signaler dans le titre de ton sujet, stp ?

Bonne continuation Smiley cligne
Sujet clos
Aller à