Bonjour
J'essaie de faire un site de photographie personnelle, et j'ai des problèmes d'affichage de mon menu de gauche.
Voici déja l'url :
http://www.surf-bzh.com/jb/index_xhtml1.htm
Actuellement c'est sous Mozilla que l'affichage n'est pas bon, mais je peux faire l'inverse...
En fait je sais d'ou viens le problème...
Voici ma CSS :
[quote]body {
background-color: #000000;
text-align: center;
margin: 2px;
}
.conteneur {
background-color: #293142;
width: 770px;
border: 1px solid #FFFFFF;
text-align: left;
margin-right: auto;
margin-left: auto;
padding-bottom: 10px;
}
.header {
height: 80px;
width: 100%;
background-image: url(baniere/1.jpg);
}
.contenu {
width: 560px;
height:100%;
margin-left:210px;
}
#menuv {
background-image: url(Img1/fond_menu.gif);
height: 17px;
width: 100%;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #FFFFFF;
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
border-left-color: #FFFFFF;
font-size: 0px;
}
#menuv ul {
margin: 0px;
padding-bottom: 1px;
padding-top: 3px;
text-align: center;
}
#menuv li {
display:inline;
font-family: Georgia, "Times New Roman", Times, serif;
text-transform: uppercase;
font-size: 10px;
font-weight: bold;
margin-right: 10px;
margin-left: 10px;
}
a {
text-decoration: none;
color: #000000;
}
a:hover{
color: #FF6600;
}
.diap1 {
background-color: #000000;
background-image: url(Img1/diap.gif);
height: 138px;
width: 165px;
float: left;
margin-left: 4px;
margin-top: 9px;
text-align: center;
}
.photoaccueil {
margin-top: 20px;
margin-left: -2px;
border: 1px solid #FFFFFF;
}
.cadred {
margin-left:10px;
margin-top:10px;
height: 340px;
width: 535px;
text-align: left;
}
.cadredhaut {
background-image: url(Img1/1.gif);
background-repeat: no-repeat;
height: 27px;
width: 528px;
text-indent: 30px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 15px;
font-weight: bold;
}
.cadredgauche {
float: left;
}
.cadreddroite {
background-image: url(Img1/3.gif);
background-position: right top;
height: 316px;
width: 12px;
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
float: left;
}
.cadredbas {
background-image: url(Img1/4.gif);
background-repeat: no-repeat;
background-position: bottom;
height: 318px;
width: 514px;
float:left;
background-color: #999999;
}
.menugauche {
height: 300px;
width: 210px;
margin-top:10px;
margin-left:-200px;
position:absolute;
}
.cadreg {
}
.cadreghaut{
background-image: url(Img1/11.gif);
background-repeat: no-repeat;
height: 21px;
width: 195px;
text-indent: 30px;
}
.cadreggauche{
float: left;
background-image: url(Img1/12.gif);
background-repeat: repeat-y;
height: 300px;
width: 5px;
}
.cadregbas{
background-image: url(Img1/13.gif);
background-repeat: no-repeat;
background-position: bottom;
height: 26px;
width: 196px;
float:left;
}
.cadregdroite{
background-image: url(Img1/14.gif);
background-position: right top;
width: 190px;
height: 300px;
background-repeat: repeat-y;
margin: 0px;
padding: 0px;
float: left;
}
.cadregmilieu{
background-image: url(Img1/21.gif);
background-repeat: repeat-y;
height: 300px;
width: 195px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}
[/quote]
en fait le problème viens du :
.menugauche {
height: 300px;
width: 210px;
margin-top:10px;
margin-left:-200px;
position:absolute;
Si je ne met pas ces marges négatives, mon menu de gauche sera situé, sous IE, sur mon menu principal. Par contre ca passe tres bien sous Mozilla (ce qui est logique)
Je sais pas quoi faire
Merci de votre aide :wink: