[CSS] Fond

Version imprimable

[CSS] Fond

Bonjour, j'ai un réel problème avec ma CSS: le background d'un div ne s'affiche pas (adresse vérifiée c'est pas ça qui foire) et celà est peut être du au clear: both, de mon footer

Mon CSS:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
#news {
	padding: 5px;
	margin: 5px 5px 5px 0px;
	border: dashed 1px #000000;
	width: 355px;
	float: right;
}
 
#accueil {
	padding: 5px;
	margin: 5px 5px 5px 0px;
	border: dashed 1px #000000;
	width: 395px;
	float: right;
}
 
#home {
	background-image: url('images/bg/home.gif');
	background-repeat: no-repeat;
}
 
#footer {
	background-color: #FFA500;
	border-top: dashed 1px #000000;
	padding: 3px;
	font-size: 8pt;
	text-align: center;
	height: 16px;
	clear: right;
}

Le XHTML correspondant:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<div id="home">
				<div id="news">
					<h2>Dernières news</h2>
					<p>News... bla bla</p>
				</div>
				<div id="accueil">
					<h2>Avant toute chose...</h2>
					<p>Contenu...  bla bla</p>
					<p class="signature">3Dos</p>
				</div>
			</div>
			<div id="footer">footer</div>

lorsque je met simplement du contenu dans le div "home", là le fond d'écran s'affiche... ça m'intrigue et si vous avez une solution, je suis prenneur! :) merci d'avance!

Salut,

Le bloc div#home a une taille vide, c'est pour ca que tu ne vois pas le fond.
Met une bordure pour bien le voir (je te conseille de travailler avec les bordures lorsque du a des problème comme cela pour bien voir où sont positionner les éléments).

Le bloc est vide parce que tous les bloc qu'il contient sont en position float...
Pour éviter cela tu peux rajouter un bloc vide avec un clear:both à la fin du bloc :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <div id="home"> <div id="news"> <h2>Dernières news</h2> <p>News... bla bla</p> </div> <div id="accueil"> <h2>Avant toute chose...</h2> <p>Contenu... bla bla</p> <p class="signature">3Dos</p> </div> <div style="clear:both;"/> </div> <div id="footer">footer</div>
a++

06/09/2005, 21h14
3Dos

:mrgreen:

Merci beaucoup ;) j'ai résolu le problème à peu près similairement, jai mis un <hr /> avec un clear both ;) là en fait mon clear both était appliqué sur le footer et ça foirait mon home :) j'ai mis le hr dans le home et ça marche :) merci bien en tout cas ;)