3 colonnes fixes, centrale en premier

Bonjour,

Je cherche à effectuer une mise en page comme visible ici http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/design-trois-colonnes-positionnement-flottant

Mais :
Je voudrais que le div le plus haut soit le contenu de la colonne centale ou bien que le contenu de la colonne centrale soit tout de suite après le contenu de l'entête et ce pour des raisons de référencement.

Est ce possible car de mon coté pas moyen d'obtenir quelque chose qui fonctionne.

Merci de votre aide

Bonjour,

Je ne suis pas certain d'avoir bien saisi ta demande… mais si c'est ce que je crois, voici une piste:

[b][#black]XHTML[/#][/b]

<div id="header">Partie supérieure</div>

<div id="conteneur">
	
	<div id="centre">
	Contenu principal. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam…
	</div>

	<div id="gauche">
	Colonne de gauche
	</div>

	<div id="droite">
	Colonne de droite
	</div>
	
</div>



[b][#black]CSS[/#][/b]

#conteneur {position:relative;}
#centre {padding:0 200px;}
#gauche,#droite {position:absolute; top:0; width:200px;}
#droite {right:0;}

Bonjour,

C'est presque parfait. J'ai ajouté quelques elements mais je voudrais maintenant centrer le tout au centre de l'ecran. Et pas moyen sans que ceci me deplace la colonne de gauche !

XHTML :

<div id="header">Partie supérieure</div>

<div id="conteneur">
	
	<div id="centre">
	Contenu principal. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam…
	</div>

	<div id="gauche">
	Colonne de gauche
	</div>

	<div id="droite">
	Colonne de droite
	</div>
	
</div>

CSS :

#conteneur {position:relative; background-color:#33FF99; width:766px;}
#centre {padding:0 144px; background-color:#FF0000;}
#gauche,#droite {position:absolute; top:0; width:144px; background-color:#FFCC00;}
#droite {right:0; background-color:#00CCFF;}

#header {background-color:#FFCCFF; width:766px;}
#footer {background-color:#00CC00; width:766px;}

Quelqu'un a une idée ?

neutronweb a écrit :
Je voudrais que (...) le contenu de la colonne centrale soit tout de suite après le contenu de l'entête et ce pour des raisons de référencement.

Raisons mal établies par ailleurs, mais passons.
Quelque chose qui peut être intéressant à mettre en place si ça n'est pas déjà le cas: des liens d'évitement permettant de sauter le bloc principal de contenu pour accéder directement au menu, ou bien des liens d'accès rapide en début de page par exemple. Il y a un article à ce propos dans les tutoriels d'Alsacréations, rubrique accessibilité.

neutronweb a écrit :
J'ai ajouté quelques elements mais je voudrais maintenant centrer le tout au centre de l'ecran.

Il te suffit de centrer div#conteneur (ou peut-être son bloc parent s'il y en a un) via la technique des marges automatiques, par exemple.
Il y a un article à ce sujet dans les tutoriels d'Alsacréations, rubrique «# Faire une mise en page sans tableaux».

neutronweb a écrit :
Et pas moyen sans que ceci me deplace la colonne de gauche !

Pas bien compris cette remarque. Tu veux centrer ton contenu sauf la colonne de gauche qui doit rester tout à gauche?

neutronweb a écrit :
Quand tu dit "Raisons mal établies par ailleurs, mais passons" je veux bien des précisions là dessus si possible ?

Justement, il y a peu de précisions à donner. L'information selon laquelle le texte placé en premier dans la page aurait plus de poids que le reste du contenu circule pas mal, mais à ma connaissance elle n'est pas démontrée et relève de vagues suppositions.
Personnellement, je n'en tiens pas compte.

neutronweb a écrit :
En fait je veux totu centrer mais si je place un div global qui contien tout le code cité ci-dessus et que je le place en text-align: center;

text-align: center pour du centrage horizontal de blocs? Ça me semble mal barré.

neutronweb a écrit :
As tu une idée de la raison ?

Sans avoir le code exact ou, mieux, la page en ligne, non, aucune idée.

Voilà le code en question :

CSS :

#conteneur {position:relative; background-color:#33FF99; width:766px;}
#centre {padding:0 144px; background-color:#FF0000;}
#gauche,#droite {position:absolute; top:0; width:144px; background-color:#FFCC00;}
#droite {right:0; background-color:#00CCFF;}

#header {background-color:#FFCCFF; width:766px;}
#footer {background-color:#00CC00; width:766px;}

XHTML :

<div style="text-align: center;">

<div id="header">Partie supérieure</div>

<div id="conteneur">
	
	<div id="centre">
	Contenu principal. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam…
	</div>

	<div id="gauche">
	Colonne de gauche
	</div>

	<div id="droite">
	Colonne de droite
	</div>
	
</div>
	
<div id="footer">Partie inférieur</div>
	
</div>

As-tu lu l'article que j'évoquais pour le centrage horizontal des blocs? Il semblerait que non.

Non pas encore je suis en train d'en lire pas mal en ce moment même.
Mais je voulai ssurtout comprendre pourquoi la methode que j'ai effectuée ne fonctionne pas.

neutronweb a écrit :
Mais je voulai ssurtout comprendre pourquoi la methode que j'ai effectuée ne fonctionne pas.

Parce que text-align: center centre le texte, et les éléments dont l'affichage est de type "inline" ou "inline-block". Les div sont des éléments dont l'affichage par défaut est de type "block". Donc un text-align: center ne peut pas centrer des div.