28172 sujets

CSS et mise en forme, CSS3

Bug 3 colonnes

Bonjour,

J'ai un design en 3 colonnes.
Je ne veux pas modifier mon code XHTML et cherche donc à obtenir le resultat avec du CSS uniquement.

Tout fonctionne parfaitement sauf sous IE 5 qui me place la colonne de droite à droite mais sous les autres colonnes. Impossible de comprendre pourquoi.

Si vous avez une idée, elle est la bienvenue Smiley smile

CSS : 

<style>
body{text-align:center;}
#conteneur-millieu {overflow:auto; margin:0 auto; width:766px; background-color:red;}
#gauche,#droite {width:144px;}
#gauche,#centre {float:left;}
#gauche {margin-left:-618px; background-color:green;}
#droite {margin-left:622px; background-color:blue;}
#centre {width:470px; margin-left:148px; background-color:pink;}
#tete {margin:0 auto; width:766px; position:relative; height:50px; background-color:yellow;}
#pied {margin:0 auto; width:766px; height:50px; background-color:yellow;}
</style>
<!--[if lte IE 6]>
<style>
	#centre {margin-left:74px;}
	#droite {margin-left:619px;}
</style>
<![endif]-->


XHTML :

<div id="tete">
	Mon entete
</div>

<div id="conteneur-millieu">
	
	<div id="centre">
		Contenu de la colonne du centre
	</div>

	<div id="gauche">
		Contenu de la colonne du gauche qui est long et ne doit pas déborder.
	</div>

	<div id="droite">
		Contenu de la colonne de droite
	</div>
	
</div>

<div id="pied">
	Mon pied
</div>


Merci d'avance
neutronweb a écrit :
Tout fonctionne parfaitement sauf sous IE 5 qui me place la colonne de droite à droite mais sous les autres colonnes. Impossible de comprendre pourquoi.

IE 5.0 ou IE 5.5, ou les deux?

D'aucuns préconisent de filtrer IE 5.0 pour lui adresser les pages sans styles CSS.
bonjour
je te propose une organisation légèrement différente : 

<div id="tete">
	Mon entete
</div>

<div id="conteneur-millieu">
	
	<div id="gauche">
		Contenu de la colonne du gauche qui est long et ne doit pas déborder.
	</div>

	<div id="droite">
		Contenu de la colonne de droite
	</div>

            <div id="centre">
		Contenu de la colonne du centre
	</div>
	<div style="clear:both"></div>
</div>

<div id="pied">
	Mon pied
</div>


CSS

body{text-align:center;}
#tete {margin:0 auto; width:766px;height:50px; background-color:yellow;}
#conteneur-millieu {overflow:auto; margin:0 auto; width:766px; background-color:red;}
#gauche,#droite {width:144px;}
#gauche{float:left;background-color:green;}
#droite {float:right; background-color:blue;}
#centre {margin-left:148px; margin-right:148px;background-color:pink;}
#pied {margin:0 auto; width:766px; height:50px; background-color:yellow;}
J'ai uniquement pu voir avec IE 5.0


Merci verdan mais avec cette disposition je n'ai aucun probleme mais comme indiqué je ne peux pas modifier le HTML Smiley decu
neutronweb a écrit :
J'ai oublié de préciser que j'ai egalement besoin que le CSs fonctionne sous IE 5, je ne peux pas le filtrer.

Par curiosité, qu'est-ce qui motive ce "besoin"? Smiley sweatdrop
Il y a encore 0.5% d'utilisateur sous IE5.x
Sur un site commercial c'est perdre 0.5% de CA et il faudrait donc manquer totalement de sérieux pour négliger IE5 à mon sens.
Un point rapide sur les parts de marché:

Netapplications.com annonce (chiffres trafic mondial):
- 0,11% pour IE 5.5;
- 0,11% pour IE 5.0.
Source: http://marketshare.hitslink.com/report.aspx?qprid=2

Si le client a imposé la «compatibilité parfaite» IE 5 et/ou Netscape 6, cela devra guider les choix techniques. Des méthodes un peu «avancées» de positionnement (colonnes flottants interverties visuellement via des marges négatives) ne seront peut-être pas compatibles avec ces anciennes versions, et devront être abandonnées. On devra peut-être utiliser des tableaux de mise en page de manière ponctuelle afin d'être compatible avec ces versions.
Et tant pis pour l'astuce de référencement.

Si le chef de projet veut absolument que ces deux critères (compatibilité IE 5.0 et contenu placé avant le menu dans le code HTML malgré l'ordre d'affichage visuel et l'impossibilité d'utiliser le positionnement absolu), on pourra lui dire ok, mais:
1) il faut que je passe N heures à bosser des solutions CSS tarabiscotées telles que le One True Layout;
2) il se peut que ça s'avère impossible au final.

Voili voilou.
Je jetterai tout de même un oeil à ton code si je trouve un peu de temps, au cas où. Smiley cligne
neutronweb a écrit :
Sur un site commercial c'est perdre 0.5% de CA et il faudrait donc manquer totalement de sérieux pour négliger IE5 à mon sens.

Si le support d'IE5 supprime des options techniques importantes ou entraine un surcout important des couts de production, cela peut tout à fait se justifier.

Si tu codes la nouvelle version de Fnac.com, il y aura sans doute le budget pour passer plus de temps sur ces questions de compatibilité. Si c'est ma-petite-entreprise.com, c'est moins sûr. Smiley cligne

Sans parler du fait que certaines concessions de design (au sens large) qu'il faudra faire peuvent diminuer l'ergonomie attendue et faire baisser sensiblement le retour sur investissement... au delà de 0,5 ou 0,22%.

PS: on aura compris que je me fais l'avocat du diable, hein. Smiley smile
Modifié par Florent V. (11 Feb 2008 - 16:47)
Ai répondu rapidement en MP.

Pour revenir à la technique:

1. Je doute que la solution avec les marges négatives puisse être compatible IE 5.0. J'ai testé quelques modifications et adaptations, qui n'ont rien donné.

2. Par contre, le positionnement relatif a l'air mieux supporté que les marges négatives (surtout lorsqu'il s'agit d'interagir avec des flottants!). J'ai donc fait un test avec trois blocs flottants (étrangement, il faut faire flotter div#droite à droite pour que ça passe dans IE 5.0...), et interverti les deux premiers via le positionnement relatif. Ce qui donne:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Test</title>
	<style type="text/css" media="screen">
	body {
		text-align: center;
	}
	#conteneur-milieu {
		overflow: hidden;
		width: 766px;
		margin: 0 auto;
		background-color: red;
	}
	#centre {
		position: relative;
		left: 148px;
		float: left;
		width: 470px;
		background-color: pink;
	}
	#gauche {
		position: relative;
		left: -470px;
		float: left;
		width: 144px;
		background-color: green;
	}
	#droite {
		float: right;
		width: 144px;
		background-color: blue;
	}
	#tete {margin:0 auto; width:766px; height:50px; background-color:yellow;}
	#pied {margin:0 auto; width:766px; height:50px; background-color:yellow;}
	a:hover {color: red;}
	</style>
</head>
<body>
<div id="tete">
	Mon entete
</div>
<div id="conteneur-milieu">
	<div id="centre">
		Contenu de la <a href="http://www.example.org">colonne</a> du centre
	</div>
	<div id="gauche">
		<a href="http://www.example.org">Contenu</a> de la colonne du gauche qui est long et ne doit pas déborder.
	</div>
	<div id="droite">
		Contenu de la colonne de <a href="http://www.example.org">droite</a>
	</div>
</div><!-- #conteneur-milieu -->
<div id="pied">
	Mon pied
</div>
</body>
</html>
(Les liens servent à tester la réactivité au clic... à priori ça marche sans problème.)

Pas sûr que ça soit une solution fiable. Je ne l'ai jamais testée en détail, avec des contenus réels, etc.

En passant, je n'ai pas eu besoin de correctif particulier pour IE.
Modifié par Florent V. (11 Feb 2008 - 17:20)
Excelent sa fonctionne bien
J'ai du adapter un peu avec mes autres elements mais tout est ok

Un grand merci meme si j'aurais du y penser moi meme vu que la solution n'etait pas très loin !
Sujet clos
Aller à