[résolu par e-kiwi] Avis aux "pas-cons" du CSS

**le Mer Juil 19, 2006 16:21**

Note : les "pas-cons" sont les gens qui trouvent toujours une idée à laquelle personne n'avait pensé, du coup on dit "c'est pas con"

Bref, un petit problème tout simple, mais je me casse là tête dessus depuis ce matin 8h :

Je cherche à afficher trois boîtes/colonnes les unes à côté des autres pour que ça fasse :

BLEU BLANC ROUGE

tout simple me direz-vous,
oui mais voila, il faut que le code HTML soit de la sorte :

<div>BLANC</div>
<div>BLEU</div>
<div>ROUGE</div>

ça se complique tout de suite, n'est ce pas ?

et le pire, c'est de mettre le tout dans un gros bloc div, là ça devient carrément infaisable.

Bref, j'ai beau tout essayé, rien n'y fait, ça veut pas faire bleu-blanc-rouge ça fait plutôt ça :

voici un petit code HTML tout fait, vous pouvez le reprendre pour tester :

Code: Tout sélectionner: <html> <head> <title>Bleu-blanc-rouge</title> <style type="text/css"> #blanc { background-color:#FFFFFF; /*blanc*/ width:390px; /*valeur test : 750 - 2*180 */ } #bleu { background-color:#0000FF; /*bleu*/ float:left; width: 180px; } #rouge { background-color:#FF0000; /*rouge*/ float:right; width: 180px; } body { background-color:#FFFFCC; /*jaune*/ text-align:center; /*pour centrer le gros bloc, à cause d'IE*/ } #grosbloc { background-color:#FFCCFF; /*rose */ border:2px solid #000000; width:750px; margin:0px auto; /*pour centrer le gros bloc, à cause d'IE*/ text-align:left; } </style> </head>  <body> <div id="grosbloc"> <div id="blanc"> BLANC<br /> Ceci est le contenu de la page. </div> <div id="bleu"> BLEU<br /> Menu à gauche. </div> <div id="rouge"> ROUGE<br /> Menu à droite. </div> </div> </body> </html>

NOTE 1 : je n'ai que faire du HTML, tant que les div sont dans le même ordre que dans le code ci-dessous. Vous pouvez mettre des largeurs en pixels, en pourcentage ou en bananes tant que ça marche c'est le principal. Enfin si vous pouviez garder les largeurs du bleu et du rouge en pixels ce serait sympa quand même

NOTE 2 : toutes les propositions sont bonnes à prendre, si vous avez une idée n'hésitez pas à la poster ! N'hésitez pas non plus à me poser des questions je suis là pour répondre

UN TRES GRAND MERCI D'AVANCE !!!

PS : celui qui me trouve la réponse exacte (ou presque) à ce problème gagnera un lien sur la home page de mon site (WWW) ou sur toutes les pages de mon site, en fonction de la réponse apportée ^^ :-)

Bonne chance amis designers !
(édition : le [i]PS a été modifié, ça fait moins hypothétique

)[/i]

**le Mer Juil 19, 2006 16:35**

en gros dans le source tu veux le contenu avant le menu. tu veux le site centré de resolution fixe ou le menu peut etre collé à gauche ?

**le Mer Juil 19, 2006 16:36**

Salut,

Ajoute un float:left; à chaque bloc ;-)

Attention : la taille des trois blocs ensemble doit faire la largeur du plus grand bloc !

A+

**le Mer Juil 19, 2006 16:43**

S'il met un float:left; à chaque, il va avoir [BLANC][BLEU][ROUGE]...

Est-ce que float:left; sur "bleu" et float:right; sur "rouge" ne peut pas aider ?

**le Mer Juil 19, 2006 16:45**

Je ferais ce que propose Sir Dipp.
Peut-être que je me trompe, mais suite à des expériences perso, il m'a semblé qu'il faut aussi préciser la hauteur des div à l'intérieur du conteneur pour que ça marche ? :roll:

**le Mer Juil 19, 2006 16:47**

non, ca ne marchera pas, relisez bien l'énoncé !

en float, il lui faudrait comme ordre : bleu-rouge-blanc

**le Mer Juil 19, 2006 16:47**

e-kiwi a écrit:en gros dans le source tu veux le contenu avant le menu. tu veux le site centré de resolution fixe ou le menu peut etre collé à gauche ?

le "grosbloc" doit être centré quelque soit la résolution de la page

en gros ça doit faire un truc qui ressemble à ça

(c'est un montage fait à l'arrache) // édition : le "haut gros bloc" et le "bas du gros bloc" n'étaient là que pour les tests. En effet je ne sais pas trop pourquoi mais quand on met des div flotants dans un div qui encadre, et bien le fond de ce gros bloc n'apparait pas...
//édition 2 : en fait la hauteur des cadres peut être différente, sachant qu'en général le contenu du bloc blanc sera plus grand (en hauteur) que les menus à coté. Mais bon là on s'en fout un peu, on va bien voir déjà comme ça comment ça marche, après je me débrouillerai ^^

Attention : la taille des trois blocs ensemble doit faire la largeur du plus grand bloc !

c'est pas ce que j'ai fait ?

**le Mer Juil 19, 2006 16:50**

par contre :
<div id=gauche>
<div id=blanc>
<div id=bleu>
</div>

<div id=rouge></div>

ca te va ?
en mettant le gauche en display:inline du droite et le bleu en float:left

**le Mer Juil 19, 2006 16:50**

autre truc : un ami, Yoann pour ne pas le citer, m'a trouvé une solution, c'est d'utiliser des positions absolues.
C'est pas bête et ça marche, mais le problème c'est que la position ne varie pas en fonction de la résoltion. C'est à dire que le "gros bloc" sera centré, mais ce qu'il y a dedans pas forcément

**le Mer Juil 19, 2006 16:52**

e-kiwi a écrit:par contre :
<div id=gauche>
<div id=blanc>
<div id=bleu>
</div>

<div id=rouge></div>

ca te va ?
en mettant le gauche en display:inline du droite et le bleu en float:left

je dois admettre que j'ai pas tout compris
mais en effet tu peux modifier le code HTML tant que le CONTENU DU BLOC BLANC vient avant les autres contenus dans le code HTML. En gros comme le verra le moteur quoi, et aussi les portables...

**le Mer Juil 19, 2006 16:58**

je peux inverser bleu et rouge ? (code : blanc-rouge-bleu)

**le Mer Juil 19, 2006 17:00**

Je crois que j'ai compris, pour en fait pour a voir le contenu en haut si on prend pas en compte les CSS.

Dans ce cas, on ami à trouvé la solution avec des positions, mais c'est pas propre si j'ose dire.

Essai de voir sur alsacreations.com s'ils ont une autre solution ?

A+

**le Mer Juil 19, 2006 17:03**

TOMHTML a écrit:Bref, j'ai beau tout essayé, rien n'y fait, ça veut pas faire bleu-blanc-rouge ça fait plutôt ça :

tu mets ton bleu et ton rouge en absolute et tu attribue des margin-right et left suffisant au blanc pour qu'il ne "gerbe" pas sur les menus ...
et basta ...

c'est un lay0ut 3 c0l0nnes tout ce qu'il y a de traditionnel.
va voir sur Openweb le cas y est traité à plusieurs reprises :wink:

**le Mer Juil 19, 2006 17:05**

e-kiwi a écrit:je peux inverser bleu et rouge ? (code : blanc-rouge-bleu)

sans problème, même si je sais pas comment tu vas t'en sortir ^^

Essai de voir sur alsacreations.com s'ils ont une autre solution ?

Quitte à faire gagner un/des lien(s), autant le faire avec des gens que je fréquente ^^

je vais devoir m'en aller jusqu'à ce soir, je ramasserai les copies en rentrant :lol:

**le Mer Juil 19, 2006 17:06**

trop facile...

parfait sous firefox, décalage de 2 px sous ie...

<html>
<head>
<title>Bleu-blanc-rouge</title>
<style type="text/css">
#blanc {background-color:#FFFFFF;float:left;width:390px;}
#bleu {background-color:#0000FF;width: 180px;-width: 177px;}
#rouge {background-color:#FF0000;float:right;width: 180px;}
body {background-color:#FFFFCC;text-align:center;}
*{margin:0px;padding:0px}
#gauche{float:right;width:570px;}
#site{margin:auto; width:750px}
</style>
</head>

<body>
<div id=site>
<div id="gauche">
<div id="blanc">BLANC<br /> Ceci est le contenu de la page.<br/><br/><br/><br/><br/></div>
<div id="rouge">ROUGE<br /> Menu à droite.</div>
</div>
<div id="bleu">BLEU<br /> Menu à gauche.</div>
</div>
</body>
</html>

[résolu par e-kiwi] Avis aux "pas-cons" du CSS

[résolu par e-kiwi] Avis aux "pas-cons" du CSS

Re: Avis aux "pas-cons" du CSS

Lectures recommandées sur ce thème :

Qui est en ligne