Du mal à positionner mes blocks!

Version imprimable

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:

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:

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.:D

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

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
 
#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:

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>

16/03/2008, 10h16
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.

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:

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:

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 :D

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:

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">  </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>

16/03/2008, 23h38
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...:cry:
17/03/2008, 01h12
Erwan31

Si ça marche et je suppose que tu veux dire que ça ne fonctionne pas sous IE et non Firefox ;)

Tu es très probablement en mode Quirks (mode de rendu propriétaire non standard > fortement déconseillé)

Cette phrase le confirme:

Citation:

Envoyé par benthebest

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

En principe ça signifie que tu es dans le modèle de boite Microsoft (calculs des tailles de boite différent de ce que t'as expliqué pop_up) déclenché
par le mode Quirks.

Ajouter un doctype valide au dessus de la balise <html>

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
17/03/2008, 21h55
benthebest

J'ai changé le doctype et encore une fois ca ne marche pas sous Firefox, mais sous IE ca fonctionne... bizzard non?? :?
17/03/2008, 21h57
Erwan31

Citation:

Envoyé par benthebest

J'ai changé le doctype et encore une fois ca ne marche pas sous Firefox, mais sous IE ca fonctionne... bizzard non?? :?

Donnes tout ton code dans ce cas là.

Ok, le voici :

-->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
 
#block_body {
display:block;
/*Margin : Auto;*/
margin: 0 auto;
width:950px;
}
#block_gauche {
float:left;
width:200px;
height:330px;
border: 1px solid #09B0CD;
background-image:url(psd/bg_block_gif.gif);
}
#block_centre {
	overflow:hidden;
	height:330px;
	margin-right: 100px;
}
#content {
	width:92%;
	height:100%;
	margin: 0 auto;
	border: 1px solid #09B0CD;
 
}
#block_droit {
float:right;
width:100px;
height:330px;
border: 1px solid #ffB0CD;
background-color:#ccc;
}

-->xHTML :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>TEST</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style_accueil.css"/>
</head>
 
<body>
 
<div id="block_body" align="center" >
    	<div id="block_gauche"></div>
     	<div id="block_droit">PUBLICITE</div>
		<div id="block_centre">
			<div id="content"></div>
		</div>	
    <!---->    
	</div>
 
</body>
</html>

Voili voilou merci :P

17/03/2008, 22h08
Erwan31

Retournes voir le code XHTML que je t'ai donné, ce n'est pas le même.
17/03/2008, 22h13
benthebest

Je sais je l'ai aussi testé mais le resultat est pareil ... (voir pire car la block droit est placé vers le bas et n'est plus du tout aligné avec les autres blocks...)

Sinon tu as testé avec le code que j'ai envoyé? ca marche chez toi??
17/03/2008, 22h16
Erwan31

Reprends TOUT mon code, tu as meme pas récupéré toute la CSS, ça ne peut que foirer!
17/04/2008, 00h55
benthebest

1 pièce(s) jointe(s)

Merci Erwan pour ton aide (et merci pour le mp ;))

Desole de relancer un peu ce topic mais j'ai un autre problème sur ce même sujet de placement de block. En fait, ces 3 bloc ne doivent pas être tout en haut, mais plutôt en dessous d'un entête de présentation (contenant le logo et autres)...

Ce qui fait que le

Code:

top:0;

du block_droit n'est pas bon.

C'est pour cela qu'il me faudrait une solution plus générique qui me permette de placer mes 3 blocks (tous alignés biensur) mais à une hauteur qui dépend de mon entête de présentation.

Voici comment je voit la chose :
voir ma pièce jointe

Voila

Merci!