28172 sujets

CSS et mise en forme, CSS3

Problème d'affichage de background

Bonjour à tous,
je rencontre un problème que je n'arrive pas à solutionner.
Alors je suis en train de créer un template pour un blog à 2 colonnes.
La structure d'une page vide ressemblerait à ceci :

<html>
<body>
	<div id="page">
		<div id="top">
			....
		</div>
		<div id="wrapper">
			<div id="main">
				<div id="content">
					<div class="post">....</div>
					<div class="post">....</div>
					<div class="post">....</div>
					<div class="post">....</div>
				</div>
			</div>
			<div id="sidebar">
				....
			</div>
		</div>
		<div id="footer">
			....
		</div>
	</div>
</body>
</html>


Voici la feuille de style associée :

body {
 	background : url('images/background.png');
	background-repeat : x-repeat;
	text-align : center;
	}
#page {
	margin : 0 auto;
	text-align : left;
	width : 798px;
    }
#top {
	height : 312px;
	background : url('images/header.png');
	}
#wrapper {
	margin : 0;
	background : url('images/wrapper.png');
	background-repeat : repeat-y;
	clear : both;
	} 
#main {
	width : 100%;
	margin : 0 -250px 0 0;
	float : left;
	}
#content {
	margin : 0 260px 0 0;
	padding : 10px;
	}
#sidebar {
	width : 250px;
	float : right;
	}
#footer {
	clear : both;
	text-align : center;
	height : 50px;
	background : url('images/footer.png');
	background-repeat : no-repeat;
	}


J'aimerais appliquer un background pour le top, pour le wrapper, et pour le footer. Celui pour le top marche, celui pour le footer aussi. Mais pour le wrapper rien ne s'affiche sous les div main et sidebar. Comment pourrais-je solutionner ce problème ?
Merci de vos avis.

Cordialement,
dj_f.
Modifié par fmrprod (04 Oct 2008 - 16:52)
Hello,

Cas classique de dépassement des flottants. Si tu pensais le régler avec un clear: both sur le conteneur, tu t'es trompé: la propriété clear ne prend pas les éléments enfants ou descendants de l'élément auquel on l'applique.

Un contexte de formatage avec un overflow: hidden par exemple serait plus efficace. Pour IE6, il faudra utiliser le hasLayout (voir la FAQ si notion pas connue).

En passant, la technique utilisée pour positionner tes deux colonnes me semble inutilement compliquée. C'est juste dans le but de placer la sidebar après le contenu dans le code HTML?
salut,

Supprime le clear sur ton wrapper et un petit overflow: auto; devrait faire l'affaire.


lien faq
<edit>grillé</edit>
Modifié par ghost (04 Oct 2008 - 19:50)
Sujet clos
Aller à