28172 sujets

CSS et mise en forme, CSS3

Elément absolu positionné sur un élément absolu variable en hauteur

Bonjour,

Je monte une page simple avec 3 div :

1 div contenu
1 div header
1 div footer

Ces 3 div sont dans une div (main) qui englobe tout et que j'ai positionné en relatif.

J'ai positionné header et contenu en absolu (et placé ma div contenu avant le header pour donner un peu plus de place au contenu)

Mon problème : comment faire pour que mon footer puisse suivre les variations de taille de ma div contenu ?
J'avoue que je sèche sur ce truc qui m'a l'air ballot...
Merci pour vos idées
Bonjour,
J'ai peut-être pas très bien saisi ton problème, mais pourquoi veux-tu absolument "jouer" avec des positionnements en relatif et en absolu. Je ne crois pas cela nécessaire pour atteindre ton objectif.
Essaie un peu ceci pour voir si ce n'est pas ce que tu recherches :


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>DIVS</title>
<style type="text/css">
body {background:black}
#main{width:600px;margin:0px auto;background:orange;padding:15px}
#header{width:600px;background:navy}
#footer{width:600px;background:blue}
div{color:white;font:normal 14pt verdana,arial,helvetica;text-align:center;margin-top:10px;border:solid 1px white}
#contenu{width:580px;background:gray;text-align:left;padding:10px}
</style>
</head>
<body>
<div id="main">
	<div id="header">
		<p>
		HEADER
		</p>
	</div>
	
	<div id="contenu">
		CONTENU
		<p>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>
		Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br>
		Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br>
		Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
		</p>
	</div>
	
	<div id="footer">
		<p>
			FOOTER
		</p>
	</div>
</div>
</body></html>

A+
Merci pour ta réponse.

Positionner en absolu me permet de placer le "contenu" devant le "header".
De plus en plus de sites font ça ce qui donne plus de poids au contenu (le fait d'être mis en premier dans la page donne une prime incontestable au niveau du référencement).

L'ennui c'est que la div "contenu" ainsi retirée du flux me pose un problème pour positionner mon "footer" qui doit épouser cette div "contenu" qui est variable en hauteur si ce n'est mettre la div "footer" dans la div "contenu" et c'est pas le but
Je ne vois pas très bien comment réaliser cela avec des divs... et en html !

Si tu connais des sites qui font ça, jette un coup d'oeil sur la source Smiley cligne
Modifié par lddsoft (03 Mar 2011 - 15:52)
Sujet clos
Aller à