IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

WordPress PHP Discussion :

un menu horizontal


Sujet :

WordPress PHP

  1. #1
    Expert confirmé
    Avatar de laurentSc
    Homme Profil pro
    Webmaster débutant perpétuel !
    Inscrit en
    Octobre 2006
    Messages
    10 339
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 60
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant perpétuel !
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 339
    Points : 5 724
    Points
    5 724
    Billets dans le blog
    1
    Par défaut un menu horizontal
    Bonjour,

    je souhaite mettre dans mon pied de page un menu horizontal. J'ai donc mis dans mon widget pied de page 1 un html personnalisé :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    <ul class="menu">
    	<li>&nbsp;</li>
    	<li><a class="actif" href="/?page_id=123">nous contacter</a></li>
    	<li><a href="/?page_id=150">vos témoignages</a></li>
            <li><a href="/?page_id=173">Mentions légales</a>	</li>
    </ul>
    et dans le CSS additionnel
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    .menu {
        display: flex;                /* Transformation en flexbox */
      }
    (en fait, c'est plus compliqué que ça mais j'ai enlevé les autres règles pour me centrer sur ce problème).
    Si je teste ce code en dehors de Wordpress, il produit bien un menu horizontal, mais nada si je le met dans wordpress (le menu est alors vertical).

    Mon thème est simplement Twenty-Twenty. Si je désactive tous les plugins, c'est pareil. Savez-vous d'où ça pourrait venir ?
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

    Si la discussion est résolue, merci de cliquer sur le bouton

  2. #2
    Membre confirmé Avatar de licardentaistor
    Homme Profil pro
    Administrateur de base de données
    Inscrit en
    Juillet 2021
    Messages
    314
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Manche (Basse Normandie)

    Informations professionnelles :
    Activité : Administrateur de base de données

    Informations forums :
    Inscription : Juillet 2021
    Messages : 314
    Points : 453
    Points
    453
    Par défaut
    hello,

    tu peux t'aider du devTools de Chrome (F12) pour voir ce qui ne va pas sur ton CSS.

    https://developer.chrome.com/docs/devtools/css/

  3. #3
    Expert confirmé
    Avatar de laurentSc
    Homme Profil pro
    Webmaster débutant perpétuel !
    Inscrit en
    Octobre 2006
    Messages
    10 339
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 60
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant perpétuel !
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 339
    Points : 5 724
    Points
    5 724
    Billets dans le blog
    1
    Par défaut
    Merci, cela ressemble aux outils de développement de Firefox (que je connais mieux). Cela dit, même avec l'outil de Firefox, je ne m'en sortais pas et je m'en suis sorti en utilisant un autre code de menu horizontal...

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    <div class="menu">
        <a href="/?page_id=123" class="btn">nous contacter</a>
        <a href="/?page_id=150" class="btn">vos témoignages</a>
        <a href="/?page_id=173" class="btn">Mentions légales</a>
    </div>

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    .menu{
      background:#1b1b2b;
      padding:10px;
      text-align:center;
      font-family: 'Oswald', sans-serif;
    }
     
    .btn{
      color:#999;
      background:white;
      padding:10px 20px;
      font-size:15px;
      text-decoration:none;
      letter-spacing:2px;
    }
     
    .btn:hover{
      border:none;
      background:lightblue;
      padding:20px 20px;
      color:#1b1b1b;
      text-decoration:underline;
    }
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

    Si la discussion est résolue, merci de cliquer sur le bouton

  4. #4
    Responsable Systèmes


    Homme Profil pro
    Gestion de parcs informatique
    Inscrit en
    Août 2011
    Messages
    17 351
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Gestion de parcs informatique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : Août 2011
    Messages : 17 351
    Points : 42 822
    Points
    42 822
    Par défaut
    Mieux vaut le géer depuis WordPress. Regardes dans les options du menu si tu as la possibilité de mettre un menu vertical.
    Ma page sur developpez.com : http://chrtophe.developpez.com/ (avec mes articles)
    Mon article sur le P2V, mon article sur le cloud
    Consultez nos FAQ : Windows, Linux, Virtualisation

  5. #5
    Membre du Club
    Homme Profil pro
    IDE
    Inscrit en
    Janvier 2015
    Messages
    39
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loire (Rhône Alpes)

    Informations professionnelles :
    Activité : IDE

    Informations forums :
    Inscription : Janvier 2015
    Messages : 39
    Points : 58
    Points
    58
    Par défaut
    Bonjour. Si la solution flex ne marche pas c'est qu'il doit y avoir un conflit avec le thème. Essayer de changer le nom de la classe déjà, en effet, ".menu" dans un thème préexistant... il y a de grandes chances que le terme soit déjà pris (mais ça vous le saurez vraiment avec l'inspecteur F12 du browser). Vous pourriez aussi augmenter le poids du sélecteur, et même mettre un !important pour tester...

  6. #6
    Expert confirmé
    Avatar de laurentSc
    Homme Profil pro
    Webmaster débutant perpétuel !
    Inscrit en
    Octobre 2006
    Messages
    10 339
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 60
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant perpétuel !
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 339
    Points : 5 724
    Points
    5 724
    Billets dans le blog
    1
    Par défaut
    Merci pour vos réponses chrtophe et Olivier C, mais comme j'ai actuellement un truc qui marche, je vais appliquer la devise qu'on voit un peu partout
    être fainéant est une qualité importante pour un programmeur
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

    Si la discussion est résolue, merci de cliquer sur le bouton

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. menu horizontal css
    Par Bibouda dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 09/01/2006, 03h29
  2. Menu Horizontal demande d'informations
    Par M1000 dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 22/12/2005, 14h34
  3. prob menu horizontal
    Par tinkye_winkye dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 25/01/2005, 12h19

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo