Discussion :

[3Dos]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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!

[adiGuba]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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++

[3Dos]

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