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

Mise en page CSS Discussion :

Menu principal décalé par sous menu


Sujet :

CSS

  1. #1
    Membre à l'essai
    Profil pro
    Inscrit en
    Juin 2013
    Messages
    25
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : Juin 2013
    Messages : 25
    Points : 16
    Points
    16
    Par défaut Menu principal décalé par sous menu
    Bonjour à tous et à toutes,

    je suis face à un léger problème, je suis en train de designer le nouveau menu de mon site web.
    Cependant, la largeur du sous menu décale le menu principal lorsque je passe sur books et download, je ne sais pas si tout est bien clair, mais je vous laisse regarder ici: http://lagrotte.be/new/

    D'avance merci !

  2. #2
    Invité
    Invité(e)
    Par défaut
    Bonjour,
    il faute mettre :
    - le menu niveau 1 en position:relative;,
    - les sous-menus en position:absolute;.

    N.B. Pourquoi ne pas utiliser QUE des <ul><li> ?

    Enlever aussi font-size:11px; sur le <body>.

    => A voir aussi :

  3. #3
    Expert confirmé
    Avatar de rodolphebrd
    Homme Profil pro
    Indépendant
    Inscrit en
    Novembre 2012
    Messages
    2 336
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Indépendant
    Secteur : Conseil

    Informations forums :
    Inscription : Novembre 2012
    Messages : 2 336
    Points : 5 443
    Points
    5 443
    Par défaut
    Bonjour,

    un menu à base de DL-DT-DD comprenant des UL-LI n'est pas la meilleure façon de procéder.

    1. Partez d'une liste non-ordonnée;
    2. définissez des largeurs aux items;
    3. lisez les ressources du forum: http://css.developpez.com/galerie/


    [edit] le bug : j'étais sûr d'avoir posté avant toi, Jêrome!!
    Pensez à
    lire les règles du forum effectuer une recherche préalable
    utiliser la balise code (#) éditer votre code sur Codepen, Dabblet, Jsfiddle
    clore votre post avec le bouton

  4. #4
    Membre à l'essai
    Profil pro
    Inscrit en
    Juin 2013
    Messages
    25
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : Juin 2013
    Messages : 25
    Points : 16
    Points
    16
    Par défaut
    Merci à tous les deux pour vos réponses,

    qu'entendez vous par le menu niveau 1 ? c'est bien "photographers,books,etc" ? Si oui j'ai effectué la modif et çà ne fonctionne pas...

    Concernant les dl dd dt, j'ai suivi un tutoriel. Étant très loin de maîtriser le code, et celui-ci étant loin de ma profession comme vous pouvez le voir j'ai suivi le tuto qui était à mes yeux le plus simple.

    Encore merci !

  5. #5
    Expert confirmé
    Avatar de rodolphebrd
    Homme Profil pro
    Indépendant
    Inscrit en
    Novembre 2012
    Messages
    2 336
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Indépendant
    Secteur : Conseil

    Informations forums :
    Inscription : Novembre 2012
    Messages : 2 336
    Points : 5 443
    Points
    5 443
    Par défaut
    Menu et sous-menu....

    Avec comme base.
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <ul id="menu">
      <li><a href="#">Lorem</a></li>
      <li><a href="#">Sed</a></li>
      <li><a href="#">Ut labore</a>
        <ul>
          <li> <a href="#">dfgdfg</a></li>
          <li><a href="#">sdfsd</a></li>
        </ul>
      </li>
      <li><a href="#">szffsff</a></li>
    </ul>
    Code : 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
    24
    25
    26
    27
    28
    29
    #menu {
    	list-style: none;
    }
    #menu>li {
    	display: inline-block;
      position: relative;
    }
    #menu ul {
    	list-style:none;
    	position: absolute;
    	top: 1.3em;
    	left: -2.5em;
    	display: none;
      padding-top: 0.2em;
    }
    #menu li:hover ul{
    	display:block;
    }
    a{
      text-decoration: none;
      display: inline-block;
      width: 70px;
      border: 1px solid silver;
      text-align: center;
      color: gray;
    }
    a:hover{
      color: white;
      background: silver;
    Edit: pour le fun, car j'ai le temps :http://codepen.io/anon/pen/xlcgd
    Pensez à
    lire les règles du forum effectuer une recherche préalable
    utiliser la balise code (#) éditer votre code sur Codepen, Dabblet, Jsfiddle
    clore votre post avec le bouton

  6. #6
    Invité
    Invité(e)
    Par défaut
    Citation Envoyé par cccb24 Voir le message
    ...et çà ne fonctionne pas...
    Ce n'est pas très constructif.
    Montrer le code modifié aurait été plus efficace.

    Ligne 49 du CSS :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    dl {
        display: block;
        float: left;
        height: 10px;
        margin: 0;
        padding: 0;
        position: relative; /* AJOUTER */
    }
    Ligne 105 du CSS :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    dl dd {
        display: none;
        position: absolute; /* AJOUTER */
    }
    Je t'encourage néanmoins à suivre les liens que j'ai fournis, et à suivre un tuto plus "sérieux".

  7. #7
    Membre à l'essai
    Profil pro
    Inscrit en
    Juin 2013
    Messages
    25
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : Juin 2013
    Messages : 25
    Points : 16
    Points
    16
    Par défaut
    Pardon j'ai pas les réflexes de développeur, merci pour cette précision. Ca fonctionne parfaitement chez moi !

    Thanks !

    Je vais me pencher sur vos tutos.

  8. #8
    Expert confirmé
    Avatar de rodolphebrd
    Homme Profil pro
    Indépendant
    Inscrit en
    Novembre 2012
    Messages
    2 336
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Indépendant
    Secteur : Conseil

    Informations forums :
    Inscription : Novembre 2012
    Messages : 2 336
    Points : 5 443
    Points
    5 443
    Par défaut
    Ça marche mais c'est bancale car le code n'est pas bon : des display: block; et cursor: pointer; par exemple, inutiles de même que l'architecture HTML....
    Pensez à
    lire les règles du forum effectuer une recherche préalable
    utiliser la balise code (#) éditer votre code sur Codepen, Dabblet, Jsfiddle
    clore votre post avec le bouton

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

Discussions similaires

  1. Ajouter un sous-menu avec flèche dans un menu
    Par beegees dans le forum VB 6 et antérieur
    Réponses: 2
    Dernier message: 21/01/2009, 14h35
  2. Ajout d'un menu et d'un sous menu
    Par hocine dans le forum Langage
    Réponses: 4
    Dernier message: 29/08/2007, 22h47
  3. Display un sous menu : affichage progressif des sous rubriq.
    Par sokette dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 27/12/2005, 17h15
  4. Menu principal et click sous menu
    Par angiosfr dans le forum Agents de placement/Fenêtres
    Réponses: 3
    Dernier message: 22/11/2005, 22h38

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