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 horizontal (qui dépasse à droite) [CSS 3]


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Homme Profil pro
    Infographiste, Webdesigner
    Inscrit en
    Juillet 2012
    Messages
    109
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France, Drôme (Rhône Alpes)

    Informations professionnelles :
    Activité : Infographiste, Webdesigner
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : Juillet 2012
    Messages : 109
    Par défaut Menu horizontal (qui dépasse à droite)
    Bonjour à tous et à toutes,

    Tout d'abord, je tiens à préciser que je suis un infographiste à la base, et je suis un grand débutant en matière de codage CSS. J'ai quelques notions, mais quasiment pas de pratique. Par conséquent, SVP, soyez indulgents.

    J'essaye depuis quelques jours de faire un menu horizontal déroulant. Grâce à un tutoriel que j'ai mis à ma sauce, j'ai réussi à faire celui-ci (voir ci-dessous).


    Voici le code HTML puis le code CSS qui m'ont permis d'y parvenir (avec certains de mes commentaires et d'autres du tutoriel dont je me suis servi)

    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
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
     
    <div class="global">
        <div id='menu'>
        <ul>
           <li class="menu_accueil"><a href='index.php'>Accueil</a></li>
           <li><a href='#'>Menu 1</a>
              <ul>
              <div id="menu_gauche">
                  <li><h2>Section 1 sous-menu</h2></li>
                  <li><a href='#'>- Sous menu 1</a></li>
                  <li><a href='#'>- Sous menu 2</a></li>
                 <br />
                  <li><h2>Section 2 sous-menu</h2></li>
                  <li><a href='#'>- Sous menu 3</a></li>
                  <li><a href='#'>- Sous menu 4</a></li>
                  <li><a href='#'>- Sous menu 5</a></li>
                  <li><a href='#'>- Sous menu 6</a></li>
              </div>
              <div id="menu_centre">
                 <li class='menu_centre'><h2>Section 3 sous-menu</h2></li>
                 <li class='menu_centre'><a href='#'>- Sous menu 7</a></li>
                 <li class='menu_centre'><a href='#'>- Sous menu 8</a></li>
                 <li class='menu_centre'><a href='#'>- Sous menu 9</a></li>
                 <li class='menu_centre'><a href='#'>- Sous menu 10</a></li>
                 <li class='menu_centre'><a href='#'>- Sous menu 11</a></li>
                 <li class='menu_centre'><a href='#'>- Sous menu 12</a></li>
                 <li class='menu_centre'><a href='#'>- Sous menu 13 </a></li>
                 <li class='menu_centre'><a href='#'>- Sous menu 14</a></li>
                 <li class='menu_centre'><a href='#'>- Sous menu 15</a></li>
              </div>
              <div id="menu_droite">
                  <li><a href='#'>- Sous menu 16</a></li>
                  <li><a href='#'>- Sous menu 17</a></li>
                  <li><a href='#'>- Sous menu 18</a></li>
                  <li><a href='#'>- Sous menu 19</a></li>
              </div>
              </ul>
           </li>
           <li><a href='#'>Menu sur<br />2 lignes 2</a>
           <ul>
              <div id="menu_gauche">
                  <li><h2>Section 1 sous-menu</h2></li>
                  <li><a href='#'>- Sous menu 1</a></li>
                  <li><a href='#'>- Sous menu 2</a></li>
                 <br />
                  <li><h2>Section 2 sous-menu</h2></li>
                  <li><a href='#'>- Sous menu 3</a></li>
                  <li><a href='#'>- Sous menu 4</a></li>
                  <li><a href='#'>- Sous menu 5</a></li>
                  <li><a href='#'>- Sous menu 6</a></li>
              </div>
              <div id="menu_centre">
                 <li class='menu_centre'><h2>Section 3 sous-menu</h2></li>
                 <li class='menu_centre'><a href='#'>- Sous menu 7</a></li>
                 <li class='menu_centre'><a href='#'>- Sous menu 8</a></li>
                 <li class='menu_centre'><a href='#'>- Sous menu 9</a></li>
                 <li class='menu_centre'><a href='#'>- Sous menu 10</a></li>
                 <li class='menu_centre'><a href='#'>- Sous menu 11</a></li>
                 <li class='menu_centre'><a href='#'>- Sous menu 12</a></li>
                 <li class='menu_centre'><a href='#'>- Sous menu 13 </a></li>
                 <li class='menu_centre'><a href='#'>- Sous menu 14</a></li>
                 <li class='menu_centre'><a href='#'>- Sous menu 15</a></li>
              </div>
              <div id="menu_droite">
                  <li><a href='#'>- Sous menu 16</a></li>
                  <li><a href='#'>- Sous menu 17</a></li>
                  <li><a href='#'>- Sous menu 18</a></li>
                  <li><a href='#'>- Sous menu 19</a></li>
              </div>
              </ul>
           </li>
           <li><a href='#'>Menu sur<br />2 lignes 3</a></li>
           <li><a href='#'>Menu sur<br />2 lignes 4</a></li>
           <li><a href='#'>Menu 5</a></li>
           <li class="menu_contact"><a href='#'>Contact</a></li>
        </ul>
        </div>
    </div>
    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
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
     
    #menu /* Liste */     
    {  
        height:37px;
        width: 951px;
        display:block;
        margin:92px 6px 6px;
        border:1px solid; /* Bordure extérieure ensemble menu */
        border-color: #EA8723;
        border-radius:5px; /* Coins arrondis */
        text-align : center; /* on centre le texte qui se trouve dans la liste */ 
    }
    #menu ul {
        list-style : none;    
        margin:0 -40px;
        width: 952px;
    }
    #menu /* Ensemble du menu */
    {
        font-weight : bold; /* on met le texte en gras */
        font-family : Trebuchet MS, sans-serif;
        font-size : 14px; /* hauteur du texte : 12 pixels */
    }
     
    #menu li a /* Contenu des listes */
    {
        display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
        padding : 0; /* aucune marge intérieure */
        color : #250050; /* couleur du texte */
        text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
        width : 135px; /* largeur */
        height: 37px;
        background:-moz-linear-gradient(90deg, #FACB2B, #F89E1B, #FFF1E0) no-repeat;
    }
     
    #menu li a:hover /* Lorsque la souris passe sur un des liens */    
    {
        color: #250050;
        background: -moz-linear-gradient(90deg, #F68E1E, #FACB2B) no-repeat;
    }
     
    #menu .menu_accueil a {
        height: 37px;    
        background:-moz-linear-gradient(90deg, #FACB2B, #F89E1B, #FFF1E0) no-repeat;
        border-radius:5px 0 0 5px; /* Coins arrondis */
        padding-bottom: 3px 1px 4px;
    }
     
    #menu .menu_contact a {
        height: 37px;    
        background:-moz-linear-gradient(90deg, #FACB2B, #F89E1B, #FFF1E0) no-repeat;
        border-radius:0 5px 5px 0; /* Coins arrondis */
    }
     
    #menu .menu_accueil a:hover
    {
        height: 37px;
        color: #250050;
        background: -moz-linear-gradient(90deg, #F68E1E, #FACB2B) no-repeat;
        border-radius:5px 0 0 5px; /* Coins arrondis */
    }
     
    #menu .menu_contact a:hover
    {
        height: 37px;
        color: #250050;
        background: -moz-linear-gradient(90deg, #F68E1E, #FACB2B) no-repeat;
        border-radius:0 5px 5px 0; /* Coins arrondis */
    }
     
    #menu li ul a /* Liens du sous-menu normal */
    {
        color: #250050;
        font-weight: normal;
        text-align: left;
        line-height: 14px;
        background: #F7931E;
        width: 220px;
        height: 16px;
        margin-left: 5px;
    }
     
    #menu li ul a:hover /* Lorsque la souris passe sur un des liens du sous-menu */    
    {
        color: #250050;
        font-weight: normal;   
        line-height: 14px;
        text-align: left;
        background: #F7931E;
        text-decoration: underline;
        width: 220px;
        height: 16px;
        margin-left: 5px;
    }
     
    #menu li /* Elements des listes */      
    { 
        float : left;
        background: #F7931E;
    }
     
    /* IE ne reconnaissant pas le sélecteur ">" */
    html>body #menu li
    {
        border-right: 1px solid #F7931E;
    }
     
    html>body #menu li:last-child
    {
        border-right: none;
    }
     
    #menu li ul /* Sous-listes */
    { 
        position: absolute; /* Position absolue */
        width:675px; /* Largeur des sous-listes */
        background: #F7931E;
        margin-left: 0;
        height: 180px;
        left: -999em; /* Hop, on envoie loin du champ de vision */
        color: #250050;
        border-radius:0 0 5px 5px; /* Coins arrondis */
    }
     
    #menu ul li h2{ /* Titre sections sous menu */   
        line-height: 20px;
        display:block;
        margin:2px 0 0;
        font:bold 12pt Trebuchet MS, sans-serif;
        color:#fff;
        } 
     
    #menu li ul li /* Éléments de sous-listes */
    {
        display:block;
        list-style:inside none;
        padding:0;
        margin:0;
        position:relative;
    }
     
    #menu li:hover ul, #menu li li:hover ul  /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
    {
        left: auto; /* Repositionnement normal */
        min-height: 0; /* Corrige un bug sous IE */
    }
     
    #menu_gauche {
      position: absolute;
      left: 2.63%;
      width: 220px;
      top: 8px;
    }
    #menu_centre {
      position: absolute;
      vertical-align: top;
      left: 35.43%;
      width: 220px;
      top: 8px;
    }
    #menu_droite {
      position: absolute;
      vertical-align: top;
      right: 2.63%;
      width: 220px;
      top: 8px;
    }
    Cependant, j'ai encore quelques problèmes :
    - En 1 (quand j'ai un intitulé sur 1 ligne comme Accueil ou Contact), je n'arrive pas à centrer verticalement. J'ai essayé le vertical-align ou vertical-position... mais rien, il ne se passe rien. J'ai essayé d'autres trucs, mais ça me descend tout (libellé des boutons ET boutons eux-même). Bon ça encore, ça n'est pas trop grave, je m'en accommoderai.
    - Par contre, en 2 (sur mon image) (c'est la raison pour laquelle j'ai mis un sous menu à mon 3e bouton), j'ai un "big-souci"; mon sous-menu dépasse à droite quand je passe la souris sur le 3e bouton (et je vous dis pas ce que ça va être si je clique sur le 4e, le 5e...). J'ai essayé d'attribuer une classe (dans mon code CSS) au second sous menu, mais c'est parti en vrille et j'ai eu mes boutons partout, mes sous menus qui se chevauchaient...

    Quelqu'un aurait-il SVP une idée pour m'aider à résoudre ces problèmes (surtout le second) ?
    D'avance merci pour vos réponses .

    Bonne journée.

  2. #2
    Membre confirmé
    Homme Profil pro
    Infographiste, Webdesigner
    Inscrit en
    Juillet 2012
    Messages
    109
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France, Drôme (Rhône Alpes)

    Informations professionnelles :
    Activité : Infographiste, Webdesigner
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : Juillet 2012
    Messages : 109
    Par défaut
    Ça y est, j'ai résolu mon problème.
    En fait, il fallait que j'attribue une classe (comme j'avais fait) mais à TOUTES mes UL, or je ne l'avais fait que sur 2 UL, d'où mes chevauchements de boutons

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

Discussions similaires

  1. menu horizontal déroulant qui ne se déroule pas
    Par nixe74 dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 08/04/2011, 09h36
  2. Menu horizontal déroulant a droite
    Par einsteineuzzz dans le forum Mise en page CSS
    Réponses: 0
    Dernier message: 10/01/2011, 12h08
  3. Réponses: 8
    Dernier message: 31/08/2009, 11h49
  4. Faire un menu à gauche qui renvoie dans DIV de droite ?
    Par youpitralala dans le forum Mise en page CSS
    Réponses: 8
    Dernier message: 23/06/2008, 17h15
  5. Menu gauche qui va à droite sous IE6
    Par yiuche dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 19/01/2007, 15h21

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