Discussion :

[Janitrix]

Salut à tous. Je trépigne depuis 2 jours sur un problème bête mais je n'entrevoie pas l'ombre d'une solution. Je veux faire un menu positionné à gauche et un contenu positionné au centre. J'utilise donc la propriété float. Mais voici des screen plus explicite.
Sous firefox. Sous IE 7.
Sous IE 7, l'affichage est correct, c'est ce que je veux. Mais sous firefox, les "box" de du centre vont automatiquement sous le menu de gauche. Voilà 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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
 
//Le grand block div qui contient tous les sous menus
.menu {
	float: left;
 
	margin: 0px;
}
//Block d'un sous menu
.submenu {
	border: 1px solid rgb(192, 224, 241);
 
	margin: 20px;
	margin-right: 0px;
 
	vertical-align: middle;
 
	border-collapse: collapse;
	text-align: left;
 
	width: 17%;
}
//Le contenu du sous menu
.menu_body {
	background-color: rgb(236, 244, 249);
}
//Le grand block div qui contient toutes les box
.box_panel {	
	float: right;
 
	width: 80%;
}
//Chaque box
.box {
	border: 1px solid rgb(180, 210, 230);
 
	margin: 20px;
	margin-left: 0px;
 
	vertical-align: middle;
 
	border-collapse: collapse;
	float: left;
 
	width: 40%;
}
//Le contenu des box
.box_body {
	background-color: rgb(236, 244, 249);
}

Et le code xHTML correspondant :

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
 
<div class="menu">
 
	<table class="submenu">
		<tr><td class="menu_title">Actions</td></tr>
		<tr class="menu_body">
			<td>
				<ul>
					<li><a href="inscription.php">Inscription</a></li>
					<li><a href="identification.php">Identification</a></li>
						</ul>
					</td>
				</tr>
			</table>
 
 
	<table class="submenu">
		<tr><td class="menu_title">Les Projets</td></tr>
		<tr>
		      <td class="menu_body">
				<ul>
				<li><a href="inscription.php">Tous les projets</a></li>
				<li><a href="identification.php">Recherche</a></li>
				</ul>
			</td>
		</tr>
	</table>
 
</div>
 
		<div class="box_panel">
 
			<table class="box">
				<tr><td class="box_title">Projets Récents</td></tr>
				<tr>
					<td class="box_body">
						<ul>
							<li><a href="inscription.php">Tous les projets</a></li>
							<li><a href="identification.php">Recherche</a></li>
						</ul>
					</td>
				</tr>
			</table>
 
			<table class="box">
				<tr><td class="box_title">Projets Actifs</td></tr>
				<tr>
					<td class="box_body">
						<ul>
							<li><a href="inscription.php">Tous les projets</a></li>
							<li><a href="identification.php">Recherche</a></li>
						</ul>
					</td>
				</tr>
			</table>
 
		</div>

J'ai essayé quelques trucs comme enlevé le float: left du menu de gauche, rajouter des <br />, mais rien n'y fait, sous firefox l'affichage reste le même. Vous avez une idée de la source de ce problème ? Merci.

[Haze.]

Salut,

Dans la class .menu, ajoute la propriété suivante :

Code CSS :

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

width: 17%;

Et dans la classe .submenu, remplace

Code CSS :

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

width: 17%;

par :

Code CSS :

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

width : 100%;

Explication : div.menu est une balise block, elle prend donc 100% de la largeur disponible par défaut. Tu as beau mettre un float, si il n'y a plus de place, le bloc suivant ira se mettre en dessous.
Le width: 100% sur les .submenu force tes boîtes à prendre toute la largeur du menu latéral.

Et tant que j'y suis, tu te compliques vraiment la vie avec tes tableaux ! Ça fait beaucoup de code pour juste deux cellules, à mon humble avis deux simples balises <div> seraient plus appropriées.

[Janitrix]

Merci de ta réponse, je vais testé ça. Pour les tableaux, c'est juste pour éviter une éventuelle incompatibilité avec IE 6, car IE 6 gère (très) mal les div et les différentes propriétés css (margin notamment). Je changerai peut être un peu plus tard. Merci