Menu CSS en liste et référencement

[yesnie]

Bonjour,

J'ai mis en place un menu en liste CSS assez conséquent ( 4 rubriques avec une dizaine de liens par rubrique soit 50 liens en tout).
Ce menu se trouve en haut de toutes mes pages.

Quand j'analyse comment google voit mon site (avec lynx par exemple), je me rends compte qu'il voit l'ensemble du menu ( les 50 liens) puis le contenu de la page dans un deuxième temps.

Je me demandais donc si ce menu ne générait pas le référencement des pages du site.

Merci pour vos réponses !

 

[SpeedAirMan]

Tu peux règler ce "problème" en utilisant un menu latéral au lieu d'un menu horizontal. Il sera alors aisé de faire passer le contenu avant le menu (via un peu de CSS).

Autre avantage : l'accessibilité.

 

[yesnie]

Merci pour ta réponse.
Tu me confirmes donc que mon menu horizontal ne favorise pas le référencement de mes pages ?

Un menu latéral ne s'intégrerait pas (pour le moment en tout cas) dans le design actuel du site. Y'aurait-il une autre possibilité ?

 

[nickargall]

Pour ma part, je ne pense pas qu'un menu très volumineux puisse pénaliser un site ...
A la limite certains vont de dire qu'il est préférable d'avoir le contenu central le plus haut possible dans le code; dans ce cas, place le code du menu en fin de page et, avec le CSS, positionne-le à l'endroit souhaité

Comme ça il apparaît en haut pour l'internaute et en bas pour les moteurs de recherche

 

[SpeedAirMan]

Tu me confirmes donc que mon menu horizontal ne favorise pas le référencement de mes pages ?

Pas mal de référenceurs sont d'accords pour dire que plus le contenu essentiel (sur lequel on souhaite se positionner) se trouve haut dans le code de la page, et plus il a de poids. Alors bien sûr, ce n'est pas essentiel et Google s'adapte très bien quand ce n'est pas le cas, mais je suis d'avis à favoriser tous les "petits plus" car au final on y gagne.

En plus, d'un point de vue accessibilité, c'est plutôt lourd. Imagine les non voyants qui utilisent justement un logiciel comme Lynx ou autre : ils doivent passer manuellement les 50 liens avant d'accéder au contenu qui les intéresse (et celui pour lequel ils sont sur la page).

Un menu latéral ne s'intégrerait pas (pour le moment en tout cas) dans le design actuel du site. Y'aurait-il une autre possibilité ?

Oui : position:absolute;
Via CSS, tu peux faire en sorte de mettre le menu HTML tout en bas de ton code HTML et le positionner tout en haut.



Edit : grillé de quelque secondes...

 

[yesnie]

et concretement, le code position:absolue je le met dans le CSS ?
Et comment est-il constitué ?

 

[nickargall]

oui, le position:absolute; est une propriété CSS. .

Si tu n'est pas réfractaire à l'anglais :
http://www.barelyfitz.com/screencast/html-training/css/positioning/

 

[yesnie]

Bonjour,

J'ai essayé de mettre le petit morceau de code un peu partout dans mon CSS, mais apparement ca ne marche pas. Il me modifie l'affichage du menu sur ma page.

Voici mon code :

.menu{
    position:absolute;
    display:block;
    margin:0;
    padding:0;
    width:1000px;
    }

.menu ul{
    position:absolute;
    display:block;
    width:16px;
	 margin-top:-10px;
	 margin-left:10px;
    /*margin:0;*/
    padding:0;
    }
    
.menu li ul{

    visibility:hidden;
    }

.menu li li ul{
    position:absolute;
    margin-left:265px;
    margin-top:-23px;
    }
    
.menu li{
    list-style:none;
    width:186px;
    height:auto;
    display:inline;
    display:block;
    float:left;
    margin:0;
    padding:0;
    }
    
.menu li li{
    display:block;
    float:none;
    }
    
/* correct a little IE bug */
* html .menu li li{
    display:inline;
    }

.menu a{
    text-align:left;
    background-color: #9cf;
    border:0px #666 solid;
	font-size:small;
	font-family:verdana;
    color:#000;
    display:block;
	height:20px;
    width:350px;
    text-decoration:none;
	font:verdana;
    padding:0px 0;
    margin:0px;
    }
    
.menu a:hover{
    background-color: #eee;
    border:0px #aaa solid;
    }
    
/* for a mozilla better display with key nav */
.menu a:focus{
    background-color: #aaf;
}

a.linkOver{
    background-color: #eee;
    }

A quel endroit dois-je placer le position:absolue et avec quelle valeur ?

 

[nickargall]

Le "position:absolute" est à placer dans ta classe menu; ensuite, tu dois lui affecter une distance par rapport au haut et à gauche de la page ou de l'élément qui le contient

.menu{
    position:absolute;
    top:50px;
    left:50px;
    display:block;
    margin:0;
    padding:0;
    width:1000px;
    }

par contre, le "position:absolute" n'a rien à faire dans les autres éléments de ta classe .menu
tu n'as pas du bien saisir le truc, me trompe-je ?
Fais des recherches sur google avec "position:absolute " et tu trouveras plein d'infos; tu peux aussi aller voir les tutos du site alsacreations :
http://www.alsacreations.com/tutoriels/

 

[yesnie]

Merci pour cette réponse.
Je vais d'essayer avec le code indiqué et le menu se retrouve au milieu de ma page ...

 

[nickargall]

Ben oui, faut que tu l'adaptes aussi ... comment veux tu que je te donne le code exact sans connaître ton site, sa structure, son code CSS ? Va falloir bosser un peu de ton côté si tu veux que ça fonctionne ... :mrgreen: