28172 sujets

CSS et mise en forme, CSS3

Salut à tous,

Voila je suis en train de faire la mise en page d'un site, et j'ai un petit bug sous IE que je ne parviens pas à trouver ...

La "div" centre a des "marges" sous ie sans que je sache pourquoi ...

LA css :

body {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	margin: 0;
	padding: 0;
	background-image: url(visuels/back.png);
	background-repeat: repeat-x;
	background-color: #412d37;
}
p {
	text-align: justify;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 10px;
	margin-right: 10px;
	color: #555;
}
#header {
	height: 318px;
	background-image: url(visuels/header.jpg);
	background-repeat: no-repeat;
	background-position: 0px 22px;
}
#global {
	width:668px;
	margin:auto;
	background-image: url(visuels/global.png);
	background-repeat: repeat-y;
}
#centre {
	margin-left: 292px;
	margin-right: 5px;
	height: 242px;
	background-color: #dccdcd;
}
#gauche {
	float:left;
	height: 242px;
	width: 292px;
	background-image: url(visuels/menu.png);
	background-repeat: no-repeat;
	background-position: 90px 0px;
}
#droite {
	float:right;
	width: 5px;
	height: 242px;
	background-image: url(visuels/right.png);
}
#footer {
	clear:both;
	height: 29px;
	background-image: url(visuels/footer.png);
	background-repeat: no-repeat;
	background-position: 90px 0px;
}


Une idée ?

Merci d'avance !

Smiley biggrin
Modifié par yank (06 Mar 2008 - 01:42)
Bonsoir Yank,

Ceci devrait résoudre ton petit soucis :

#gauche {
background-image:url(menu.png);
background-position:90px 0px;
background-repeat:no-repeat;
float:left;
height:242px;
width:[#blue][b]292px;[/b][/#]
}

(margin-left de #centre fixée à 292px, donc logiquement...)

Voilà pour IE7...

Il faudra probablement faire des correctifs pour IE6...
Corriger sans doute le PHP dans le conteneur "evitement"...
Rendre dispo l'image "global.png" si elle sert à quelque chose Smiley cligne

Design un poil "étriqué" tout de même, non ? Quid du redimensionnement de la police (la hauteur de 242px du centre par exemple ne supporte pas le premier agrandissement sous Firefox et IE7...)
Il y a peut-être un autre moyen de cacher les liens d'évitement ?(visibility:hidden pouvant être interprêté par certains navigateurs texte... tu sembles aller à l'encontre de ce que tu souhaites obtenir Smiley cligne )
Plus d'explications sur ce point par Monsieur Denis himself

A plus pour la suite des hostilités Smiley lol

Cdt,
Sylvain