28172 sujets

CSS et mise en forme, CSS3

Positionner une Div FOOTER sous une Div à hauteur variable

Bonjour

Excusez-moi si mon problème vous semble rebattu mais malgré mes recherches et essais, je ne trouve pas la solution simple que j'aimerais trouver.
Je réalise la refonte d'un site comptant des milliers de pages au contenu variable.
J'ai donc prévu une DIV dans laquelle nous réinjecterons les contenus existants. Cette DIV est à hauteur variable. Il y a en dessous une DIV "footer" (à deux étages, mais ça n'a pas d'importance en soi) qui contient des éléments avec des dimensions précises et un positionnement précis.

Au départ, j'ai construit une page avec une DIV en position relative à chaque niveau (de haut en bas), cette DIV contenant d'autres DIV en position absolue. Tout était bien calé, mais dès que j'ai voulu donner une hauteur variable à "l'étage au-dessus du footer" (100 %, ou pas de hauteur précisée, le résultat est le même), la DIV "footer" est sortie du flux et elle vient se positionner en plein milieu du contenu variable.

Comme mon client souhaite pouvoir changer facilement le contenu de certaines DIV, j'ai rebâti la page comme ceci (voir code plus bas). Cette fois, chaque DIV est en position absolue. Le problème demeure à l'identique : le footer ne veut pas se caler sous la DIV à hauteur variable (malgré un positionnement absolu avec emplacement bas à 0).
J'ai été longue pour être aussi précise que possible Smiley confused
Si quelqu'un a la solution, mille mercis d'avance !
Car pour l'instant, nous ne voyons qu'une solution : insérer le contenu à hauteur variable et le footer dans un TABLEAU...

Code de la page essai :

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ABCDE</title>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url(images/fond2.jpg);
}
img {
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}
-->
</style>
<link href="essai13mars.css" rel="stylesheet" type="text/css" />
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<style type="text/css">
<!--
a:link {
text-decoration: none;
color: #339900;
}
a:visited {
text-decoration: none;
color: #339900;
}
a:hover {
text-decoration: none;
color: #99CC00;
}
a:active {
text-decoration: none;
color: #99CC00;
}
.Style1 {font-size: 11px}
-->
</style></head>

<body>

<div id="conteneur">

<div id="contenu">

<div id="fuz_top">
<?php
include("top1.html");
?>
</div>

<div id="fuz_mid">
<?php
include("mid1.html");
?>
</div>

<div id="fuz_contenu">

<div id="col1">Placez ici le contenu de id "col1"</div>

Ici (COL1) sera appelée (php include) une page html avec une bannière pub.
COL1 devra coller à la hauteur de COL2 (fond d'une autre couleur)

<div id="col2">Placez ici le contenu de id "col2"</div>

Ici (COL2) sera inséré le contenu principal de la page.
Ce contenu sera de hauteur variable.
Au minimum 600 px (hauteur de la bannière pub. dans COL1)


<div id="footer">

<div id="foot1">Placez ici le contenu de id "foot1"</div>

Ici (FOOT1) sera appelée (php include) une page html contenant
plusieurs DIV contenant divers boutons, décos, etc.

<div id="foot2">Placez ici le contenu de id "foot2"</div>

Ici (FOOT2) sera appelée (php include) une page html contenant
une ligne de menu de bas de page, et le copyright.

</div>
</div>


</div>
</div>

</body>
</html>

MERCI POUR L'AIDE ! Smiley biggrin
Modérateur
Bonjour,

je pense qu'il va falloir revoir les bases notamment au niveau du positionnement css.

http://www.alsacreations.com/article/lire/533-initiation-au-positionnement-en-css.html

Le problème que tu décris se résoud avec une position: static sur tes divs, donc le positionnement par défaut Smiley rolleyes .

a écrit :
Tout était bien calé, mais dès que j'ai voulu donner une hauteur variable à "l'étage au-dessus du footer" (100 %, ou pas de hauteur précisée, le résultat est le même)

100% se réfère au premier élément parent qui possède une hauteur. Ce n'est pas variable dans le sens ou tu l'entends.

a écrit :
le footer ne veut pas se caler sous la DIV à hauteur variable (malgré un positionnement absolu avec emplacement bas à 0)

Fatalement, en absolu il sera juste en bas du premier élément parent positionné ou de la page...

Je suppose que les déclarations css en questions sont dans essai13mars.css que tu as omis, de citer, au passage mets ton code dans une balise code sur le forum, et dans le meilleur des cas, donnes un lien, ça facilitera l'aide.
Merci beaucoup, Kustolovic, pour ces conseils (je ne pourrai les suivre que ce soir...)
J'avoue n'avoir jamais utilisé de positionnement statique, je me suis replongée dans mes bouquins sur le sujet, mais suis passée à côté de cette possibilité... Smiley confused

Voici le contenu de la feuille de style :

#conteneur {
width: 1068px;
text-align: left;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
position: relative;
height: 1400px;
}

#contenu {
width: 1068px;
position: relative;
background-color: #99CC00;
}

#fuz_top {
height: 320px;
width: 1068px;
position: absolute;
}

#fuz_mid {
height: 170px;
width: 1068px;
position: absolute;
top: 320px;
}
#fuz_contenu {
width: 1068px;
position: absolute;
top: 490px;
}
#col1 {
width: 120px;
position: absolute;
background-color: #99CC00;
}
#col2 {
width: 948px;
position: absolute;
left: 120px;
background-color: #fefdf0;
}
#footer {
height: 350px;
width: 1068px;
position: absolute;
bottom: 0px;
}
#foot1 {
height: 300px;
width: 1068px;
position: absolute;
background-color: #FFFFCC;
}
#foot2 {
height: 50px;
width: 1068px;
position: absolute;
top: 300px;
background-color: #FFCC99;
bottom: 0px;
}
Bonjour

Mes essais ne fonctionnent pas encore tout à fait, mais je suis sur la piste et tout est quasiment en place. Smiley sweatdrop
Je reviendrai soit pour vous donner le bon code, soit (plus probablement) pour demander de l'aide sur ce qui cloche encore... Smiley confus

Le topo ALSACREATIONS sur le positionnement est une mine d'or (et de clarté), merci ! C'est dedans que j'ai trouvé ce que je cherchais et qui complète ton conseil, Kustolovic, sur le choix du "static".

Je recopie ici le passage "clé" pour éviter à ceux que le sujet intéresse de le chercher :

(quote)
Malheureusement, si nous nous trouvons dans le second cas évoqué (hauteurs imprévisibles), la propriété position ne pourra plus être employée sous peine de voir notre pied de page se placer juste en-dessous du header. En effet, nous n'avons sorti du flux dans l'exemple précédent que la colonne la moins haute, ce qui a pour effet de laisser le pied de page se placer naturellement sous le dernier contenu du flux rencontré: notre contenu principal. Si l'on ne peut prédire quelle sera la colonne la plus haute, il nous est forcément impossible de garder avec certitude la bonne colonne dans le flux. Dans ce cas, et uniquement dans ce cas, nous allons recourir aux flottants avec parcimonie et être contraints de rajouter une division dans notre code HTML afin d'englober l'enfant flottant. Le code HTML se présente dès lors comme ceci:
<div id="conteneur">
<div id="header">
<!-- Ceci est mon haut de page -->
</div>
<div id="wrap">

<div id="sidebar">
<!-- Ceci est ma colonne latérale -->
</div>
<div id="contenu">
<!-- Ceci est mon contenu principal -->
</div>
</div>
<div id="footer">
<!-- Ceci est mon pied de page -->
</div>
</div>
La mise en forme CSS ne se contentera de sortir du flux que l'élément qui le demande obligatoirement:
#conteneur {width:760px; margin:0 auto;}
#wrap {overflow:hidden;}
#sidebar {float:left; width:170px;}
#contenu {margin-left:170px;}

(unquote)
Bonjour

Je suis déjà de retour... Les "include php" fonctionnent. Les div FUZ_TOP, FUZ_MID, COL1 sont bien en place, mais voici les problèmes qui subsistent :

- dans ma div COL2 contenant le texte à hauteur variable, les deux premières lignes du texte sont cachées par une bande verte (couleur fond div "contenu") d'une hauteur de 30 à 40 px, bande que l'on retrouve en bas de la div "fuz_wrap" qui enveloppe les div COL1 et COL2,

- du fait de cette bande en bas ? la div FOOTER (bien calée par ailleurs, ne chevauchant pas le contenu à hauteur variable - le grand point du sujet - victoire ! merci !), est décalée vers la droite de 120 px (largeur de la COL1), comme si ce "footer" se positionnait exactement sous la COL2. Pensant que c'était après tout normal, je l'ai décalée de -120 px (left) mais ça ne change rien. Peut-être parce que la div est "static" ?

Si quelqu'un comprend... Merci d'avance !


CODE DE LA PAGE 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ABCDE</title>
<style type="text/css">
<!--
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-image: url(images/fond2.jpg);
}
img {
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
}
-->
</style>
<link href="model_forum.css" rel="stylesheet" type="text/css" />
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'fr'}
</script>
<style type="text/css">
<!--
a:link {
	text-decoration: none;
	color: #339900;
}
a:visited {
	text-decoration: none;
	color: #339900;
}
a:hover {
	text-decoration: none;
	color: #99CC00;
}
a:active {
	text-decoration: none;
	color: #99CC00;
}
.Style1 {font-size: 11px}
-->
</style></head>

<body>

<div id="conteneur">

<div id="contenu">

<div id="fuz_top">
	[code=php]<?php
    include("top1.html");
	?>

</div>

<div id="fuz_mid">
<?php
    include("mid1.html");
	?>

</div>

<div id="fuz_wrap">

<div id="col1">
<div id="col1_ban">
<?php
    include("banleft.html");
	?>

</div>
</div>

<div id="col2">

ICI, CONTENU A HAUTEUR VARIABLE

</div>
</div>


<div id="footer">

<div id="foot1">
<?php
    include("footer1.html");
	?>

</div>

<div id="foot2">
<?php
    include("footer2.html");
	?>

</div>

</div>


</div>
</div>

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-411714-1");
pageTracker._initData();
pageTracker._trackPageview();
</script>

</body>
</html>[/code]


CODE .CSS


#conteneur {
	width: 1068px;
	text-align: left;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	position: relative;
}

#contenu {
	width: 1068px;
	position: static;
	background-color: #99CC00;
}

#fuz_top {
	height: 320px;
	width: 1068px;
	position: static;
}

#fuz_mid {
	height: 170px;
	width: 1068px;
	position: static;
	top: 320px;
}
#fuz_wrap {
	width: 1068px;
	overflow:hidden;
	top: 490px;
	position: static;
}
#col1 {
	width: 120px;
	background-color: #99CC00;
	float: left;
	height: 600px;
}
#col1_ban {
	height: 600px;
	width: 120px;
	position: static;
}

#col2 {
	width: 868px;
	left: 120px;
	background-color: #fefdf0;
	padding-top: 30px;
	padding-right: 40px;
	padding-bottom: 50px;
	padding-left: 40px;
	float: right;
}
#footer {
	height: 350px;
	width: 1068px;
	position: static;
	background-color: #99CC00;
	left: -120px;

}
#foot1 {
	height: 300px;
	width: 1068px;
	position: static;
}
#foot2 {
	height: 50px;
	width: 1068px;
	position: static;
	top: 300px;
}
Bonjour

Pour ceux qui rencontreraient le même problème (il y a la solution à la fin) mais aussi pour les plus calés, car j’ai encore un petit mystère à résoudre… Smiley rolleyes

Le problème de départ :
- Une DIV 3 (appelons-la ainsi) à contenu de hauteur variable
- Un FOOTER contenant des éléments en positionnement absolu
- Je n’arrivais pas à positionner ce FOOTER sous la DIV 3
-
Grâce au conseil de Kustolovic, j’ai donné un positionnement STATIC à toutes les DIV successives de la page (ces div successives, empilées disons, contenant chacune des éléments en positionnement absolu). C’était un premier pas important. J’ai pu faire le deuxième grâce au tuto du site sur le positionnement en .css (voir post du 15 mars) :

- La DIV 3 est placée à droite d’une DIV BAN (contenant une bannière pub de 120 x 600 px)
- J’ai englobé ces 2 div dans une DIV « WRAP »
- Code :
#wrap {overflow:hidden;}
#ban {float:left; width:120px;}
#div3 {margin-left:120px;}

C’était… presque parfait : le FOOTER acceptait enfin de se placer en dessous mais… il était décalé de 120 px sur la droite, comme s’il se calait sous la seule DIV 3. De plus, un bandeau de couleur (fond du FOOTER a priori) masquait les premières lignes du texte dans la DIV 3.

Mon message sur le sujet n’ayant reçu aucune réponse, j’ai multiplié les essais.
Voici le premier résultat « brut » :
http://www.minisite78.fr/Test20marsHaFi1.html (Hauteur Fixe) – tout OK, normal

Idem, mais avec une bonne épaisseur de faux-texte dans la partie contenu centrale :
http://www.minisite78.fr/Test20marsHaVa1.html (Hauteur Variable)

Victoire, ça marchait ! Smiley biggrin
A partir de là, j’ai injecté dans les différents modules le contenu du site en refonte (je n’envoie pas les pages par correction vis-à-vis de mon client – tant que ce n’est pas en ligne…).
Contrairement aux premiers essais relatés plus haut, le FOOTER était parfaitement en place, victoire ! Néanmoins, là est le mystère (de taille) : un « cache » de même hauteur que le footer (et de même couleur que son fond) se place sur le haut de la div 3, le masquant…

Voici le code CSS de cette page avec cache mystère – la div3 est « col2 », celle adjacente est « col1 » avec « col1_ban » pour la bannière pub. "fuz-wrap" les englobe. Les 2 "header", le "footer" et la "col1_ban" contiennent des éléments "appelés" (php include).

GRAND MERCI à qui m’aidera à SUPPRIMER ce cache mystère… Smiley sweatdrop 

#conteneur {
	width: 1068px;
	text-align: left;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	position: relative;
}

#contenu {
	width: 1068px;
	position: static;
	background-color: #99CC00;
}

#header1 {
	height: 320px;
	width: 1068px;
	position: static;
}

#header2 {
	height: 170px;
	width: 1068px;
	position: static;
	top: 300px;
}

#fuz_wrap {
	width: 1068px;
	overflow:hidden;
	top: 490px;
	position: static;
}

#col1 {
	width: 120px;
	float: left;
	height: 600px;
	background-color: #FF9900;
}
#col1_ban {
	height: 600px;
	width: 120px;
	position: static;
	background-color: #996600;
}

#col2 {
	width: 868px;
	left: 120px;
	padding-top: 30px;
	padding-right: 40px;
	padding-bottom: 50px;
	padding-left: 40px;
	float: right;
}

#footer {
	height: 350px;
	width: 1068px;
	[overflow:hidden;] j’ai essayé de rajouter cela, avec ou sans, c’est pareil
	position: static;
	background-color: #99CC00;
}
Sujet clos
Aller à