[Résolu] Espace anormal entre des div ( float ) - Forum Alsacréations : CSS et Standards Web

Auteur
OlivModeDev	# 09 May 2008 - 13:38:09
2 Posts	Bonjour à tous, J'essaye de faire un design en css. Mon gabarit est simple et est composé d'un header, d'un footer et d'une zone de contenu. J'essaye de faire des coins arrondis (avec des images ) à mon design et j'ai besoin d'avoir 3 éléments dans le header et le footer. Donc dans mon header on trouve ceci : <div id='header'> <div id='headerLeft'></div> <div id='headerRight'></div> <div id='headerCenter'></div> </div> #headerLeft { float: left; width: 28px; height: 191px; background: blue; } #headerRight { float: right; width: 28px; height: 191px; background: blue; } #headerCenter { background: red; height: 191px; } Le problème c'est que sous IE j'ai un espace entre mes divs que je n'ai pas sous firefox et je ne comprends pas pourquoi. Pour être plus clair voici le rendu sous firefox : Et la même chose sous IE : Ca doit pas être grand chose mais j'ai cherché et je ne trouve pas et je n'ai plus d'idée. Modifié par OlivModeDev (09 May 2008 - 15:05)
2 Posts
Florent V.	# 09 May 2008 - 13:49:17
On va manger des chips. Modérateur 11440 Posts	Bonjour, Je parierais sur: 1. Le HasLayout (cf. la FAQ) dû au height: 191px; de #headerCenter qui fait que ce bloc, au lieu de prendre tout la largeur de son conteneur (et donc de passer sous les flottants à gauche et à droite), est repoussé par les flottants. 2. Le vieux bug nommé le «Three Pixel Jog» (chaque flottant repousse ce bloc, qui a le layout, de 3px). Solution: ne pas conférer le layout au bloc central, ou bien ne pas faire d'intégration avec trois blocs de cette manière pour de la simple décoration. Avec un #header positionné en relatif et des images (ou blocs avec images de fond) positionnés en absolu dans les coins, ça marche très bien. Ou bien peut-être avec deux blocs imbriqués et deux images de fond pour dessiner le header. Ou autre solution... ça dépend du design et de ses contraintes. On peut éventuellement tenter d'adresser à IE6 uniquement (via un commentaire conditionnel) le correctif suivant pour #headerCenter: margin: 0 -3px. Ça pourrait marcher. Ressources en intégration web (HTML et CSS)
On va manger des chips. Modérateur 11440 Posts
OlivModeDev	# 09 May 2008 - 15:05:33
2 Posts	trop fort trop bien !! merci bcp ça a marché sauf que j'ai mis le margin dans les div des cotés en fait ça donne ça : #headerLeft { margin-right: -3px; } #headerRight { margin-left: -3px; } Merci Encore et surtout pour ta rapidité Modifié par OlivModeDev (09 May 2008 - 15:06)
2 Posts
Prévenir un modérateur

Les références web : openweb.eu.org - opquast.com - webmaster-hub.com - webrankinfo.com - salemioche.net - web-pour-tous.org - webonorme.org

Nos partenaires : Editions Eyrolles - Location vacances France - Location vacances Europe

Nikozen : Hébergement - Réalisation : Alsacreations.fr