Forum d'entraide PHPFrance

Bonjour,

Je pense que le sujet est assez explicite mais rien ne vaut un petit peu de code pour savoir où j'ai fauté

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
div#h {
	margin:0px;
	padding:0px;
	background:purple;
	width:100%;
}
div#g {
	margin:0px;
	padding:0px;
	float:left;
	background:blue;
	width:150px;
}
div#d {
	margin:0px;
	padding:0px;
	float:right;
	background:red;
	width:300px;
}
div#c {
	margin:0px;
	padding:0px;
	overflow:hidden;
	background:green;
}
div#f {
	padding:0px;
	background:brown;
	width:100%;
	clear:both;
}
</style>	
</head>

<body>
<div id="h">Quoddam forte quidem ad ratio nobis fuimus in se artes Etenim quadam 
  quod ingeni ne.</div>
<div id="g">Pittacas e manus agitari si non novas si spiritum aliquotiens hi hi 
  industria novas hi si et inter </div>
<div id="d">Ab incunabulis virum transcendit omni post et aliquotiens in pueritiae 
  discessit vergens ex trecentis solo nomine circumcluditur annis iuvenem ingressus 
  annis ad erectus solo et discessit vitae iamque usque bella.</div>
<div id="c">Effusos opinantibus latebrosis ut suspensis perpetrata nullis adsistebant 
  sensim per repentes petivere sunt sentirent splendore degressi sunt eum repugnantibus 
  iniectantes nondum adsistebant repugnantibus degressi seseque parcendo non diu 
  velut et sunt splendore avertebant confinia solido viles ut parcendo noctes 
  saevitiam saevitiam montibus impeditis impeditis quos petivere haecque obtruncatis 
  haecque sese perpetrata nihil et mari sese cornuta sunt cornuta splendore locum 
  velut seseque occultantes per ita et solido pastae degressi plerumque incendente 
  turbinis opinantibus nauticos sensim effusos diu convallibusque petivere omnibus 
  quadrupedo sunt avertebant revertuntur viles degressi suspensis ferae in luna 
  viles seseque incendente luna suspensis nauticos petivere somnum convallibusque 
  incendente.</div>
<div id="f">footer</div>
</body>
</html>

Je suis disposée à entendre toutes vos critiques, d'ailleurs critiquez-moi lol

Angeline

tu peux rajouter un float left sur ton div c :
comme tu sors deux bloc du flux normal, ton div c occupera l espace restant.

mais tu auras surement d autres problemes apres ( marges entre les blocs, background )

tu peux allez voir sur alsacreation section faq : quelques renseignements utiles sur les flottants et les templates
http://forum.alsacreations.com/faq/

Merci pour le tuyau mais entre temps sur un autre exemple j'ai trouvé ceci :

Code : Tout sélectionner

<!--[if lte IE 6]>
<STYLE type=text/css>
div#g {
	margin-right: 1px
}
div#d {
	margin-left: 1px
}
div#c {
	overflow: visible; 
	height: 1%
}
</STYLE>
<![endif]-->

Ca semble marcher...C'est valable ? Tout de même correct ? Ca s'apparente un peu à de la bidouille, non ? En plus je comprends pas trop pourquoi du coup ca marche...si une âme charitable voulait bien m'expliquer je lui en serai reconnaissante

A.

Personne ne peut répondre à ma petite question et me fournir l'explication ou au moins un début

A.

Salut

.

Si c'est demandé si gentiment, je veux bien m'y coller

.
Tu as à faire à un commentaire conditionnel. Je te conseille de lire un article qui va t'éclairer à coup sûr sur le blog de Laurent Denis : Les syntaxes de commentaires conditionnels pour IE Windows.

Maintenant (après lecture), tu devrais avoir compris qu'elle est cette forme étrange de commentaire. Elle permet de ne spécifier que des règles pour IE (selon différentes version). Et là, on utilise un hack pour IE (parce qu'il ne comprend rien et qu'il est trop bête pour comprendre de toute façon

). Je te conseille de lire Qu'est-ce que le HasLayout et comment l'utiliser sur Alsacréations, tu trouveras des liens très intéressants (toujours sur le site de Laurent Denis entre autre).

Bonne lecture

.

Intéressant je me coucherai moins bête ce soir (merci pour les liens

), mais pour en revenir à mon post...

Est-ce que cet syntaxe est valable et pas un peu tirer par les cheveux ?

Que se passe t-il concrètement avec le fait d'ajouter ce bout de code j'ai du mal à voir...
1% de hauteur, 1px dans les marges ca n'a pas de sens enfin pour moi je vois pas, peux-tu m'expliquer stp

Est-ce le seul moyen de gérer le comportement d'un DIV central ?

Merci de ta disponibilité !

A.

En fait c'est parfaitement correct et c'est une des meilleurs solutions pour ne pas polluer nos feuilles de styles CSS avec des bidouilles pour IE (qui interviennent sans cesse).

Toutes tes questions peuvent trouver réponses dans les liens que j'ai filé en fait

. Pour t'expliquer rapidement, IE a deux modes de rendus pour son moteur de rendu (Trident). On rencontre un problème (le HasLayout) avec un des modes. Mais les liens expliquent ça beaucoup mieux que moi (j'ai jamais été doué pour ce genre d'explication et j'ai peu de temps là).
Le fait d'utiliser un overflow et une hauteur de 1% permet de faire rentrer les boîtes flottantes dans un flux que IE peut comprendre. Est-ce que tu connais ces notions de flux ? Je te conseille de lire l'article de Laurent Denis (décidément, il est partout celui là) sur Float et hasLayout (3), tu vas comprendre le pourquoi du comment

(l'article est très court).

Pour te répondre rapidement, c'est correct et c'est rarement possible de faire quelque chose de propre sur IE.

Est-ce le seul moyen de gérer le comportement d'un DIV central ? Tout dépend de comment tu as construit ta page. Pour ne rien te cacher je n'ai pas regardé le code que tu as écris (car je suis à la fac), mais les cas typiques de problème de float avec IE se résolvent de cette façon. Va naviguer un peu sur Alsacréations, il y a vraiment beaucoup de choses intéressantes

. Également sur OpenWeb.eu.org

.

Forum d'entraide PHPFrance

contenu de mon div central se répand sous les float (sur IE seulement ok FF)

contenu de mon div central se répand sous les float (sur IE