Version complète: sur le forum Webmaster Hub : Mise en page CSS
Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS
Tizel
mardi 8 mai 2007 à 14:24
Bonjour,

J'ai un blog ( http://tizel.free.fr ) a trois colonnes.

La colonne de gauche comporte les informations générales de mon blog.
La colonne de droite comporte ma blogroll (liens vers des blogs amis, et vers le HUB wink.gif )
La colonne centrale, contient le contenu du blog.

La page HTML comporte, dans l'ordre : La colonne gauche, la colonne droite et la colonne centrale.
A ces colonnes, j'applique les style CSS suivants :
Colonne gauche : float: left;
Colonne droite : float: right;
Colonne centrale : margin-left: 240px; margin-right:240px; (240px étant la largeur de mes colonnes).

Pour des raison d'accessibilité, je souhaiterais que la page HTML comporte, dans l'ordre :
La colonne centrale, la colonne de gauche et la colonne de droite.

Le problème, c'est que lorsque je tente un tel ordre, les colonnes ne se positionnent pas correctement : Le contenu s'affiche, et les colonnes se mettent, de part et d'autre du contenu, en dessous...

Comment faire pour bien définir l'ordre d'affichage de mes colonnes ?

Tizel
captain_torche
mardi 8 mai 2007 à 17:24
Tu peux éventuellement essayer de positionner les deux premières colonnes en relatif, par rapport à leur contenant.
Je ne garantis pas le résultat, ne l'ayant pas testé wink.gif
MarvinLeRouge
mardi 8 mai 2007 à 17:28
Salut,

Si tu veux que les colonnes latérales occupent des largeurs fixes et que ta colonne centrale soit de largeur variable, ça risque de poser problème, puisque un bloc flottant ne l'est que par rapport à ce qui se trouve APRES lui dans le code.
En revanche, si tu souhaites fire un design en largeur fixe (centré globalement dans la page par exemple), il te suffit de définir les largeur de tes colonnes, de les mettre dans l'ordre en float : left, et de centrer le conteneur par un margin : 0 auto.
Tizel
mardi 8 mai 2007 à 19:54
Merci à tous les deux pour vos propositions...

Captain torche, je vais creuser ta proposition

MarvinLeRouge, tu confirme bien ce que j'avais remarqué. J'ai finalement opté pour une largeur de design fixe... C'est pas la solution idéale, mais beaucoup de site pro décident de faire ainsi, c'est sans doute que ce qui est le plus simple à gérer.

Tizel
Slimer
mardi 8 mai 2007 à 20:49
Hum tu peux essayer la solution suivante

CODE
tu place ta premiere colonne comme ceci:
position: absolute;
float: left;
top : 0%;
left: 0%;
width : 100px;
height : 250px;

deuxieme colonne
position : relative;
float: left;
top : 0%;
left: 20%;
width : 100px;
height : 250px;

troisieme colonne
position : relative;
float: left;
top : 0%;
left: 40%;
width : 100px;
height : 250px;


via la position absolute de la premiere colonne tu va determiner une colonne de repere qui ets caller sur tout les navigateur a gauche grace au float: left
puis les autres vus qu'elles sont en relative doivent se mettre en dessous de ta colonne repere sauf que tu as mit un top 0% et un left : 20% donc elles vont se mettre a coté et non en dessous de la colonne repere


j'espere que sa repond a ta probleme wink.gif
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.