Menu CSS en liste et référencement

Discussion dans 'Référencement Google' créé par yesnie, 19 Mai 2009.

  1. yesnie
    yesnie Nouveau WRInaute
    Inscrit:
    27 Mars 2007
    Messages:
    44
    J'aime reçus:
    0
    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 !
     
  2. SpeedAirMan
    SpeedAirMan WRInaute passionné
    Inscrit:
    2 Juin 2007
    Messages:
    2 391
    J'aime reçus:
    0
    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é.
     
  3. yesnie
    yesnie Nouveau WRInaute
    Inscrit:
    27 Mars 2007
    Messages:
    44
    J'aime reçus:
    0
    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é ?
     
  4. nickargall
    nickargall WRInaute accro
    Inscrit:
    13 Juin 2005
    Messages:
    6 658
    J'aime reçus:
    0
    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
     
  5. SpeedAirMan
    SpeedAirMan WRInaute passionné
    Inscrit:
    2 Juin 2007
    Messages:
    2 391
    J'aime reçus:
    0
    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).



    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... :p
     
  6. yesnie
    yesnie Nouveau WRInaute
    Inscrit:
    27 Mars 2007
    Messages:
    44
    J'aime reçus:
    0
    et concretement, le code position:absolue je le met dans le CSS ?
    Et comment est-il constitué ?
     
  7. nickargall
    nickargall WRInaute accro
    Inscrit:
    13 Juin 2005
    Messages:
    6 658
    J'aime reçus:
    0
  8. yesnie
    yesnie Nouveau WRInaute
    Inscrit:
    27 Mars 2007
    Messages:
    44
    J'aime reçus:
    0
    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 :

    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 ?
     
  9. nickargall
    nickargall WRInaute accro
    Inscrit:
    13 Juin 2005
    Messages:
    6 658
    J'aime reçus:
    0
    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


    Code:
    .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/
     
  10. yesnie
    yesnie Nouveau WRInaute
    Inscrit:
    27 Mars 2007
    Messages:
    44
    J'aime reçus:
    0
    Merci pour cette réponse.
    Je vais d'essayer avec le code indiqué et le menu se retrouve au milieu de ma page ...
     
  11. nickargall
    nickargall WRInaute accro
    Inscrit:
    13 Juin 2005
    Messages:
    6 658
    J'aime reçus:
    0
    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:
     
Chargement...
Similar Threads - Menu CSS liste Forum Date
menu css vertical avec longue liste Développement d'un site Web ou d'une appli mobile 16 Juin 2010
Mieux vaut-il un select ou un menu déroulant CSS Développement d'un site Web ou d'une appli mobile 15 Mars 2017
MENU VERTICAL CSS (3 minis questions) Développement d'un site Web ou d'une appli mobile 4 Décembre 2014
MON MENU CSS ne centre pas Développement d'un site Web ou d'une appli mobile 1 Décembre 2014
[résolu] Elargir un menu en CSS à 100% du contenant Développement d'un site Web ou d'une appli mobile 6 Octobre 2014
Menus déroulants (html + css) et Référencement Débuter en référencement 11 Septembre 2013
Indexation avec fil d'ariane composé de menus déroulants css Référencement Google 27 Avril 2013
(CSS) diffréntes couleur pour liens menu Développement d'un site Web ou d'une appli mobile 18 Janvier 2012
Menu déroulant sur image css Développement d'un site Web ou d'une appli mobile 5 Janvier 2012
Probleme Menu JS + CSS Développement d'un site Web ou d'une appli mobile 24 Février 2011
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice