Discussion :

[benthebest]

Bonjour,

Je suis débutant donc pas très doué, c'est pour cela que je fais appel à votre aide

Donc, c'est simple, je voudrais mettre 3 blocks côte à côte, ça marche très bien sous IE, mais pas du tout sous Firefox

Voici mon code 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
#block_body {
display:block;
width:950px;
border: 1px solid #000000;
}
#block_gauche {
float:left;
width:35%;
height:580px;
border: 1px solid #09B0CD;
background-image:url(psd/bg_block_gif.gif);
}
#block_centre {
float:left;
width:50%;
height:580px;
border: 1px solid #09B000;
background-color:#ff00ff;
}
#block_droit {
float:left;
width:15%;
height:580px;
border: 1px solid #ffB0CD;
background-color:#fff000;
}

Et voici mon code HTML :

Code :

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

1
2
3
4
5
<div id="block_body" >    	
    <div id="block_gauche"> aaaaaaaaaa </div>	
    <div id="block_centre"> ddddddd </div>	
    <div id="block_droit"> ffffffffff </div>    
</div>

Merci pour votre aide.

[aityahia]

essai comme ça.
pour le bandeau a droite il faut le mettre float a right et ôté l'attribut pour le bandeau central.

Code CSS :

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
 
#block_body {
 Margin : Auto;
 width:950px;
 border: 1px solid #000000;
}
#block_gauche {
float:left;
Margin :Auto;
width:35%;
height:580px;
border: 1px solid #09B0CD;
background-image:url(psd/bg_block_gif.gif);
}
#block_centre {
Margin :Auto;
width:100%; 
height:580px;
border: 1px solid #09B000;
background-color:#ff00ff;
}
#block_droit {
Margin :Auto;
float:right; 
width:15%;
height:580px;
border: 1px solid #ffB0CD;
background-color:#fff000;
}

vous inversez l'ordre des balise Div

Code HTML :

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

1
2
3
4
5
<div id="block_body" >    	
    <div id="block_gauche"> aaaaaaaaaa </div>	
   <div id="block_droit"> ffffffffff </div>  
   <div id="block_centre"> ddddddd </div>	
</div>

[pop_up]

Ta mise en page fonctionne tres bien Benthebest mais ce qui fait que ça ne marche pas actuellement, c'est que tu dépasses les 100% de largeur pour ton block_body.

Actuellement tu as 35% + 50% + 15% ce qui fait bien 100% mais tes bordures se cumulent à ces 100% ce qui fait que ton dernier block ne rentre pas.

[benthebest]

Ok super, la solution de aityahia fonctionne, il fallait inverser les div...

Maintenant j'ai un autre problème, je voudrais bien centré mon bloc_centre non pas au milieu de la page, mais au milieu des block gauche et droit...
Cette fois-ci, ça marche très bien sous Firefox mais pas du tout sous IE...

Voici le code CSS utilisé :

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
#block_body {
display:block;
Margin : Auto;
width:950px;
/*border: 1px solid #000000;*/
}
#block_gauche {
float:left;
width:200px;
height:330px;
border: 1px solid #09B0CD;
background-image:url(psd/bg_block_gif.gif);
}
#block_centre {
position:relative;
width:600px; 
height:330px;
left:50px;
border: 1px solid #09B000;
background-color:#ff00ff;
}
#block_droit {
float:right;
width:100px;
height:330px;
border: 1px solid #ffB0CD;
background-color:#cccccc;
}

Et voici le code HTML :

Code :

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

1
2
3
4
5
6
	<div id="block_body" align="center">
    	<div id="block_gauche"></div>
        <div id="block_droit">PUB</div>
		<div id="block_centre"></div>	
    <!---->    
	</div>

Merci à vous pour vos réponses

[Erwan31]

Ta structure n'est pas robuste et le bloc centrale ferait mieux de rester en
2ième position pour améliorer le référencement du contenu du bloc mais aussi si tu n'as pas prévu de liens d'accès directe...

Pour centrer le bloc centrale tu dois créer un bloc supplémentaire définissant
un contexte de formatage bloc (via un overflow:hidden) qui servira de
bloc référent pour le centrage du bloc rose (#content)

Le bloc de droite est positionné de manière absolue pour éviter qu'il descende sous les 2 autre blocs, ce sont des pub ça ne devrait a priori pas poser de problème...

Si jamais tu es amené à modifier la largeur du bloc gauche, la largeur en % du #content s'adaptera comme #block_centre qui le fera automatiquement (pas de largeur > width:auto)

Ce qui donne

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
<style type="text/css" media="screen">
<!--
#block_body {
	position:relative;
	margin: 0 auto;
	width:950px;
	/*border: 1px solid #000000;*/
}
#block_gauche {
	float:left;
	width:100px;
	height:330px;
	border: 1px solid #09B0CD;
	background-image:url(psd/bg_block_gif.gif);
}
#block_centre {
/*	border: 1px solid #09B0CD;*/
	overflow:hidden;
	height:330px;
	margin-right: 100px;
}
#content {
	width:92%;
	height:100%;
	margin: 0 auto;
	border: 1px solid #09B000;
	background:#ff00ff;
}
#block_droit {
	position:absolute;
	right: 0;
	top:0;
	width:100px;
	height:330px;
	border: 1px solid #ffB0CD;
	background:#ccc;
}
-->
</style>
</head>
<body>
<div id="block_body">
  <div id="block_gauche"></div>
  <div id="block_centre">
    <div id="content"></div>
  </div>
  <div id="block_droit">PUB</div>
  <!---->
</div>
</body>
</html>

[benthebest]

Je m'excuse mais cette solution ne marche malheureusement pas, ça fait le même effet que mon code, c'est à dire que ça ne fonctionne pas sous Firefox...