28173 sujets

CSS et mise en forme, CSS3

[Résolu][Alsacréations.fr] Background & longueur automatique

Salut à tous,

Tout d'abord félicitation pour ce magnifique site !

J'ai une question qui m'agace depuis qq jours maintenant, et j'aimerai avoir une réponse, car cela résoudrait beaucoup de mes problèmes.

J'ai repris le code d'Alsacreations.fr ainsi que qq uns de vos tuto pour comprendre, mais je n'y arrive pas.

Voici, en gros, la structure de la partie centrale du site et de son footer:

<body>
<div id="global">

<div id="general">
Sit voluptaria consequuntur interpretaris ea, salutatus comprehensam usu ea. Qui te summo electram iracundia, ex mel scripta tritani. Eos eius minim laoreet ne, labitur pertinax est ne. Nam et tamquam appellantur, enim mediocrem cu cum. Everti verear cu has, ad quo facete fastidii. Te est alia ubique. Mea in populo utamur assueverit, delenit oportere explicari in sit, possim abhorreant deterruisset ea ius. Eam ei augue possit minimum. Eam cu facete mollis, debitis patrioque quaerendum duo eu. Pri probo error id. Tation volumus cu sea, id enim agam meis vim. Cu mucius intellegebat delicatissimi eum, illum movet labore usu ei. At ferri ubique vix, has eu omnesque evertitur, commodo nusquam deleniti in sed. Euismod intellegat per cu. Cum et eros quaestio, enim populo cum in.
</div> <!-- fin general -->

<div id="sidebar">
<ul>
			<li><a href="etape1.html">Etape n°1</a></li>
			<li><a href="etape2.html">Etape n°2</a></li>

			<li><a href="etape3.html">Etape n°3</a></li>
			<li><a href="etape4.html">Etape n°4</a></li>
			<li><a href="etape5.html">Etape n°5</a></li>
		</ul>
</div> <!-- fin sidebar -->
</div> <!-- fin global -->

<div id="footer">

</div> <!-- fin footer -->

</body>


Jusque là tout va bien. Cela comprend un bloc conteneur, avec à l'intérieur un bloc de texte et un menu, plus le footer en bas.

Le code css est le suivant:
#global
{
	/*background-color:#00CC00;*/
	width: 807px;
	margin: 0 auto;
	text-align: left;
	background: url(fondglobal.png) repeat-y;
}

#global #general
{
	float: left;
	width: 577px;
}

#global #sidebar
{
	float:right;
	width:230px;
	/*background-color:#0033CC;*/
}

#footer {
	width: 807px;
	height: 3.5em;
	background: url(footer.png) left bottom no-repeat;
	color: white;
	font-size: 0.95em;
	font-weight:bold;
	text-align: left;
	margin: 0 auto;
	padding-top: 0.5em;
	clear:both;
}


Voici le résultat : http://flyby20.free.fr/test/

La question est donc la suivante: comment fait on pour que l'image de background du conteneur global se répéte est apparaisse jusqu'au footer ??? Smiley biggol

Merci !
Modifié par Luigi312 (20 Oct 2006 - 20:12)
Administrateur
Hello et bienvenue,

En fait, tu t'y prends (presque) bien. Cependant, l'arrière plan n'apparait pas tout simplement parce que ton bloc global n'a pas de hauteur !

Eh oui, les éléments flottants sortent du flux et de leur conteneur, donc le conteneur n'occupe plus de place (tu t'en rends compte en supprimant les propriétés float).

Pour t'en sortir, il faut procéder comme sur Alsacréations :
- placer le footer dans global, pour le "pousser" (ce que tu n'as pas fait)
- appliquer un clear : both au footer

Explications dans l'Incontournable FAQ
Sujet clos
Aller à