28220 sujets

CSS et mise en forme, CSS3

Imbrication de Div

Bonjour !

Alors d'habitude, je fais mon site en le calant dans une div centrée, dont les dimensions sont adaptées à un affichage 1024-768. Comme ça, je gère toutes les dimensions, et je m'en trouve fort aise.

Cette fois-ci, la hauteur du site est en fonction du contenu...

Donc j'ai un div général qui s'appelle "standard" dans lequel j'ai trois "bandeaux", un head, un footer, et le contenu à proprement parler. La largeur est fixe.
Evidemment, c'est le contenu qui pose problème, car sa hauteur est variable. Il contient un div imbriqué avec le texte de la page. Le texte est important, donc il déborde. Seulement, le "standard" ne s'aggrandit pas, et j'aurais souhaité que le conteneur s'aggrandisse en fonction du contenu... Et, cerise sur le gâteau, qu'il ait une hauteur minimum...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Titre/title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
	background-color: #CCCCCC;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-image: url(images/pixel_fond.gif);
}
-->
</style>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>

<body>

<div id="standard">

	<div id="header" style="position:absolute; left:0px; top:0px; width:755px; height:111px; z-index:1; background-color: #FF6600; layer-background-color: #FF6600; border: 1px none #000000;"></div>
	
	<div id="contenu" style="position:absolute; left:288px; top:190px; width:430px; visibility: visible; background-color: #CCCCCC; layer-background-color: #CCCCCC; border: 1px none #000000;">
	Beaucoup, beaucoup de texte pour faire déborder
	
		<div id="foot-standard" style="z-index:1;"></div>  

	  </div>
 </div>

</body>
</html>


Voilà, le contenu est câlé à un endroit précis. Le footer s'affiche juste après. Mais tout ça déborde du Div 'standard' qui ne s'aggrandit pas en conséquence.

Et le CSS :
div#standard{
	width: 755px;
	position: absolute;
	height: 100%;
	left: 50%;
	margin-left: -377px;
	top: 0px;
	background-color: #FFFFFF;
	visibility: visible;
}
div#foot-standard{
	position: relative;
	bottom: 0;
	left:-288px;
	width:755px;
	height:102px;
	background-color: #FF6600;
}


Je sais que je devrais mettre tout le CSS dans la feuille, mais pour l'instant, j'essaie de comprendre pourquoi ça ne fonctionne pas...

Merci pour votre coup de pouce !
Salut,
Je n'ai pas très bien compris ton problème mais je me suis aperçu que ta balise "title était mal fermé. Du coup, ca marche mieux sous IE ! Smiley cligne 
<title>Titre</title>
Modérateur
bonjour,
ta methode me parait complique,
j'use de celle ci:
d'abord le html, un conteneur global,avec une zone banniere,et une zone contenant , et une zone marge egale a la hauteur du pied de page, on referme le global et on met le pied.
<!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="fr" lang="fr">
<head>
  <title>100% de hauteur mini, pied de page toujours en bas et apres le contenu.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
  
  <style type="text/css">
@import url("style.css");
  </style>
</head>
<body >
<!-- conteneur principal, extensible repoussant le pied au bas de la page -->
<div id="conteneur">
<!-- ************************************************* section ***************************************************** -->
<!-- la banniere -->
<div id="ban"></div>

<!-- ************************************************* section ***************************************************** -->
<div id="contenant">
<!-- debut contenant -->
<!-- mettre ici le contenu de la page -->


<!-- fin du contenu textes et images de la page -->

<!-- ************************************************* section ***************************************************** -->
<!-- marge pour empecher le pied de remonter sur le contenu du bas de page si il y a -->
<div id="margepied"><!-- ne pas enlever cette marge et laisser en dernier  --></div>
<!-- ************************************************* section ***************************************************** -->
<!-- fin du contenant de la page -->
</div>
<!-- ************************************************* section ***************************************************** -->
<!-- fin du conteneur principal -->
</div>
<!-- ************************************************* section ***************************************************** -->
<div id="pied">- © 2005 2007 Pied de page ! </div>
</body>
</html>

et le css qui va avec:
* {margin:0;padding:0;}
html {height:100%;
}

body {
	height:100%;
	font-family: arial, 'lucida console', sans-serif;
}
#conteneur {
	min-height:100%;
	height:auto!important;
	height:100%;
/* par exemple pour une page centree avec un fond centre*/
	width:800px;
	margin:auto;
	background:url(images/fond.jpg) center center repeat-y ;
}
#ban {
	background:url(images/ban.jpg) center center ;
	height:150px;
}

#contenant {
	padding:0 30px;
}

#margepied {
	height:50px;/* hauteur du pied de page */
	clear:both;/* pour etirer le conteneur  si flottant */
	background:transparent;
}
#pied {
	width:800px;
	clear:both;/* facultatif */
	margin:auto;
	text-align:center;
	margin-top:-50px;
	height:50px;
}


En faisant ainsi, tu as donc une banniere un contenu etirable et un pied au plus haut au bas de l'ecran, sinon, sous le contenu.
J'espere que cela repond a ta question.

a plus
Merci !
Ça a l'air parfait, et beaucoup plus simple !
Je vais essayer d'adapter pour bien comprendre.

Merci encore !
Sujet clos
Aller à