Mise en page CSS

[Tizel]

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 )

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]

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é

[MarvinLeRouge]

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]

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]

Hum tu peux essayer la solution suivante

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

Modifié 8 Mai 2007 par Slimer