Des div qui font ceux qu'ils veulent

**sacados1** · 20/11/2007, 12h28

Bonjour à tous,

Je voulais commencer sérieusement à me mettre au CSS (et oui il faut quand même !) et là paf je tombe sur un os !!!

J'ai le <div> de class header qui ne fonctionne pas. Il est interprété par IE mais pas par Firefox....

Voici le code méchant ... :

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
31
32
33
34
35
36
37
 
.body
	{
	width:800px;
	height:100%;
	background-color:blue;
	}
 
.nav_gauche
	{
	width:200px;
	height:100%;
	background-color:red;
	float:left;
	}
 
.contenu_central
	{
	width:600px;
	height:100%;
	background:yellow;
	float:left;
	}
 
.header
	{
	width:800px;
	height:80px;
	background-color:green;
	}
 
.footer
	{
	background-color:green;
	height:80px;
	width:800px;
	}

HTML

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
 
<html>
	<head>
		<title>.:: Test ::.</title>
		<link rel="stylesheet" type="text/css" href="css.css" />
	</head>
	<body>
		<div class="body">
			<div class="header">Header</div>
			<div class="nav_gauche">Navigation menu</div>
			<div class="contenu_central">Contenu central</div>
			<div class="footer">Footer</div>
		</div>
	</body>
</html>

Merci d'avance pour vos futues réponses...

**franculo_caoulene** · 20/11/2007, 15h26

Envoyé par sacados1

J'ai le <div> de class header qui ne fonctionne pas. Il est interprété par IE mais pas par Firefox....

J'ai trouvé un problème avec le footer!
Pour le résoudre il suffit de mettre

Code :

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

.footer {width:800px; height:80px; background-color:green; clear:both;}

**sacados1** · 20/11/2007, 22h16

Merci bien.

Mais pourquoi un ajout de both fait changer l'affichage entre les navigateurs ?

Merci d'avance

**franculo_caoulene** · 20/11/2007, 22h47

C'était à cause du float:left qu'il y avait dans .contenu_central. Le mieux est en fait de supprimer le clear:both que j'ai rajouter ET le float:left de .contenu_central. Mais il faut alors définir .contenu_central avec un width:800px.

Pourquoi? Ca revient à répondre à ta question, c'est le comportement du float. Si un élément comme .nav_gauche flotte à gauche alors le div suivant glisse en dessous. Ce qui provoque un "déplacement" de 200px qu'il faut compenser.
C'était le même comportement pour .footer.

Joue avec les dimensions de tes div pour bien comprendre.

Des div qui font ceux qu'ils veulent

CSS

Discussions similaires

Partager

Partager