Deux blocs contenant 3 divs chacun
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:
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:
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 ! :D
