28173 sujets

CSS et mise en forme, CSS3

Ordre des float left/right

Re-bonjour,

J'aurais encore une question !

Ma div de contenu est divisée en 3 parties div : 1 float left, 1 float right, et une qui sera au milieu.
Donc dans mon code, ça donne :
<div id="left"></div>
<div id="right"></div>
<div id="middle"></div>

Alors voilà mon problème ! J'aimerais que mon div middle soit en premier dans le code source HTML. Seulement là, toutes mes float left/right sautent. Normal me direz-vous !

Avez-vous donc une méthode pour gérer cela ?

Merci !

Nicolas
BOnjour.

Elrohir a écrit :
Re-bonjour,

Alors voilà mon problème ! J'aimerais que mon div middle soit en premier dans le code source HTML.



En quoi cela pose problème que ta div middle soit définie après les 2 autres ?

Sinon, je vois pas de solutions si tu continues à utiliser des div en float.
Bonjour,

Tu peux faire flotter tes div gauche et droite et placer ton cadre central grâce à une position absolue. De cette manière, tu pourras placer ton div central où tu veux dans le code.

edit: après relecture, je me dis que je n'ai peut-être pas été très clair Smiley confused Petit exemple, donc, pour illustrer mon propos:

[#black][b]HTML[/b][/#]

<div id="conteneur">

<div id="centre"> ... </div>
<div id="gauche"> ... </div>
<div id="droite"> ... </div>
	
</div>


[#black][b]CSS[/b][/#]

#conteneur {position:relative; width:960px;}
		
#centre {position:absolute; width:560px; left:200px;}
		
#gauche,#droite {width:200px;}

#gauche {float:left;}

#droite {float:right;}

Modifié par Benjamin D.C. (28 Dec 2006 - 15:58)
Zeke a écrit :
BOnjour.



En quoi cela pose problème que ta div middle soit définie après les 2 autres ?

Sinon, je vois pas de solutions si tu continues à utiliser des div en float.

Salut Smiley cligne

J'ai vraiment besoin que le contenu 'center' soit en premier dans le code, dans un grand soucis de référencement. C'est aussi celui qui contient mon <h1>. Donc le faire passer après mes deux sidebar n'est pas judicieux.

<!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="en" lang="en">
<head>

<style type="text/css">

	body{
	font-size: 0.8em;
	margin: 0;
	padding: 0;
	}

	#conteneur{
		position: relative;
		width:900px;
		margin: 0 auto;
		border:1px solid red;
	}


	#centre{
	width:500px;
	background-color:blue;
	position:absolute;
	left:200px;
	}

	#gauche{
	width:200px;
	background-color:red;
	position:absolute;
	top:0px;
	}

	#droite{
	width:200px;
	background-color:green;
	position:absolute;
	top:0px;
	left:700px;
	}

</style>

</head>
<body>
<div id="conteneur">
	<div id="centre">centre<br />bla bla bla</div>
	<div id="gauche">gauche</div>
	<div id="droite">droite</div>
</div>
</body>
</html>


c'est a peu pret ca non ?

Joyeux Noel
Elrohir a écrit :
Re-bonjour,

J'aurais encore une question !

Ma div de contenu est divisée en 3 parties div : 1 float left, 1 float right, et une qui sera au milieu.
Donc dans mon code, ça donne :
<div id="left"></div>
<div id="right"></div>
<div id="middle"></div>

Alors voilà mon problème ! J'aimerais que mon div middle soit en premier dans le code source HTML. Seulement là, toutes mes float left/right sautent. Normal me direz-vous !

Avez-vous donc une méthode pour gérer cela ?

Merci !

Nicolas


Oui il y a ça chez Laurent Denis blog & blues

La technique y est présentée avec une maitrise renversante. Je vais essayer de retrouver le lien précis. De mémoire tout repose sur le fait qu'un même élément peut être en même temps en float et en position:relative;

<edit>
OOOoooooooooops excuse Igor Smiley cligne j'avais zappé ton message. C'est bien à cela que je me référais Smiley smile
</edit>
Modifié par clb56 (28 Dec 2006 - 16:30)
Viper82 a écrit :

<!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="en" lang="en">
<head>

<style type="text/css">

	body{
	font-size: 0.8em;
	margin: 0;
	padding: 0;
	}

	#conteneur{
		position: relative;
		width:900px;
		margin: 0 auto;
		border:1px solid red;
	}


	#centre{
	width:500px;
	background-color:blue;
	position:absolute;
	left:200px;
	}

	#gauche{
	width:200px;
	background-color:red;
	position:absolute;
	top:0px;
	}

	#droite{
	width:200px;
	background-color:green;
	position:absolute;
	top:0px;
	left:700px;
	}

</style>

</head>
<body>
<div id="conteneur">
	<div id="centre">centre<br />bla bla bla</div>
	<div id="gauche">gauche</div>
	<div id="droite">droite</div>
</div>
</body>
</html>


c'est a peu pret ca non ?
ça ressemble fort à ce que je propose un peu plus haut, en un peu plus "lourd"... Dès lors, pourquoi proposer cette solution? J'entends: qu'apporte-t-elle de plus que celle que je donne?
Sujet clos
Aller à