28173 sujets

CSS et mise en forme, CSS3

[résolu]Corps de page pas assez grand

Bonjour à tous,
Pour un prochain site, j'ai besoin de faire des bords qui s'adaptent en fonction de la hauteur du contenu.
Mon seul problême, c'est que si le contenu ne remplit pas toute la hauteur de la page, les bords s'arrêtent avant.
Voici mon code HTML:
<div id="bord-gauche">
<div id="bord-droit">
  <div id="corps">
   <div id="header"></div>
  
   <div id="corps-content">
     <p>les textes, titres & co.</p>
   </div>
  
  </div>
</div>
</div>


Et le CSS:

body, html{
   width: 100%;
   margin: auto;
}

/* Blocs formateurs de la page (de haut en bas) */
#bord-gauche{
   position: relative;
   background: url(bord.png) repeat-y left;
}

#bord-droit{
   height: 100%;
   background: url(bord.png) repeat-y right;
}

#corps{
   width: auto;
   height: auto;
   margin: 0 98px 0 98px;
}


Un petit lien qui illustre tout ca.
Donc voilà, si quelqu'un a une solution à me proposer, n'hésitez pas. Smiley cligne
Merci d'avance.
Modifié par Kels (11 Mar 2006 - 10:36)
En estimant que les images pour les bordures font 100px de large.

<body>
	<div id="cadre">
	... toute ma page web ...
	</div><!-- fin de div#cadre -->
</body>


html, body {margin: 0; padding: 0; height: 100%;}
body {background: url(gauche.png) repeat-y left top;}

div#cadre {
	height: 100%;
	margin-left: 100px;
	background: url(droite.png) repeat-y right top;
}


Et voilà.
Attention: il ne faut pas que la div#cadre ou un de ses blocs parents se retrouve affublé d'une marge verticale. Or, ce risque existe, à cause de la fusion des marges entre éléments parents et enfants.
http://web.covertprestige.info/test/04-blocs-imbriques-et-fusion-des-marges.html

On veillera donc à prendre quelques précautions, comme celles utilisées pour le tutoriel suivant :
http://web.covertprestige.info/test/08-pied-de-page-en-bas-ecran-1.html
(cf le paragraphe qui dit « Note : le grand piège à éviter est celui des marges, padding et bordures verticales appliquées aux éléments html et body, et à div#cadre... »)
Sujet clos
Aller à