Positionnement, float

par **Sékiltoyai** » 11 sept. 2010, 15:50

Mais c'est ténorme !!!

Bah ça marche

http://misc.sekil.fr/dev/test_correct.html

Merci bien

Bon, je vais tout de même garder l'absolu (si je ne me trompe, on ne peut pas obtenir ce positionnement sans tout placer en absolu ? ), mais indéniablement je dormirai moins con ce soir.

Edit : Liens mis à jours

par **Invité** » 09 sept. 2010, 10:43

salut,

avec ce pti code,

<!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" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!-- -->
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>

<body>

<div id="main">

    <div id="floatleft">&nbsp;</div>
    
    <div id="central">&nbsp;</div>

    <br style="clear: both;" />

</div>

</body>
</html>

le css

Code : Tout sélectionner

#main {border: 1px solid #ccc;height: 400px;padding:10px}
#floatleft {float: left;width: 200px;background-color:  yellow;height:400px}
#central {height:400px;margin-left: 210px;background-color: #eee;}

en gros ton menu est flottant mais le div central est dans le flux normal de la page avec une marge superieur à la largeur de menu.
le div central occupe l'espace restant.

par **Sékiltoyai** » 08 sept. 2010, 12:10

Salut à tous,

J'ai vu de la lumière je suis entré.

(Qui a dit "oh non, pas lui" ?

)

Bon, je reviens pour poser une question aux experts du CSS.

J'ai toujours entendu dire que l'utilisation des float et div et comparses, c'était la vie. Je me suis dit, je suis pas plus con que les autres, j'ai pris ma b*** et mon couteau (vous avez vu, j'ai changé, en d'autres temps, je n'aurais pas censuré

), et je m'y suis mis. Le seul problème, c'est que ça fail sévèrement.

Bon, on a un div pour le header, un div pour le footer, un div central. Le div central contient un menu à gauche, à taille fixe, et une zone centrale au milieu, qui doit prendre toute la largeur restante. On peut voir un exemple en positionnement absolu : http://misc.sekil.fr/dev/test_abs.html
Ya vraiment pas plus propre que de l'absolu sur toute la page pour arriver à un résultat comparable ?

On peut considérer que j'ai trouvé la solution à mon problème, mais cela m'a fait lever des interrogations sur le fonctionnement du positionnement. J'avais commencé par un autre positionnement, basé sur des float : http://misc.sekil.fr/dev/test.html
Dans celui ci, je ne songeais pas à obtenir le premier résultat (qui exploite aussi bien la hauteur de l'écran que sa largeur). L'idée était d'utiliser la largeur totale de la page. Dans celui-ci, comment aurais-je pu demander à mon bloc central flotté à gauche (peint en jaune), et à l'image qui est à l'intérieur, de prendre toute la largeur restante de la page (toute la largeur qui n'est pas prise par le menu) ?

Les fichiers sont fournis ci-joint.

Merci.

Nota Bene : Pour lire l'image, optez pour un navigateur qui sait lire les svg (opera ou safari)

Style absolu :

Code : Tout sélectionner

div.header
{
	position:absolute;
	top:10px;
	left:10px;
	right:10px;
	height:50px;
	border:1px solid black;
	text-align:center;
}

div.header h2
{
	display:inline;
}

div.footer
{
	position:absolute;
	bottom:10px;
	left:10px;
	right:10px;
	height:50px;
	border:1px solid black;
}

div.content
{
	position:absolute;
	top:70px;
	bottom:70px;
	left:10px;
	right:10px;
	border:1px solid black;
}

div.menu
{
	position:absolute;
	top:10px;
	left:10px;
	width:100px;
	border:1px solid black;
}

div.main
{
	position:absolute;
	top:10px;
	bottom:10px;
	left:120px;
	right:10px;
	border:1px solid black;
}

div.periodblock
{
	position:absolute;
	top:10px;
	left:10px;
	right:10px;
	height:40px;
	border:1px solid black;
	text-align:center;
}

div.periodblock ul
{
	margin:10px;
	padding:0px;
}

div.periodblock ul li
{
	display:inline;
	margin:10px;
	padding:5px;
	border:1px solid black;
}

div.imgblock
{
	position:absolute;
	top:60px;
	bottom:60px;
	left:10px;
	right:10px;
	border:1px solid black;
	text-align:center;
}

div.offsetblock
{
	position:absolute;
	bottom:10px;
	left:10px;
	right:10px;
	height:40px;
	border:1px solid black;
}

img
{
	height:100%;
	border:1px solid black;
	display:inline;
}

Style floaté :

Code : Tout sélectionner

body
{
	width:100%;
	height:100%;
	margin:0px;
}

div.floatclear
{
	clear:both;
}



div.header
{
	margin:10px;
	padding:10px;
	height:50px;
	border:1px solid black;
	text-align:center;
}

div.header h2
{
	display:inline;
}

div.content
{
	margin:10px;
	padding:10px;
	border:1px solid black;
}

div.menu
{
	margin:10px;
	padding:10px;
	width:100px;
	border:1px solid black;
	float:left;
}

div.main
{
	margin:10px;
	padding:10px;
	border:1px solid black;
	background-color:yellow;
	float:left;
}

div.periodblock
{
	margin:10px;
	padding:10px;
	height:40px;
	border:1px solid black;
	background-color:white;
}

div.periodblock ul li
{
	display:inline;
}

div.imgblock
{
	margin:10px;
	padding:10px;
	border:1px solid black;
	background-color:white;
}

div.offsetblock
{
	margin:10px;
	padding:10px;
	height:40px;
	border:1px solid black;
	background-color:white;
}

img
{
	width:100%;
	border:1px solid black;
}

Code html :

<!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">
	
	<head>
		
		<title>RRD test graph</title>
		<link rel=stylesheet type="text/css" href="style.css" />
		
	</head
	
	<body>
		
		<div class="header">
			<h2>RRD test graph</h2>
		</div>
	
		<div class="content">
		
			<div class="menu">
				<ul>
					<li>Test</li>
					<li>  |-> Test</li>
				</ul>
			</div>
		
			<div class="main">
			
				<div class="periodblock">
					<ul>
						<li>Year</li>
						<li>Month</li>
						<li>Day</li>
					</ul>
				</div>
				
				<div class="imgblock">
					<img alt="RRD test graph" src="http://misc.sekil.fr/dev/test.svg" />
				</div>
				
				<div class="offsetblock">
				
				</div>
			</div>
			
			<div class="floatclear"></div>
		
		</div>
		
		<div class="footer">
		
		</div>
		
	</body>
	
</html>

Positionnement, float

Répondre

Étendre la vue Revue du sujet : Positionnement, float

Re: Positionnement, float

Re: Positionnement, float

Positionnement, float