Problème de float div superposée.
Bonjour, je rencontre actuellement un problème d'intégration.
Je vous mets un screen pour que ça soit plus simple:
http://img823.imageshack.us/img823/4622/31441268.jpg
On peut voir que le footer (on voit marqué "bien-être de votre famille")
passe en dessous de mes deux colonnes qui sont positionnées en grâce à float.
J'ai testé avec des clear, de changer l'ordre des divs etc... Mais rien à faire, j'y arrive pas. Faudrait que j'fasse un stage d'intégration ^^"
Voici le code 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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
|
<style type="text/css">
body{
width:980px;
margin:0 auto;
background:url(./images/background_ligne.png);
background-position:center top;
background-repeat:repeat-x;
background-attachment: fixed;
background-color:#99ccff;
}
#global{
margin:0 auto;
width:768px;
}
#menu{
margin-top:10px;
width:221px;
float:left;
margin-bottom:50px;
}
.navigation{margin:0px;padding:0px;list-style:none;background: none;color:#fff;width:221px;}
.navigation a, .navigation span{
color:#fff; /* couleur de la rubrique */
text-decoration:none;
font-size:140%;
display:block;
padding-top:15px;
padding-bottom:12px;
padding-left:25px;
padding-right:0px;
background:none;
}
#contenu{
margin-top:10px;
width:537px;
float: right;
/* background-color:#ffffff; */
padding-left:0px;
}
#top_contenu{
width:537px;
height:19px;
background:url(./images/top_contenu.png);
background-position:left top;
display:block;
}
#content_contenu{
margin-left:1px;
background:url(./images/bg_contenu.png) repeat-y;
}
#header{
margin:0 auto;
background:url(./images/header.png);
width:757px;
height:230px;
}
#footer{
background:url(./images/footer_bottom.png) repeat-y;
width:537px;
height:68px;
display:block;
}
#lesNews{
width:506px;
height:90px;
margin-left:12px;;
background:url(./images/news_back.png) no-repeat;
padding-top:35px;
padding-left:15px;
}
.uneNews a, a:active, a:hover, a:visited{
text-decoration:none;
color:#000000;
}
#twoColumn{
width:100%;
}
#block_gauche{
margin-left:6px;
padding-left:15px;
padding-top:30px;
float:left;
width:247px;
height:123px;
background:url(./images/block_gauche.png) no-repeat;
}
#block_droite{
margin-right:16px;
float:right;
width:247px;
height:126px;
background:url(./images/block_droite.png) no-repeat;
}
</style> |
Et le code HTML:
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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
|
<body>
<div id="header"></div>
<div id="global">
<div id="menu">
<ul class="navigation" id="bleu">
<li class="toggleSubMenu"><a href="./" title="aller ici">Accueil</a></li>
</ul>
<div> </div>
<ul class="navigation" id="vert">
<li class="toggleSubMenu" class="nolink"><span >Eco-poules</span>
<ul class="subMenu ">
<li><a href="L-Aloe-Vera,Extraction-et-utilisation.html" title="Extraction et utilisation">- Qui sommes-nous?</a></li>
<li><a href="L-Aloe-Vera,Une-plante-depolluante.html" title="Une plante dépolluante">- Nous contacter</a></li>
</ul>
</li>
</ul>
<div> </div>
<ul class="navigation" id="vert">
<li class="toggleSubMenu"><a href="./presse.php" title="aller ici">Revue de presse</a></li>
</ul>
<div> </div>
<ul class="navigation" id="jaune">
<li class="toggleSubMenu"><span>Les poulaillers</span>
<ul class="subMenu ">
<li><a href="La-Production,Tailles-et-varietes.html" title="Tailles et variétés">Tailles et variétés</a></li>
<li><a href="La-Production,Culture-et-entretien.html" title="Culture et entretien">Culture et entretien</a></li>
</ul>
</li>
</ul>
<div> </div>
<ul class="navigation" id="jaune">
<li class="toggleSubMenu"><span>Autres</span>
<ul class="subMenu ">
<li><a href="La-Production,Tailles-et-varietes.html" title="Tailles et variétés">Tailles et variétés</a></li>
<li><a href="La-Production,Culture-et-entretien.html" title="Culture et entretien">Culture et entretien</a></li>
</ul>
</li>
</ul>
<div> </div>
<ul class="navigation" id="bleu">
<li class="toggleSubMenu"><a href="./poules.php" title="aller ici">Les poules</a></li>
</ul>
</div>
<!-- FIN MENU !-->
<div id="contenu">
<div id="top_contenu"></div>
<div id="content_contenu">
<div id="lesNews">
<div class="uneNews">- <a href="./news.php?id=1">Salon de l'agriculture à Epinal. Nous exposerons nos poulaillers (<font style="color:#0000ff">+</font>)</a></div>
<div class="uneNews">- <a href="./news.php?id=1">Salon de l'agriculture à Epinal. Nous exposerons nos poulaillers (<font style="color:#0000ff">+</font>)</a></div>
<div class="uneNews">- <a href="./news.php?id=1">Salon de l'agriculture à Epinal. Nous exposerons nos poulaillers (<font style="color:#0000ff">+</font>)</a></div>
<div class="uneNews">- <a href="./news.php?id=1">Salon de l'agriculture à Epinal. Nous exposerons nos poulaillers (<font style="color:#0000ff">+</font>)</a></div>
</div><!-- fin news !-->
<div id="twoColumn">
<div id="block_gauche">
azeazeaze<br />
</div>
<div id="block_droite">
azeazeazeazeaze
</div>
</div>
<div id="footer"></div>
</div><!-- fin content_contenu !-->
</div><!-- fin contenu !-->
</div><!-- fin global !-->
</body> |
Quelqu'un pourrait-il m'aider s'il vous plait? Je désespère... (et m'expliquer histoire que ça ne m'arrive plus).
