5176 sujets

Le Bar du forum

Positionnement float vs absolute

Bonjour Smiley smile
En cette belle matinée ensoleillée, j'ai décidé d'apprendre quelque chose (si si, sans rire).

Suite à ce très long et fastidieux topic quelques interrogations se sont soulevées dans mon esprit tordu Smiley lol

Vu que je n'étais plus là et que vous avez posté pleins de messages sans moi ( Smiley eek ) et que le topic a été fermé ( Smiley rolleyes ) je n'ai pas pu posté mon avis / mes questions sur les solutions proposées.

Donc dans ma recherche maniaque de la meilleure façon de faire, je me permet de poster ici les élucubrations de mon cerveau fatigué et tordu.

Le but étant de trouver la meilleure technique pour un design header en haut, menu à gauche sur 100% de la hauteur, pied de page et contenu
(je vois venir les détracteurs sur l'utilité d'un tel design, etc... vous avez déjà posté à ce sujet sur le poste concerné et il n'est pas question de ça ici, c'est juste à titre éducatif)

Donc pour celà j'ai le code suivant :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
	<head>
		<title>test</title>
		<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
		<style type="text/css" media="screen">@import url(test.css);</style>
	</head>
	<body>
		<div id="header">
			<h1>Titre</h1>
		</div>
		<div id="menu">
			<ul>
				<li><a href="">lien 1</a></li>
				<li><a href="">lien 2</a></li>
				<li><a href="">lien 3</a></li>
				<li><a href="">lien 4</a></li>
				<li><a href="">lien 5</a></li>
			</ul>
		</div>
		<div id="contenu">
			<h2>blablabla</h2>
			<p>
			contenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenu
			contenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenu
			contenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenu
			contenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenu
			contenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenu
			contenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenu
			contenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenu
			contenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenu
			</p>
			<p>
			contenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenu
			contenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenu
			contenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenu
			contenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenu
			contenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenu
			contenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenu
			contenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenu
			contenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenu
			</p>
			<p>
			contenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenu
			contenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenu
			contenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenu
			contenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenu
			contenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenu
			contenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenu
			contenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenu
			contenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenu
			</p>
		</div>
		<div id="footer">
			pied de page
		</div>
	</body>
</html>


et la css suivante :


* {
	padding: 0;
	margin: 0;
}
html, body { 
   height: 100%; 
}
p {
	margin-top: 5px;
	margin-bottom: 5px;
}
#header {
	background-color: blue;
}
#menu {
	background-color: green;
	float: left;
	width: 150px;	
	height: 100%;
}
#contenu {
	background-color: white;
	height: auto !important; 
	height: 100%; 
	min-height: 100%;
}
#footer {
	background-color: red;
}


La question est : Est-ce que c'est mieux qu'un positionnement absolue du header/menu et pourquoi ?

Personnelement je n'aime pas cette méthode pour plusieures raisons :
- pour ça :
[code]
height: auto !important;
height: 100%;
min-height: 100%;
[code]
- ça fait des trucs bizarre quand on redimensionne
- le menu déborde en hauteur (on peut surement le corrigé... avec des margins j'imagine...)

Voilà, tous vos commentaires constructifs sont les bienvenus Smiley smile


PS : en ce qui concerne la fin du topic cité, je dois dire que l'ambiance m'a chagriné et je suis assez étonné de la fermeture du topic et de sa justification Smiley eek
a écrit :
PS : en ce qui concerne la fin du topic cité, je dois dire que l'ambiance m'a chagriné et je suis assez étonné de la fermeture du topic et de sa justification


+1
bon beh je n'aurais pas appris grand chose aujourd'hui Smiley bawling
mais qui sait... peut-être demain Smiley lol
Mon choix : les floats car c'est beaucoup plus simple de modifier le design (largeur de la colonne, la mettre à droite au lieu de gauche etc). La css est plus petite et plus lisible.

De toute façon pour avoir une hauteur de 100% il faut un hack dans les deux cas alors... c'est kif-kif. Mais je préfère la syntaxe :


#truc {
 height: 100%;
}
html>body #truc {
 height: auto;
 min-height: 100%;
}
Comment dis tu hauteur de 100% sans avoir un pb de non étirement sous mozilla ? Il faut bien lui spécifier qu'il doit s'étirer par une instruction qu'il comprends et que ie n'interprette pas.

C'est peut-être pas le bon terme de dire hack par contre.
littlesam a écrit :
Comment dis tu hauteur de 100% sans avoir un pb de non étirement sous mozilla ? Il faut bien lui spécifier qu'il doit s'étirer par une instruction qu'il comprends et que ie n'interprette pas.

C'est peut-être pas le bon terme de dire hack par contre.

en position absolue il y a aucun pb...
Bon je vois que je n'ai toujours rien compris au positionnement en absolu.

Et le menu qui déborde en hauteur c'est parqu'il manque un clear: both ; dans ton footer.
Modifié le 31 Dec 2004 - 10:20
Sujet clos
Aller à