Partage

Menu déroulant

Sujet résolu

18 avril 2017 à 0:46:58

Coucou tout le monde

J'espère que vous allez bien

Je suis de retour avec mon blog que voici : NewAdultAddict

Grâce à vous j'avais enfin réussi à réaliser un menu déroulant et aujourd'hui je reviens vers vous car j'aimerais faire une séparation verticale de mon sous-menu : Livres classés par auteur

Au lieu de :

[ A - E ]

[ F - K ]

J'aimerais aligner les deux : [ A - E ] [ F - K ]

Mais je ne sais pas comment procéder, je pense que cela se passe au niveau de l'html mais je ne sais pas comment faire

<ul id="menu-deroulant">

<li>
<a href="http://newadultaddict.blogspot.fr/">ACCUEIL</a>
</li>
<span style="color: #ef9ea9; font-size: 20px;">•</span>
<li>
<a href="#">LIVRES CLASSES PAR AUTEUR</a>
<ul>
<li><a href="http://newadultaddict.blogspot.fr/p/blog-page_32.html">[ A - E ]</a></li>
<li><a href="http://newadultaddict.blogspot.fr/p/50-nuisances-dearl-grey.html">[ F - K ]</a></li>
<li><a href="http://newadultaddict.blogspot.fr/p/livres-classes-par-auteur-j-q.html">[ L - Q ]</a></li>
<li><a href="http://newadultaddict.blogspot.fr/p/livres-classes-par-auteur-r-z.html">[ R - Z ]</a></li>
</ul>
</li>
<span style="color: #ef9ea9; font-size: 20px;">•</span>
<li>
<a href="http://newadultaddict.blogspot.fr/p/ma-pile-lire-a.html">MY WISHLIST</a>
</li>
<span style="color: #ef9ea9; font-size: 20px;">•</span>
<li>
<a href="#">A PROPOS DE MOI</a>
<ul>
<li><a href="#">SAUTE D’HUMEUR</a></li>
<li><a href="http://newadultaddict.blogspot.fr/p/je-mappelle-mathilde-et-jai-28-ans.html">FOCUS</a></li>
<li><a href="mailto:m.matild@hotmail.com"">CONTACT</a></li>
</ul>
</li>
</ul>

Voici mon code html pour mon menu déroulant

Merci par avance, bisous tout le monde

-
Edité par Matild 18 avril 2017 à 0:48:43

Demoiselle (constamment) en détresse

Fabien RENAUD

18 avril 2017 à 11:10:38

Salut,

Essaies de mettre deux lien sur ton même objet <li> :

<li><a href="http://newadultaddict.blogspot.fr/p/blog-page_32.html">[ A - E ]</a><a href="http://newadultaddict.blogspot.fr/p/50-nuisances-dearl-grey.html">[ F - K ]</a></li>
<li><a href="http://newadultaddict.blogspot.fr/p/livres-classes-par-auteur-j-q.html">[ L - Q ]</a><a href="http://newadultaddict.blogspot.fr/p/livres-classes-par-auteur-r-z.html">[ R - Z ]</a></li>

Et si jamais le fait que tes liens soit collés te dérange, rajoutes une classe à tes liens, ou un paramètre style="", et définis un margin-right de quelques px.

Bonne chance !

-
Edité par Fabien RENAUD 18 avril 2017 à 11:11:14

elyppire

18 avril 2017 à 11:51:03

Salut,

Structurellement, je trouve dommage de mettre deux liens dans un li Cela fonctionne tout à fait, mais on perd la sémantique d'une liste.

Je serais plutôt d'avis de conserver un lien par li mais d'afficher un li sur deux à droite du précédent.

-
Edité par elyppire 18 avril 2017 à 11:52:21

Retrouvez-moi aussi sur Zeste de Savoir • Tutoriel WAMP • Nouvelle F.A.Q. PHP

Matild

18 avril 2017 à 12:27:12

TenrahLim : J'ai déjà essayer, ça ne fonctionne pas

elyppire : C'est exactement ça que j'aimerais faire mais je ne sais pas comment, je suis vraiment une novice lol

Merci pour vos réponses

Demoiselle (constamment) en détresse

elyppire

18 avril 2017 à 13:16:28

Je ne sais pas si tu es à l'aise en anglais, mais voici un lien intéressant : https://csswizardry.com/2010/02/mutiple-column-lists-using-one-ul/

Comme toujours je te conseille de tester et comprendre le code sur une page à part, et ensuite essayer de l'intégrer à ton menu déroulant.

Retrouvez-moi aussi sur Zeste de Savoir • Tutoriel WAMP • Nouvelle F.A.Q. PHP

Fabien RENAUD

18 avril 2017 à 13:36:16

Salut,

En effet, garder un lien par li parait plus logique, voici donc une alternative :

<html>
<head>
  <style>
    .list li {
      display: block;
    }

    .list li:nth-child(odd) {
      float: left;
    }
  </style>
</head>
<body>
  <ul class="list">
    <li>link1</li>
    <li>link2</li>
    <li>link3</li>
    <li>link4</li>
  </ul>
</body>
</html>

L'argument :nth-child(odd) permet d'affecter un élément sur deux de ta liste (les éléments impaires pour être exact).

J'ai testé, ça fonctionne plutôt bien à réadapter selon tes besoins.

-
Edité par Fabien RENAUD 18 avril 2017 à 13:37:13

Matild

18 avril 2017 à 15:40:09

J'ai mis ca en Html :

<ul id="menu-deroulant">

<li>
<a href="http://newadultaddict.blogspot.fr/">ACCUEIL</a>
</li>
<span style="color: #ef9ea9; font-size: 20px;">•</span>
<li>
<a href="#">LIVRES CLASSES PAR AUTEUR</a>
<ul class="list">
<li><a href="http://newadultaddict.blogspot.fr/p/blog-page_32.html">[ A - E ]</a></li>
<li><a href="http://newadultaddict.blogspot.fr/p/50-nuisances-dearl-grey.html">[ F - K ]</a></li>
</ul>
<ul class="list">
<li><a href="http://newadultaddict.blogspot.fr/p/livres-classes-par-auteur-j-q.html">[ L - Q ]</a></li>
<li><a href="http://newadultaddict.blogspot.fr/p/livres-classes-par-auteur-r-z.html">[ R - Z ]</a></li>
</ul>
</li>
<span style="color: #ef9ea9; font-size: 20px;">•</span>
<li>
<a href="http://newadultaddict.blogspot.fr/p/ma-pile-lire-a.html">MY WISHLIST</a>
</li>
<span style="color: #ef9ea9; font-size: 20px;">•</span>
<li>
<a href="#">A PROPOS DE MOI</a>
<ul>
<li><a href="#">SAUTE D’HUMEUR</a></li>
<li><a href="http://newadultaddict.blogspot.fr/p/je-mappelle-mathilde-et-jai-28-ans.html">FOCUS</a></li>
<li><a href="mailto:m.matild@hotmail.com"">CONTACT</a></li>
</ul>
</li>
</ul>

et ça en CSS :

.list li {
      display: block;
    }
 
    .list li:nth-child(odd) {
      float: left;
    }

sa n'aligne rien et me supprime mes deux premiers liens

-
Edité par Matild 18 avril 2017 à 15:42:07

Demoiselle (constamment) en détresse

elyppire

18 avril 2017 à 16:31:17

L'objectif est de n'avoir qu'un seul ul. Essaie déjà de tout mettre en un seul.

Retrouvez-moi aussi sur Zeste de Savoir • Tutoriel WAMP • Nouvelle F.A.Q. PHP

Matild

18 avril 2017 à 16:43:30

J'ai essayer aussi, ça ne fonctionne, tout reste les uns en dessous des autres

Demoiselle (constamment) en détresse

Fabien RENAUD

18 avril 2017 à 21:36:45

Pour ma part, ça fonctionne très bien : https://puu.sh/vowAh/ab7b9ffe20.png

Matild

18 avril 2017 à 22:54:24

Je ne comprend pas ce que je fais de travers lol

Est-ce que je n'aurais pas un truc dans le css qui empêcherai que ça s'affiche ?

Voici le code html de mon menu déroulant :

<ul id="menu-deroulant">
 
<li>
<a href="http://newadultaddict.blogspot.fr/">ACCUEIL</a>
</li>
<span style="color: #ef9ea9; font-size: 20px;">•</span>
<li>
<a href="#">LIVRES CLASSES PAR AUTEUR</a>
<ul class="list">
<li><a href="http://newadultaddict.blogspot.fr/p/blog-page_32.html">[ A - E ]</a></li>
<li><a href="http://newadultaddict.blogspot.fr/p/50-nuisances-dearl-grey.html">[ F - K ]</a></li>
<li><a href="http://newadultaddict.blogspot.fr/p/livres-classes-par-auteur-j-q.html">[ L - Q ]</a></li>
<li><a href="http://newadultaddict.blogspot.fr/p/livres-classes-par-auteur-r-z.html">[ R - Z ]</a></li>
</ul>
</li>
<span style="color: #ef9ea9; font-size: 20px;">•</span>
<li>
<a href="http://newadultaddict.blogspot.fr/p/ma-pile-lire-a.html">MY WISHLIST</a>
</li>
<span style="color: #ef9ea9; font-size: 20px;">•</span>
<li>
<a href="#">A PROPOS DE MOI</a>
<ul>
<li><a href="#">SAUTE D’HUMEUR</a></li>
<li><a href="http://newadultaddict.blogspot.fr/p/je-mappelle-mathilde-et-jai-28-ans.html">FOCUS</a></li>
<li><a href="mailto:m.matild@hotmail.com"">CONTACT</a></li>
</ul>
</li>
</ul>

et le code Css :

/* Menu déroulant
----------------------------------------------- */
#menu-deroulant, #menu-deroulant ul {
    overflow:visible;
    padding: 0px;
    margin: 0px;
    list-style: none;
    z-index : 10;
}

#menu-deroulant {
    margin-left: -30px;
    height: 32px;
    width: 1158px;
    margin-top: 30px;
    text-align: center;
    background: #ffffff;
}

#menu-deroulant li {
    display: inline-block;
    position: relative;
    float: none;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0px;
    border-style: solid;   /* Style de la bordure  */
    border-width: 1px;   /* Epaisseur de la bordure  */
    border-color: #ffffff;   /* Couleur de la bordure  */
    background-color : #ffffff;
}

#menu-deroulant ul li {
    border-style: solid;   /* Style de la bordure  */
    border-width: 1px;   /* Epaisseur de la bordure  */
    border-color: #ffffff;   /* Couleur de la bordure  */
    background-color : #ffffff;
    display: inherit;
    float: none;
}

#menu-deroulant a {
    display: block;
    color: #b4b4b4;
    background-color: #transparent;
    font-size: 13px;
    font-weight : bold;
    font-family: ARIAL;
}

#menu-deroulant ul {
    position: absolute;
    left: -999em;
    text-align: center;
}

#menu-deroulant li:hover ul {
    left: 0; /* remplace le left: auto existant */
}

#menu-deroulant a:hover { 
    color: #ffffff;
    background: #ef9ea9;
}

-
Edité par Matild 19 avril 2017 à 17:01:54

Demoiselle (constamment) en détresse

Matild

20 avril 2017 à 22:10:31

Une âme charitable pour m'aider ? Lol

Demoiselle (constamment) en détresse

elyppire

21 avril 2017 à 9:07:20

Salut,

Je ne sais pas comment tu as habitude de faire, mais dans une telle situation j'ai habitude de faire une page à part avec juste le menu et juste le CSS du menu. Cela peut aider à ne pas se faire perturber par du CSS d'ailleurs. Est-ce que tu as essayé cela ?

Retrouvez-moi aussi sur Zeste de Savoir • Tutoriel WAMP • Nouvelle F.A.Q. PHP

Matild

21 avril 2017 à 17:41:58

J'ai réussi à faire ce que je voulais en utilisant :

display: table-cell;

et j'ai jouer avec le padding pour les mettre en place, c'est pas très propre mais pour l'instant ça restera comme ça lol

-
Edité par Matild 22 avril 2017 à 17:35:47

Demoiselle (constamment) en détresse

Menu déroulant

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.

× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.

Menu déroulant

Menu déroulant

Supprimer

Modérer

Signaler le message aux modérateurs