Discussion :

[baggie]

Bonjour

bon j'ai du mal avec mes CSS en ce moment ... Bref, voici mon problème :

> j'ai deux blocs : un menu et un fil d'actus censés s'afficher l'un sous l'autre.
> chaque bloc est composé de 3 blocs :

• L'image de gauche
• Le fond principal
• L'image de droite

Comme ceci :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<div class="header">
	<div id="left_header_menu"></div>
	<div id="header_menu">tes test test test</div>
	<div id="right_header_menu"></div>
</div>
<div class="header_actus">
	<div id="left_actus"></div>
	<div id="actus">actus actus actus</div>
	<div id="right_actus"></div>
</div>

Mon premier bloc (class = header) s'affiche bien correctement.
Pour mon second bloc, c'est une autre histoire :
> le div "left_actus" se retrouve sur la même ligne que mon div class="header" !

Voilà ma 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
38
 
.header div, .header_actus div {
	float: left;
}
 
#left_header_menu {
	background: url('images/menu_top_left.png') no-repeat;
	width: 17px;
	height: 35px;
}
 
#header_menu {	
	background: url('images/menu_top_center01.png') repeat-x;
	height: 35px;
}
 
#right_header_menu {
	background: url('images/menu_top_right.png') no-repeat;
	width: 19px;
	height: 35px;
}
 
#left_actus {
	background: url('images/menu_top_left_actus.png') no-repeat;
	width: 17px;
	height: 27px;
}
 
#actus {
	background: url('images/menu_top_center02.png') repeat-x;
	height: 27px;
}
 
#right_actus {
	background: url('images/menu_top_right_actus.png') no-repeat;
	width: 19px;
	height: 27px;
}

Il faudrait donc que les divs du header soient sur leur ligne et ceux des actus se retrouvent sur leur ligne, en dessous du header.

J'ai essayé plusieurs choses mais rien à faire, c'est foireux !
Un peu d'aide (encore) serait la bienvenue ... Merci !

[Torgar]

Salut,

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<div class="header">
    <div id="left_header_menu"></div>
    <div id="header_menu">tes test test test</div>
    <div id="right_header_menu"></div>
</div>
<div style="clear: both;"></div>
<div class="header_actus">
    <div id="left_actus"></div>
    <div id="actus">actus actus actus</div>
    <div id="right_actus"></div>
</div>
<div style="clear: both;"></div>

La propriété Float place les éléments hors flux, il faut donc les réintégrer en nettoyant les flottant pour replacer les éléments suivant en dessous du bloc précédent.

[baggie]

J'avais pas mis ma propriété clear au bon endroit ...

Merci Torgar (une fois de plus )