probleme de présentation en CSS

[slender]

J'ai modifié récemment mon site en utilisant les CSS plutôt que les tableaux en terme de présentation. La structure est: un header, deux menus droit et gauche et le contenu au milieu. Le probleme est que, au niveau du source, les deux menus sont lus avant le contenu par GG. J'ai vainement essayé de faire passer le contenu avant les menus mais en terme de présentation rien ne colle plus, le contenu s'affiche correctement à sa place mais les menus flottent en dessous.
Est ce que ce problème de référencement survenu dans le cadre de l'utilisation du CSS a - t il été déja abordé ?

 

[Kmacleod]

Hello slender
C'est justement le problème auquel je suis confronté.
Lire le contenu en fin de page ne semble pas bon coté référencement, mon classement recule d'une manière générale.

Par contre j'ai résolu le problème d'afficher dans l'ordre menu gauche, contenu central, menu droite.
Pour celà dans les css, essaye de mettre un float:left sur la page de contenu

Pour info j'ai :
menu gauche : float:left
menu droite ; float:right
le tout dans un conteneur d'une largeur de 800 en position centrale.

Je n'ai pas pu tester encore l'amélioration coté référencement car les modifications sont recentes ;-)

 

[slender]

merci pour ta réponse Kmacleod
Je vais revoir le code dans le sens où tu le dis. Le problème c'est que je me suis mis récemment aux styles et que j'ai l'appréhension de tout foutre en l'air en modifiant le CSS. Je vais aller mettre un float left sur mon contenu et voir ce que cela donne.

 

[oberon]

Il y a plein (des dizaines) de méthodes différentes pour le positionnement CSS c'est ce qui fait à la fois sa force et sa faiblesse (diffculté d'apprentissage), si tu changes de structure HTML il est en effet probable que tu aies à changer de méthdoe de positionnement CSS.

J'ai en géneral d'excellent résultat en mixant du contenu en position absolue et des menus en flottant, le tout dans un conteneur en position relative (ça permet de mettre le contenu en position absolu par rapport à ce conteneur et pas par rapport à body).

 

[mamijo]

un template 3 colonnes que je n'ai pas encore utilisé mais je viens d'essayer de mettre le div "left" aprés le div "main" et cela semble fonctionner, si cela peut t'être utile, c'est vrai qu'il y a de quoi angoisser avec les CSS et que l'on a besoin de modèles qui fonctionnent...

h--p://webdesign.@bout.com/cs/websitetempl@tes/p/bl3coltoplayer.htm (@=a)

Pour le référencement il y a plus 6 mois j'ai vu une trés nette amélioration du positionnement des pages d'un site mono-colonne lorsque j'ai mis l'entête et le pied en fin de fichier, mais je n'ai pas conservé de mesures concrètes, son référencement n'était pas stabilisé et il y avait des améliorations de fond qui ont pu jouer ; j'en ai un autre (XHTML strict) à modifier, avec un référencement bien stabilisé, et comme sur certaines pages je ne vais pas trop toucher au fond je vais faire des mesures "avant" et "aprés"

J'ai bien fait de te répondre : j'avais oublié que mon propre site est en 3 colonnes => je pourrais l'améliorer ... Par contre son référencement n'est pas stabilisé donc pas intéressant à étudier...

 

[slender]

Ouais,
j'ai bien relu la littérature et j'ai le ferme sentiment qu'il faut utiliser une structure CSS mélant les positions absolues pour le contenu et relatives pour les menus droit et gauche. Tu aurais donc raison Oberon.
L'article suivant semble confirmer cela: h**p://openweb.eu.org/articles/initiation_absolue/
Je pense que je vais adopter cette solution.
En effet il me parait impossible de faire passer le contenu AVANT les menus si j'utilise les boites en position float. Le menu gauche se positionne le premier en float left, puis le menu droit en float right puis le contenu en flux normal - c'est à dire entre les deux. Donc au niveau du code HTML pas possible de lire le <div contenu> AVANT les <div menus>, quoi que l'on fasse.
La seule solution à mon avis valable est celle que préconise Oberon:
un conteneur global en position relative, le contenu en position absolue par rapport à ce conteneur et les deux menus en float left et right. I 'm gonna try.

 

[slender]

ou alors, autre solution:
1 div centre en position décalée par un margin qui le centre
2 div menus left et right en position absolue sur les deux côtés.

 

[jeromax]

j'ai ce problème...
la solution de kmacleod ne marche pas, va falloir que je regarde le source en détail.

 

[jeromax]

Arf.....
et le site de ta signature est avec le problème....
<div haut>
<div gauche>
<div droit>
<div centre>
<div bas>

alors qu'il faudrait que <div centre> soit le plus haut possible dans cette liste...

 

[slender]

I know Jeromax, j'y travaille. En ce moment GG lit en premier les liens des menus et ensuite le contenu. Effectivement c'est gênant.

 

[jeromax]

Je viens d'y passer une heure aussi et j'ai pas trouvé comment faire.... :cry:

 

[slender]

Bon c'est fait. Il faut employer la méthode suivante:
Le header en premier.
le Div content placé au milieu en créant une marge gauche et une marge droite identiques
les deux Div menu_gauche et menu_droit en position absolue - avec un width égal à la marge. Et ça marche.

#content {
margin-left: 15%;
margin-right: 15%;

#menu_gauche {
position: absolute;;
width: 15%;

#menu_droit {
position: absolute;
width: 15%;

Voilà pour l'essentiel du placement en largeur.

 

[jeromax]

Ca ne fonctionne pas non plus... :cry:

J'ai fait une "page" on ne peut plus simple pour pouvoir tester correctement. Le but est de remplir la balise style pour que l'affichage soit "comme on veut", cad avec divgauche, divCentre et divDroite sur la même ligne sans modifier le code html (juste la balise style)

<head>
<style>
#divHaut{background-color:#FF0000;}
#divGauche{background-color:#00FF00;position:absolute;width:15%;}
#divCentre{background-color:#0000FF;margin-left:15%;margin-right:15%;}
#divDroite{background-color:#FFFF00;position:absolute;width:15%;}
#divBas{background-color:#00FFFF;}
</style>
</head>
<body>
<div id="divHaut">divHaut</div>
<div id="divGauche">divGauche</div>
<div id="divCentre">divCentre</div>
<div id="divDroite">divDroite</div>
<div id="divBas">divbas</div>
</body>

la div droite est toujours trop bas (testé IE6 et firefox)....
Un panier garni à celui ou celle qui y arrivera ! ! :wink:

 

[jeromax]

C'est moi qui gagne le panier ! ! !!

<head>
<style>
body{margin:0;}
#divHaut{background-color:#FF0000;height:50px;}
#divGauche{background-color:#00FF00;position:absolute;width:15%;top:50px;}
#divCentre{background-color:#0000FF;margin-left:15%;margin-right:15%;}
#divDroite{background-color:#FFFF00;position:absolute;width:15%;right:0;top:50px;}
#divBas{background-color:#00FFFF;position:relative;}
</style>
</head>
<body>
<div id="divHaut">divHaut</div>
<div id="divCentre">divCentre</div>
<div id="divGauche">divGauche</div>
<div id="divDroite">divDroite</div>
<div id="divBas">divbas</div>
</body>

Cela permet même de remonter divCentre d'un cran dans le code ! !
Wahooooooo ! !!

(fonctionne IE et firefox)

 

[slender]

Tiens Jeromax, il te manquais juste un margin right = 0 dans le div droit

<head>
<style>
body { margin: 0; padding: 0; }
#divHaut{background-color:#FF0000; height: 70px; }
#divCentre{background-color:#33FFFF; margin-left:15%; margin-right:15%; font-size: 60px;}
#divGauche{background-color:#00FF00; position:absolute; width:15%; top: 70px;}
#divDroite{background-color:#FFFF00; position:absolute; width:15%; right: 0; top: 70px;}
#divBas{background-color:#00FFFF; text-align: center;}
</style>
</head>
<body>
<div id="divHaut">divHaut</div>
<div id="divCentre">divCentre <br />VOILI VOILA.... il reste plus qu'a décorer</div>
<div id="divGauche">divGauche<br />mon menu à gauche</div>
<div id="divDroite">divDroite<br />mon menu à droite</div>
<div id="divBas">copyright - liste des partenaires - plan du site</div>
</body>

Juste un peu de foie gras dans le panier garni, ça ira.

 

[slender]

comme quoi les grands esprits...

 

[slender]

Le seul probleme avec cette méthode c'est qu'on risque d'avoir des menus droits et gauche qui ne vont pas jusqu'en bas puisque c'est le Div centre qui repousse le pied de page.
Je travaille à résoudre ça.

 

[jeromax]

exact.
et ça ne fonctionne plus si on entoure tout le code avec un div conteneur (pour centrer tout ça sur la page par exemple)

 

[jeromax]

2ième panier pour moi ! ! :wink:

<head>
<style>
body{text-align: center;}
#divConteneur {position: relative;width: 990px;margin-left:auto;margin-right:auto;text-align:left;}
#divHaut{background-color:#FF0000;height:50px;}
#divGauche{background-color:#00FF00;position:absolute;width:15%;top:50px;}
#divCentre{background-color:#0000FF;margin-left:15%;margin-right:15%;width:auto;}
#divDroite{background-color:#FFFF00;position:absolute;width:15%;right:0;top:50px;}
#divBas{background-color:#00FFFF;position:relative;text-align:center;}
</style>
</head>
<body>
<div id="divConteneur">
<div id="divHaut">divHaut</div>
<div id="divCentre">divCentre</div>
<div id="divGauche">divGauche</div>
<div id="divBas">divbas</div>
<div id="divDroite">divDroite</div>
</div>
</body>

Je te laisse faire le positionnement de divBas en fonction de divGauche ou divDroite ou divCentre ...
Bon courage, parce que là.... je crois que ça ne va pas être simple....

 

[slender]

Est ce que tu as remarqué qu'en utilisant ton code qui, je dois le dire, est d'une remarquable concision, si le Div centre commence par une balise <hn>, ceci introduit un décalage vetrs le bas du contenu?