bonjour à tous,
je m'appelle joe, 22 ans, étudiant dans le multimédia et créateur de site à l'occasion...
j'ai suivi les tutorials pour créer une page tout bien en CSS, mais jai un soucis avec le resultat final. Sous firefox, nickel pile poil, mais sous IE ya un soucis avec des espacements, j'ai testé plusieurs trucs mais rien ne passe.... J'espere que qq'un pourra me guider...
Voici l'adresse de la page en question : www.apis-togo.org
Voici le code CSS que j'utilise :

#header {
width: 848px;
height: 109px;
/*background-color: #660000;*/
}
#conteneur {
position: absolute;
width: 848px;
height: 539px;
left: 50%;
margin-left: -385px;
/*background-color:#FFCC00;*/
}
#centre {
width: 617px;
height: 396px;
overflow: auto;
background-image: url(images/makettev5_14.jpg);
margin-left: 222px;
margin-right: 9px;

}


#gauche {
position: absolute;
left:0;
width: 222px;
height: 429px;
}

#droite {
position: absolute;
right:0;
width: 9px;
height: 395px;
background-image: url(images/makettev5_15.jpg);
}
#pied {
margin-left: 222px;
width: 626px;
height: 34px;
background-image: url(images/makettev5_17.jpg);
}

#menuhaut{
width: 222px;
height: 193px;
background-image: url(images/makettev5_13.jpg);
}
#menubas{
width: 222px;
height: 236px;
background-image: url(images/association-humanitaire.jpg);
}

/******************************************
/****************************************    HEADER   ***********************************************************************************/
.headerconteneur{
width: 848px;
height: 109px;
/*background-color: #33FF00;*/
margin: 0px;
padding: 0px;
}

.logo{
float:left;
width: 187px;
height: 75px;
background-image: url(../images/logo-association-afrique.jpg);
margin: 0px;
}
.header{
float:left;
width: 661px;
height: 75px;
background-image: url(../images/timbre-togo.jpg);
margin: 0px;
}



a.menu1{   /* définition de la classe "menu1" de la balise <a> */
float:left;
width: 99px;
height: 34px;
background-image: url(../images/accueil.jpg);
margin: 0px;
}
a.menu1:hover { /* définition de la classe "menu1" de la balise <a> au survol */
     background-image: url(../images/ro-accueil.jpg); /* source de l'image d'arrivée */
     } 

a.menu2{
float:left;
width: 88px;
height: 34px;
background-image: url(../images/togo.jpg);
margin: 0px;
}
a.menu2:hover { /* définition de la classe "menu1" de la balise <a> au survol */
     background-image: url(../images/ro-togo.jpg); /* source de l'image d'arrivée */
     } 
	 
a.menu3{
float:left;
width: 170px;
height: 34px;
background-image: url(../images/association-apis.jpg);
margin: 0px;
}
a.menu3:hover { /* définition de la classe "menu1" de la balise <a> au survol */
     background-image: url(../images/ro-association-apis.jpg); /* source de l'image d'arrivée */
     } 

a.menu4{
float:left;
width: 142px;
height: 34px;
background-image: url(../images/mission-humanitaire.jpg);
margin: 0px;
}
a.menu4:hover { /* définition de la classe "menu1" de la balise <a> au survol */
     background-image: url(../images/ro-mission-humanitaire.jpg); /* source de l'image d'arrivée */
     } 

a.menu5{
float:left;
width: 129px;
height: 34px;
background-image: url(../images/volontaire-humanitaire.jpg);
margin: 0px;
}
a.menu5:hover { /* définition de la classe "menu1" de la balise <a> au survol */
     background-image: url(../images/ro-volontaire-humanitaire.jpg); /* source de l'image d'arrivée */
     } 

a.menu6{
float:left;
width: 84px;
height: 34px;
background-image: url(../images/contact-association.jpg);
margin: 0px;
}
a.menu6:hover { /* définition de la classe "menu1" de la balise <a> au survol */
     background-image: url(../images/ro-contact-association.jpg); /* source de l'image d'arrivée */
     } 
	 
.menu7{
float:left;
width: 136px;
height: 34px;
background-image: url(../images/makettev5_12.jpg);
margin: 0px;
}
	 
.spacer{
clear: left;
}

/**********************************************************************************************************************************/


p {margin: 0 0 10px 0;}
.Style1 {	color: #663300;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
}


et la decoupe de l'interface :
www.apis-togo.org/decoupage.jpg

merci d'avance!
joe

elsass frei Smiley biggol
Modifié par elsassfrei (18 Jul 2005 - 19:00)
Bonjour,

Je n'ai pas de réponse pour les décalages mais il ne faut pas agrandir trop les polices car il y a des débordements (menu en bas), et la couleur du texte par rapport au fond n'offre pas assez de contraste : c'est difficile à lire !

Une feuille de style alternative serait le minimum pour rendre ce texte lisible.