Problème de décalage de bloc en fonction d'un menu déroulant

**will89** · 09/05/2007, 11h53

Salut à tous, je travaille actuellement sur le CSS d'un futur site de vente de produits dérivés.
Mon site se découpe en 5 blocs comme suivant :
Le head qui contient la bannière et le moteur de recherche
Puis trois blocs alignés : menu, centre et news
Puis le bloc bottom pour le pied de page.

Je voudrais que ce bloc bottom bouge en fonction du contenu du bloc centre (logique) mais aussi du menu (logique aussi me direz-vous)

Tout marche sous IE7 (j'ai pas essayé sous IE6 et j'ose pas

), mais sous Firefox seul le bloc centre fait bouger le bottom en fonction du contenu.

Voici le lien pour voir ce que ça fait : Megapolis

Voici le code de ma page index et celui de 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
31
32
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Megapolis, vente de produits dérivés (Cinéma, Mangas, Jeux en tout genre)</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
<div id="bloc_site">
	<div id="bloc_top">
		<?php include ("head.php"); ?>
	</div>
 
	<div id="bloc_new">
		new
	</div>
 
	<div id="bloc_menu">
		<?php include ("menu_dynamique.php"); ?>
	</div>
 
	<div id="bloc_centre">
		centre<br> kjhqevrlhjvb
	</div>
 
	<div id="bloc_bottom">
		<?php include ("bottom.php"); ?>
	</div>
</div>
</body>
</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
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
*{
	margin: 0px;
	padding: 0px;
}
 
div {
	position:relative;
}
 
body {
	padding: 0px;
	text-align: left;
	color: #000000;
	font-family: verdana,helvetica;
	font-size: x-small;
}
 
img {
	border: none;
}
 
#bloc_site {
	width:800px;
	margin:auto;
	background-color:#FFFF00;
}
 
#bloc_top {
	background-color:black;
	width:800px;
	height:100px;
}
 
#bloc_menu {
	float:left;
	width:140px;
	margin:-350px 0px 0px 0px;
	background-color:#FFFFFF;
}
 
#bloc_centre {
	width:510px;
	min-height:350px;
	margin:-350px 0px 0px 140px;
	padding:7px;
}
 
#bloc_new {
	background-color:red;
	width:150px;
	height:350px;
	margin:0px 0px 0px 650px;
}
 
#bloc_bottom {
	background-color:#33FF00;
	width:800px;
	height:130px;
	/*bottom:0px;*/
}

Merci d'avance à ceux qui m'aideraient.

**kryogen** · 09/05/2007, 13h44

Salut,
dommage que je n'ai pas le menu pour tester.
Et si tu supprimes :

Code :

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

float:left;

dans le #bloc_menu de ta feuille de style ?

**will89** · 09/05/2007, 17h18

Merci de ta réponse, je vois ça dès demain et je redis si ça marche.

dommage que je n'ai pas le menu pour tester.

Sinon, mon menu est tout simplement celui de base de Joomla! avant qu'on le personnalise. Je l'ai simplement réadapté à mes besoins en le rendant dynamique grâce aux tables catégories et sous-catégories de ma base de données.
Je posterais le code demain en même temps.

**will89** · 10/05/2007, 09h48

Bon bin c'est dommage le float:left; ne change rien à mon problème. Si qqn a une autre idée ?

En attendant voici le code de mon menu :

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
<?php
//récupération des catégories existantes
$query_cat = "SELECT * FROM categorie";
$cat = mysql_query($query_cat,$db);
?>
<div id="left_outer">
	<div id="left_inner">
		<div class="moduletable">
			<h3>Menu principal</h3>
 
			<table width="100%" border="0" cellpadding="0" cellspacing="0">
			<tr align="left"><td><a href="index.php" class="mainlevel"<?php if (!$_GET['cat'] AND !$_GET['souscat']) echo ' id="active_menu"';?>>Accueil</a></td></tr>
			<?php 
			while ($infos_cat = mysql_fetch_object($cat)) {
				echo '<tr align="left"><td><a href="index.php?cat='.$infos_cat->id_categorie.'" class="mainlevel"';
				if ($_GET['cat'] == $infos_cat->id_categorie) echo ' id="active_menu"';
				echo '>'.$infos_cat->libelle_categorie.'</a>';
				if ($_GET['cat'] == $infos_cat->id_categorie) {
					//récupération des souscats existantes
					$query_souscat = "SELECT * FROM souscat WHERE id_categorie = '".$infos_cat->id_categorie."' ORDER BY libelle_souscat ";
					$souscat = mysql_query($query_souscat,$db);
					while ($infos_souscat = mysql_fetch_object($souscat)) {
						echo '<div style="padding: 2px 0px 2px 4px;"><img src="images/indent1.png" alt="" /><a href="index.php?cat='.$infos_cat->id_categorie.'&souscat='.$infos_souscat->id_souscat.'" class="sublevel"';
						if ($_GET['souscat'] == $infos_souscat->id_souscat) echo ' id="active_menu"';
						echo '>'.$infos_souscat->libelle_souscat.'</a></div>';
					}
				}
				echo '</td></tr>';
			}
			?>
			</table>		
		</div>
	</div>
</div>

et le bout de css qui va avec :

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
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
/*----- Menu de navigation -----*/
 
#left_outer {
	float: left;
	margin-top: 2px;
	width: 100%;
}
 
#left_inner {
	border: 1px solid #cccccc;
	padding: 2px;
	float: none !important;
	float: left;
}
 
table.moduletable {
	width: 100%;
	margin-bottom: 5px;
	padding: 0px;
	border-spacing: 0px;
	border-collapse: collapse;
}
 
div.moduletable {
	padding: 0px;
	margin-bottom: 2px;
}
 
table.moduletable th, div.moduletable h3 {
	background: url(images/subhead_bg.png) repeat-x;
	color: #666666;
	text-align: left;
	padding-left: 4px;
	height: 21px;
	line-height: 21px;
	font-weight: bold;
	font-size: 10px;
	text-transform: uppercase;
	margin: 0 0 2px 0;
}
 
table.moduletable td {
	font-size: 11px;
	padding: 0px;
	margin: 0px;
	font-weight: normal;
	border: none;
}
 
a.mainlevel:link, a.mainlevel:visited {
	display: block;
	background: url(images/menu_mainlevel.png) no-repeat;
	vertical-align: middle;
	font-size: 11px;
	font-weight: bold;
	color: #ccc;
	text-align: left;
	padding-top: 5px;
	padding-left: 18px;
	height: 20px;!important
	height: 25px;
	width: 100%;
	text-decoration: none;
}
 
a.mainlevel:hover {
	background-position: 0px -25px;
	text-decoration: none;
	color: #fff;
}
 
a.mainlevel#active_menu {
	color: #FFCC00;
	font-weight: bold;
}
 
a.mainlevel#active_menu:hover {
	color: #FFCC00;
	font-weight: bold;
}
 
a.sublevel:link, a.sublevel:visited {
	padding-left: 1px;
	vertical-align: middle;
	font-size: 11px;
	font-weight: bold;
	color: #c64934;
	text-align: left;
	text-decoration: none;
	width:100%;
}
 
a.sublevel:hover {
	color: #FFF;
	text-decoration: none;
	background-color: #c64934;
}
 
a.sublevel#active_menu {
	color: #000000;
	text-decoration: none;
}
 
/*----- Fin du menu de navigation -----*/

**Candygirl** · 10/05/2007, 10h14

Hello,

Tout d'abord, coller ton code php sur le forum ne sert à pas grand chose; c'est le code html généré qui nous intéresse

Ensuite plutôt que d'utiliser des margin négatifs pour remonter ton corps et ton menu à cause de tes news, tu devrais les mettre en float:right.

Code css :

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

1
2
3
4
#bloc_new {
	float:right;
	margin:0;
}

Enfin si tu ajoutes la propriété clear à ton bottom, tu devrais avoir l'effet souhaité:

Code css :

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

1
2
3
#bloc_bottom {
	clear:both;
}

**kryogen** · 10/05/2007, 10h38

yep, en effet ça n'a rien résolu.
C'est peut être une histoire de z-index...
Essaye ça :

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
 
#bloc_menu {
z-index: 1;
float:left;
width:140px;
margin:-350px 0px 0px 0px;
background-color:#FFFFFF;
}
 
#bloc_centre {
z-index: 0;
width:510px;
min-height:350px;
margin:-350px 0px 0px 140px;
padding:7px;
}

C'est pas encore ça, mais bon si quelqu'un à une autre idée ?

**will89** · 10/05/2007, 15h18

C'est bon le problème est réglé :

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
39
40
41
#bloc_site {
	width:800px;
	margin:auto;
	background-color:#FFFF00;
}
 
#bloc_top {
	background-color:black;
	width:800px;
	height:100px;
}
 
#bloc_menu {
	float:left;
	width:140px;
	background-color:#FFFFFF;
	z-index:2;
}
 
#bloc_centre {
	width:506px;
	padding:7px;
	background-color:#330033;
	min-height:350px;
	float:right;
	z-index:1;
}
 
#bloc_new {
	background-color:red;
	width:140px;
	height:350px;
	float:right;
}
 
#bloc_bottom {
	background-color:#33FF00;
	width:800px;
	height:130px;
	clear:both;
}

Merci bien.

Problème de décalage de bloc en fonction d'un menu déroulant

CSS

Discussions similaires

Partager

Partager