28173 sujets

CSS et mise en forme, CSS3

Bonjour,

Après avoir tout tenter, modifier, remodifier sans succès, je fais appel à vous. Vous êtes ma dernière chance ^^.

Voilà, j'ai mon menu horizontal qui disparaît purement et simplement sous Internet Explorer 6.0.

Le lien

Le code css :
/*  Menu horizontal */

#menublock {
width: 638px;
height: 35px;
margin-top: 52px;
margin-left: auto;
margin-right: auto;
}

ul#menu {
margin: 0 ;
padding: 0 ;
list-style-type: none ;	
margin-top: -35px;
}

ul#menu li {
font-size: 17px;
color: #232323;
text-align: center;
float: left;
}

#menu li a {
border: 0px;
color: #EDEDED;
}

#menu li a:hover {
color: #000;
}

#accueil a {
display: block;
width: 96px;
line-height: 35px;
text-decoration: none;
background: url(/masseffect/img/navbar/accueil.gif) no-repeat 0 0;
}

#accueil a:hover {
background: url(/masseffect/img/navbar/accueil.gif) no-repeat 0 -35px;
}

#news a {
display: block;
width: 79px;
line-height: 35px;
text-decoration: none;
background: url(/masseffect/img/navbar/news.gif) no-repeat 0 0;
color: #000000;
}

#news a:hover {
background: url(/masseffect/img/navbar/news.gif) no-repeat 0 -35px;
}

#dossiers a {
display: block;
width: 114px;
line-height: 35px;
text-decoration: none;
background: url(/masseffect/img/navbar/dossiers.gif) no-repeat 0 0;
color: #000000;
}

#dossiers a:hover {
background : url(/masseffect/img/navbar/dossiers.gif) no-repeat 0 -35px;
}

#galerie a {
display: block;
width: 99px;
line-height: 35px;
text-decoration: none;
background: url(/masseffect/img/navbar/galerie.gif) no-repeat 0 0;
color: #000000;
}

#galerie a:hover {
background: url(/masseffect/img/navbar/galerie.gif) no-repeat 0 -35px;
}

#faq a {
display: block;
width: 62px;
line-height: 35px;
text-decoration: none;
background: url(/masseffect/img/navbar/faq.gif) no-repeat 0 0;
color: #000000;
}

#faq a:hover {
background: url(/masseffect/img/navbar/faq.gif) no-repeat 0 -35px;
}

#medias a {
display: block;
width: 93px;
line-height: 35px;
text-decoration: none;
background: url(/masseffect/img/navbar/medias.gif) no-repeat 0 0;
color: #000000;
}

#medias a:hover {
background: url(/masseffect/img/navbar/medias.gif) no-repeat 0 -35px;
}

#forums a {
display: block;
width: 95px;
line-height: 35px;
text-decoration: none;
background: url(/masseffect/img/navbar/forums.gif) no-repeat 0 0;
color: #000000;
}

#forums a:hover {
background: url(/masseffect/img/navbar/forums.gif) no-repeat 0 -35px;
}



Le code xhtml :

<!-- Menu horizontal -->

 <div id="menublock">

<ul id="menu">
	<li id="accueil"><a href="" title="Retour &agrave; l'accueil">ACCUEIL</a></li>
	<li id="news"><a href="" title="Actualit&eacute;">NEWS</a></li>
	<li id="dossiers"><a href="" title="Les Dossiers">DOSSIERS</a></li>
	<li id="galerie"><a href="" title="La galerie du jeu">GALERIE</a></li>
	<li id="faq"><a href="" title="Les r&eacute;ponses &agrave; vos questions">FAQ</a></li>
	<li id="medias"><a href="" title="Retrouvez les vid&eacute;os du jeu">MEDIAS</a></li>
	<li id="forums"><a href="" title="Au coeur de la communaut&eacute;">FORUMS</a></li>
</ul>

 </div>
<!-- Fin du menu hozirontal -->	


Merci pour votre aide !
Bonjour,

Une piste :
/*#menublock {
width: 638px;
height: 35px;
margin-top: 52px;
margin-left: auto;
margin-right: auto;

}*/

#menu {
width: 638px;
height: 35px;
margin-left: auto;
margin-right: auto;
list-style-type: none ;	
margin-top: -35px;
height: 1%;
border: 1px solid white;
}

#menu li {
font-size: 17px;
color: #232323;
text-align: center;
float: left;
background: red;

}

#menu li a {
border: 0px;
color: #EDEDED;
}

#menu li a:hover {
color: #000;
}

#accueil a {
display: block;
width: 96px;
line-height: 35px;
text-decoration: none;
background: lime;
}

#accueil a:hover {
background: url(/masseffect/img/navbar/accueil.gif) no-repeat 0 -35px;
}


A quoi sert #menublock ?
Ton bloc menu n'était pas dimensionné d'ou chez ie6 un problème de haslayout. explications là
Wouhou !

Merci beaucoup à toi Smiley langue .

Le problème venait effectivement du menublock, je ne sais pas pourquoi je l'ai mis. Donc après avoir modifier 2-3 trucs, le site est désormais nickel sous IE6, 7, Firefox 1.x, 2.x, Safari 2, 3, Konqueror, Opera, voilà c'est tout ce que j'ai testé.

Merci encore à toi !

Je file un extrait du code modifié pour ceux souhaitant tiré des leçons de mon erreure :

#menu {
width: 638px;
height: 35px;
margin-left: auto;
margin-right: auto;
list-style-type: none ;	
margin-top: 52px;
border: 0px;
}

#menu li {
font-size: 17px;
color: #232323;
text-align: center;
float: left;
background: black;
}

#menu li a {
border: 0px;
color: #EDEDED;
}

#menu li a:hover {
color: #000;
}

#accueil a {
display: block;
width: 96px;
line-height: 35px;
text-decoration: none;
background: url(/masseffect/img/navbar/accueil.gif) no-repeat 0 0;
}

#accueil a:hover {
background: url(/masseffect/img/navbar/accueil.gif) no-repeat 0 -35px;
}


De plus, le site devrait rester encore un moment à cette adresse.

Merci à cette formidable communauté Smiley smile .