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
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 TenrahLim 18 avril 2017 à 11:11:14

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 SavoirTutoriel WAMP • Nouvelle F.A.Q. PHP
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
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 SavoirTutoriel WAMP • Nouvelle F.A.Q. PHP
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 TenrahLim 18 avril 2017 à 13:37:13

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
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 SavoirTutoriel WAMP • Nouvelle F.A.Q. PHP
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
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
20 avril 2017 à 22:10:31

Une âme charitable pour m'aider ? Lol
Demoiselle (constamment) en détresse
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 SavoirTutoriel WAMP • Nouvelle F.A.Q. PHP
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é.
  • Editeur
  • Markdown