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 :

Adaptation d'un CSS (centrage vertical)


Sujet :

Centrer un élément en CSS

  1. #21
    Membre actif Avatar de Zebulon777
    Homme Profil pro
    Informaticien
    Inscrit en
    Février 2005
    Messages
    1 319
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 57
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Informaticien

    Informations forums :
    Inscription : Février 2005
    Messages : 1 319
    Points : 286
    Points
    286
    Par défaut
    Si, si
    C'est en cours...

    Voila où j'en suis, mais toujours impossible de traiter ce petit triangle.
    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
    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
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    260
    261
    262
    263
    264
    265
    266
    267
    268
    269
    270
    271
    272
    273
    274
    275
    276
    277
    278
    279
    280
    281
    282
    283
    284
    285
    286
    287
    288
    289
    290
    291
    292
    293
    294
    295
    296
    297
    298
    299
    300
    301
    302
    303
    304
    305
    306
    307
    308
    309
    310
    311
    312
    313
    314
    315
    316
    317
    318
    319
    320
    321
    322
    323
    324
    325
    326
    327
    328
    329
    330
    331
    332
    333
    334
    335
    336
    337
    338
    339
    340
    341
    342
    343
    344
    345
    346
    347
    348
    349
    350
    351
    352
    353
    354
    355
    356
    357
    358
    359
    360
    361
    362
    363
    364
    365
    366
    367
    368
    369
    370
    371
    372
    373
    374
    375
    376
    377
    378
    379
    380
    381
    382
    383
    384
    385
    386
    387
    388
    389
    390
    391
    392
    393
    394
    395
    396
    397
    398
    399
    400
    401
    402
    403
    404
     
    #cssmenu.li a {
      position: relative;
      display: block;
      text-align: center;
     }
     
    /* ICONES */
    #cssmenu li a:before {
      position: absolute;
      content: '';
      display: block; /* à ajouter */
      width: 16px;
      height: 16px;
      top: 50%; 
      margin-top: -8px; /* - moitié de la hauteur */
      left: 5px; /* icône à gauche */
    }
     
    /* PREMIER NIVEAU DU MENU */ 
    #cssmenu > ul,
    #cssmenu > ul > li,
    #cssmenu > ul > li > a
    {
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      line-height: 0.7em; /* Epaisseur de la ligne de menu */
    }
     
    /* IMAGES A INSERER DANS LE PREMIER NIVEAU DU MENU */
    #cssmenu ul > li.accueil > a:before {
    	background: url("../../Images/Accueil_16x16.png") no-repeat;
    }
    #cssmenu ul > li.aeroport > a:before {
    	background: url("../../Images/Aeroport_16x16_2.png") no-repeat;
    }
    #cssmenu ul > li.apropos > a:before {
    	background: url("../../Images/APropos01_16x16.png") no-repeat;
    }
    #cssmenu ul > li.info > a:before {
    	background: url("../../Images/Infos_16x16.png") no-repeat;
    }
     
    #cssmenu,
    #cssmenu ul,
    #cssmenu ul li,
    #cssmenu ul li a,
    #cssmenu #menu-button {
      margin: 0;
      padding: 0;
      border: 0;
      list-style: none;
    /*  line-height: 1;*/
      display: block;
    z-index:100;
      position: relative;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }
     
    /* Détermine le cadre du fond du menu */ 
    #cssmenu:after,
    #cssmenu > ul:after {
      content: ".";
      display: block;
      clear: both;
      visibility: hidden;
    /*  line-height: 0;*/
      height: 0;
    }
     
    #cssmenu #menu-button {
      display: none; /* NE MET PAS LE TITRE DU MENU */ 
    }
     
    #cssmenu {
      width: auto;
      border-radius: 0px;
      font-family: Arial;
     
      background: #002f47;
      background: -o-linear-gradient(top, #002f47, #002f47);
      background: -ms-linear-gradient(top, #002f47, #002f47);
      background: -webkit-linear-gradient(top, #002f47, #002f47);
      background: -moz-linear-gradient(top, #002f47, #002f47);
      background: linear-gradient(to bottom, #002f47, #002f47);
      box-shadow: inset 0 -3px 0 #002f47, inset 0 -3px 3px #002f47, inset 0 2px 2px #002f47, inset 1px 0 2px #002f47, inset -1px 0 2px #002f47, 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.06), 0 3px 3px rgba(0, 0, 0, 0.17), 2px 1px 2px rgba(0, 0, 0, 0.05), -2px 1px 2px rgba(0, 0, 0, 0.05);
    }
     
    #cssmenu > ul > li {
      float: left;
    }
     
    /* PREMIER NIVEAU DU MENU */ 
    #cssmenu > ul > li > a {
      padding: 10px 30px; /* Hauteur de la barre de menu et espacement entre les valeurs*/
      font-size: 12px;
      color: #ffffff;
      text-transform: uppercase;
      letter-spacing: 2px;
      text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
      text-decoration: none;
      -webkit-transition: color .2s ease;
      -moz-transition: color .2s ease;
      -ms-transition: color .2s ease;
      -o-transition: color .2s ease;
      transition: color .2s ease;
    }
    /* SELECTION DU MENU : PREMIER NIVEAU */
    #cssmenu > ul > li:hover > a,
    #cssmenu > ul > li > a:hover,
    #cssmenu > ul > li.active > a {
      color: #002f47; /*#B9121B;*/ /*#cae5fd;*/ /* Couleur du texte sélectionné */
      background:white;
    }
    #cssmenu > ul > li.has-sub > a {
      padding-right: 30px; /* Position du rond qui contient la flêche d'indication de sous-menu => VOIR LIGNE 90 et 118 */
    }
    #cssmenu ul > li.has-sub > a:after {
      content: '';
      position: absolute;
      right: 10px;
      top: 7px; /* Position du rond du menu principal qui contient la flêche d'indication de sous-menu => VOIR LIGNE 84 et 118 */
      display: block;
      width: 18px;
      height: 18px;
      border-radius: 9px;
     
      background: #002f47;
      background: -webkit-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
      background: -ms-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
      background: -moz-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
      background: -o-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
      background: linear-gradient(to bottom, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
      box-shadow: inset 0 -1px 1px #002f47, inset 0 2px 1px #002f47;
     
      background-size: 36px 36px;
      background-position: 0 0;
      background-repeat: no-repeat;
      -webkit-transition: all 0.1s ease-out;
      -moz-transition: all 0.1s ease-out;
      -ms-transition: all 0.1s ease-out;
      -o-transition: all 0.1s ease-out;
      transition: all 0.1s ease-out;
    }
    #cssmenu ul > li.has-sub:hover > a:after {
      background-position: 0 -18px;
    }
    #cssmenu ul > li.has-sub > a:after {
      content: '';
      position: absolute;
      right: 11px;
      top: 10px; /* Position de la flêche d'indication de sous-menu => VOIR LIGNE 84 et 90 */
      display: block;
      width: 0;
      height: 0;
      border: 3px solid transparent;
      border-top-color: #ffffff;
      z-index: 99;
    }
    #cssmenu ul > li.has-sub:hover > a:after {
      border-top-color: #002f47;
    }
     
     
     
    #cssmenu ul ul {
      text-transform: uppercase; /* Met en majuscule le 2ème niveau de menu*/
      position: absolute;
      left: -9999px;
      opacity: 0;
      -webkit-transition: top .2s ease, opacity .2s ease;
      -moz-transition: top .2s ease, opacity .2s ease;
      -ms-transition: top .2s ease, opacity .2s ease;
      -o-transition: top .2s ease, opacity .2s ease;
      transition: top .2s ease, opacity .2s ease;
    }
    #cssmenu > ul > li > ul {
      top: 91px;
      padding-top: 10px;
      border-radius: 5px;
    }
    #cssmenu > ul > li:hover > ul {
      left: auto;
      top: 25px; /* Positionnement du premier niveau de menu */
      opacity: 1;
    }
    #cssmenu.align-right > ul > li:hover > ul {
      right: 0;
    }
    #cssmenu ul ul ul {
      top: 40px;
    }
     
     
     
    /* TROISIEME NIVEAU DU MENU */ 
    #cssmenu ul ul > li:hover > ul {
      top: 0;
      left: 215px; /* Positionnement du menu */ 
      padding-left: 10px;
      opacity: 1;
    }
    #cssmenu.align-right ul ul > li:hover > ul {
      left: auto;
      right: 178px;
      padding-left: 0;
      padding-right: 10px;
      opacity: 1;
    }
    #cssmenu ul ul li a {
      width: 225px; /* largeur du sous-menu */
      padding: 7px 25px; /* Espacement de chaque valeur du sous-menu */
      font-size: 12px;
      text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
      color: #ffffff;
      text-decoration: none;
     
      background: #002f47;
      -webkit-transition: color .2s ease;
      -moz-transition: color .2s ease;
      -ms-transition: color .2s ease;
      -o-transition: color .2s ease;
      transition: color .2s ease;
    }
    #cssmenu ul ul li:hover > a,
    #cssmenu ul ul li > a:hover,
    #cssmenu ul ul li.active > a {
      color: #002f47; /*#B9121B;*/ /*#cae5fd;*/ /* Couleur du texte sélectionné */
      background:white;
    }
    #cssmenu ul ul li:first-child > a {
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      box-shadow: inset 0 2px 2px #002f47;
      padding-top:13px; /* permet de centrer verticalement la flêche du sous-menu */
    }
    #cssmenu ul ul li:last-child > a {
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
      box-shadow: inset 0 -3px 0 #002f47, inset 0 -3px 3px #002f47, 0 1px 1px rgba(0, 0, 0, 0.03), 0 2px 2px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.13);
    }
     
    /* Position du rond du 2ème niveau du menu */
    #cssmenu ul ul > li.has-sub > a:after {
      right: 12px;
      top: 9px;
     
      background: #002f47;
      background: -webkit-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
      background: -ms-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
      background: -moz-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
      background: -o-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
      background: linear-gradient(to bottom, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
      box-shadow: inset 0 -1px 1px #002f47, inset 0 2px 1px #002f47;
     
      background-size: 36px 36px;
      background-position: 0 0;
      background-repeat: no-repeat;
    }
     
    @media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
      #cssmenu {
        width: 100%;
      }
      #cssmenu ul,
      #cssmenu ul ul,
      #cssmenu ul ul ul,
      #cssmenu > ul,
      #cssmenu.align-center > ul,
      #cssmenu > ul > li > ul,
      #cssmenu > ul > li:hover > ul,
      #cssmenu ul ul li:hover > ul,
      #cssmenu ul ul ul li:hover > ul,
      #cssmenu.align-right ul ul,
      #cssmenu.align-right ul ul li:hover > ul,
      #cssmenu.align-right ul ul ul li:hover > ul {
    z-index:100;
        position: relative;
        left: 0;
        right: auto;
        top: 0;
        width: 100%;
        display: none;
        padding: 0;
        opacity: 1;
        text-align: left;
      }
      #cssmenu ul li {
        width: 100%;
        border-top: 1px solid rgba(120, 120, 120, 0.2);
      }
      #cssmenu > ul > li > a,
      #cssmenu ul ul li a,
      #cssmenu ul ul li:first-child > a,
      #cssmenu ul ul li:last-child > a {
        width: 100%;
        border-radius: 0;
        box-shadow: none;
        background: none;
      }
      #cssmenu ul li a {
        padding-left: 12.5px;
      }
      #cssmenu ul ul li a {
        padding: 14px 25px 14px 27.5px;
      }
      #cssmenu ul ul ul li a {
        padding-left: 42.5px;
      }
      #cssmenu ul ul ul ul li a {
        padding-left: 57.5px;
      }
      #cssmenu > ul > li.has-sub > a:after,
      #cssmenu > ul > li.has-sub > a:before,
      #cssmenu ul ul li.has-sub > a:after,
      #cssmenu ul ul li.has-sub > a:before {
        display: none;
      }
      #cssmenu #menu-button {
    z-index:100;
        position: relative;
        display: block;
        padding: 20px;
        padding-left: 12.5px;
        cursor: pointer;
        font-size: 12px;
        color: #ffffff;
        text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
    /*    font-weight: 700;*/
        letter-spacing: 1px;
        text-transform: uppercase;
      }
      #cssmenu .submenu-button {
        position: absolute;
        right: 0;
        display: block;
        width: 53px;
        height: 53px;
        border-left: 1px solid rgba(120, 120, 120, 0.2);
        z-index: 10;
        cursor: pointer;
      }
      #cssmenu ul ul .submenu-button {
        height: 41px;
      }
      #cssmenu ul .submenu-button:after,
      #cssmenu #menu-button:after {
        content: '';
        position: absolute;
        right: 12.5px;
        top: 12.5px;
        display: block;
        width: 28px;
        height: 28px;
        border-radius: 15px;
     
        background: #002f47;
        background: -webkit-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
        background: -ms-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
        background: -moz-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
        background: -o-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
        background: linear-gradient(to bottom, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
        box-shadow: inset 0 -1px 1px #002f47, inset 0 2px 1px #002f47;
     
        background-size: 56px 56px;
        background-position: 0 0;
        background-repeat: no-repeat;
        -webkit-transition: all 0.1s ease-out;
        -moz-transition: all 0.1s ease-out;
        -ms-transition: all 0.1s ease-out;
        -o-transition: all 0.1s ease-out;
        transition: all 0.1s ease-out;
      }
      #cssmenu ul .submenu-button.submenu-opened:after,
      #cssmenu #menu-button.menu-opened:after {
        background-position: 0 -28px;
      }
      #cssmenu ul ul .submenu-button:after {
        top: 6.5px;
      }
      #cssmenu #menu-button:before,
      #cssmenu .submenu-button:before {
        content: '';
        position: absolute;
        right: 22.5px;
        top: 25.5px;
        display: block;
        width: 0;
        height: 0;
        border: 4px solid transparent;
        border-top-color: #ffffff;
        z-index: 99;
      }
      #cssmenu ul ul .submenu-button:before {
        top: 19.5px;
      }
      #cssmenu #menu-button.menu-opened:before,
      #cssmenu .submenu-button.submenu-opened:before {
    /*    border-top-color: #19799f;*/
        border-top-color: #002f47;
      }
    }
    Zeb'...

  2. #22
    Invité
    Invité(e)
    Par défaut
    1/ Enlève TOUT le code EN concenant PAS le niveau 1 !

    2/ ENSUITE, quand le code du niveau 1 sera correct, tu rajouteras le code du niveau 2.

    3/ ENFIN, le code du niveau 3.

    C'est la seule manière de BIEN COMPRENDRE "qui fait quoi et comment".


    N.B. Attention à ce genre de code :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    #cssmenu,
    #cssmenu ul,
    #cssmenu ul li,
    #cssmenu ul li a,
    #cssmenu #menu-button {
    Ici, pas de ">", donc prend en compte TOUS les niveaux.
    OR, ce code est écrit APRES des spécifications de type ul >li, ul >li > a, et les "écrase".

    En clair : L'ORDRE des instructions a BEAUCOUP d'importance !

  3. #23
    Membre actif Avatar de Zebulon777
    Homme Profil pro
    Informaticien
    Inscrit en
    Février 2005
    Messages
    1 319
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 57
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Informaticien

    Informations forums :
    Inscription : Février 2005
    Messages : 1 319
    Points : 286
    Points
    286
    Par défaut
    Bon, ben j'ai bien simplifié les choses et tout à l'air de fonctionner.
    J'ai même réussit à modifier pas mal de petites choses.

    La seule chose que je n'ai pas réussit à faire c'est de remettre le rond qui doit apparaitre autour du triangle lorsque la souris passe sur le menu, mais ce n'est pas très grave et je ne peux plus trop me permettre de perdre du temps sur ça.

    Merci encore pour votre patience à tous.

    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
    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
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    260
    261
    262
    263
    264
    265
    266
    267
    268
    269
    270
    271
    272
    273
    274
    275
    276
    277
    278
    279
    280
    281
    282
    283
    284
    285
    286
    287
    288
    289
    290
    291
    292
    293
    294
    295
    296
    297
    298
    299
    300
    301
    302
    303
    304
    305
    306
    307
    308
    309
    310
    311
    312
    313
    314
    315
    316
    317
    318
    319
    320
    321
    322
    323
    324
    325
    326
    327
    328
    329
    330
    331
    332
    333
    334
    335
    336
    337
    338
    339
    340
    341
    342
    343
    344
    345
    346
    347
    348
    349
    350
    351
    352
    353
    354
    355
    356
    357
    358
    359
    360
    361
    362
    363
    364
    365
     
    #cssmenu,
    #cssmenu ul,
    #cssmenu ul li,
    #cssmenu ul li a,
    #cssmenu #menu-button {
      margin: 0;
      padding: 0;
      border: 0;
      list-style: none;
    /*  line-height: 1;*/
      display: block;
    z-index:100;
      position: relative;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }
     
    /* Détermine le cadre du fond du menu */ 
    #cssmenu:after,
    #cssmenu > ul:after {
      content: ".";
      display: block;
      clear: both;
      visibility: hidden;
    /*  line-height: 0;*/
      height: 0;
    }
     
    #cssmenu #menu-button {
      display: none; /* NE MET PAS LE TITRE DU MENU */ 
    }
     
    #cssmenu {
      width: 150;
      border-radius: 0px;
      font-family: Arial;
    }
     
    /* ICONES */
    #cssmenu li a:before {
      position: absolute;
      content: '';
      display: block; /* à ajouter */
      width: 16px;
      height: 16px;
      top: 50%; 
      margin-top: -8px; /* - moitié de la hauteur */
      left: 5px; /* icône à gauche */
    }
     
    /* PREMIER NIVEAU DU MENU */ 
    #cssmenu > ul,
    #cssmenu > ul > li,
    #cssmenu > ul > li > a
    {
      border-top-left-radius: 15px;
      border-top-right-radius: 5px;
      line-height: 1em; /* Epaisseur de la ligne de menu */
    }
     
    /* IMAGES A INSERER DANS LE PREMIER NIVEAU DU MENU */
    #cssmenu ul > li.accueil > a:before {
    	background: url("../../Images/Accueil_16x16.png") no-repeat;
    }
    #cssmenu ul > li.aeroport > a:before {
    	background: url("../../Images/Aeroport_16x16_2.png") no-repeat;
    }
    #cssmenu ul > li.apropos > a:before {
    	background: url("../../Images/APropos01_16x16.png") no-repeat;
    }
    #cssmenu ul > li.info > a:before {
    	background: url("../../Images/Infos_16x16.png") no-repeat;
    }
     
    #cssmenu > ul > li {
      float: left; /* Permet de mettre le menu sur une seule ligne */
    }
     
    /* PREMIER NIVEAU DU MENU */ 
    #cssmenu > ul > li > a {
    	padding-top:10px;
    	padding-bottom:10px;
    	padding-left:30px;
    	padding-right:30px;
      font-size: 12px;
      font-weight:bold;
      color: #ffffff;
      text-transform: uppercase;
      letter-spacing: 2px;
      text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
      text-decoration: none;
      -webkit-transition: color .2s ease;
      -moz-transition: color .2s ease;
      -ms-transition: color .2s ease;
      -o-transition: color .2s ease;
      transition: color .2s ease;
    }
     
    /* SELECTION DU MENU : PREMIER NIVEAU */
    #cssmenu > ul > li:hover > a,
    #cssmenu > ul > li > a:hover,
    #cssmenu > ul > li.active > a {
      color: #002f47; /*#B9121B;*/ /*#cae5fd;*/ /* Couleur du texte sélectionné */
      background:white;
    }
     
    #cssmenu ul > li.has-sub > a:after {
      content: '';
      position: absolute;
      right: 11px;
      top: 10px; /* Position de la flêche d'indication de sous-menu => VOIR LIGNE 84 et 90 */
      display: block;
      width: 0;
      height: 0;
      border: 7px solid transparent;
      border-top-color: #ffffff;
      z-index: 99;
    }
     
    #cssmenu ul ul {
      text-transform: uppercase; /* Met en majuscule le 2ème niveau de menu*/
      position: absolute;
      left: -9999px;
      opacity: 0;
      -webkit-transition: top .2s ease, opacity .2s ease;
      -moz-transition: top .2s ease, opacity .2s ease;
      -ms-transition: top .2s ease, opacity .2s ease;
      -o-transition: top .2s ease, opacity .2s ease;
      transition: top .2s ease, opacity .2s ease;
    }
     
    #cssmenu > ul > li > ul {
      top: 91px;
      padding-top: 10px;
      border-radius: 5px;
    }
     
    #cssmenu > ul > li:hover > ul {
      left: auto;
      top: 25px; /* Positionnement du premier niveau de menu */
      opacity: 1;
    }
     
    #cssmenu.align-right > ul > li:hover > ul {
      right: 0;
    }
     
    #cssmenu ul ul ul {
      top: 40px;
    }
     
     
     
    /* TROISIEME NIVEAU DU MENU */ 
    #cssmenu ul ul > li:hover > ul {
      top: 0;
      left: 215px; /* Positionnement du menu */ 
      padding-left: 10px;
      opacity: 1;
    }
     
    #cssmenu.align-right ul ul > li:hover > ul {
      left: auto;
      right: 178px;
      padding-left: 0;
      padding-right: 10px;
      opacity: 1;
    }
     
    #cssmenu ul ul li a {
      width: 225px; /* largeur du sous-menu */
      padding: 7px 25px; /* Espacement de chaque valeur du sous-menu */
      font-size: 12px;
      text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
      color: #ffffff;
      text-decoration: none;
     
      background: #002f47;
      -webkit-transition: color .2s ease;
      -moz-transition: color .2s ease;
      -ms-transition: color .2s ease;
      -o-transition: color .2s ease;
      transition: color .2s ease;
    }
     
    #cssmenu ul ul li:hover > a,
    #cssmenu ul ul li > a:hover,
    #cssmenu ul ul li.active > a {
      color: #002f47; /*#B9121B;*/ /*#cae5fd;*/ /* Couleur du texte sélectionné */
      background:white;
    }
     
    #cssmenu ul ul li:first-child > a {
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      box-shadow: inset 0 2px 2px #002f47;
      padding-top:13px; /* permet de centrer verticalement la flêche du sous-menu */
    }
     
    #cssmenu ul ul li:last-child > a {
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
      box-shadow: inset 0 -3px 0 #002f47, inset 0 -3px 3px #002f47, 0 1px 1px rgba(0, 0, 0, 0.03), 0 2px 2px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.13);
    }
     
     
    @media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
      #cssmenu {
        width: 100%;
      }
      #cssmenu ul,
      #cssmenu ul ul,
      #cssmenu ul ul ul,
      #cssmenu > ul,
      #cssmenu.align-center > ul,
      #cssmenu > ul > li > ul,
      #cssmenu > ul > li:hover > ul,
      #cssmenu ul ul li:hover > ul,
      #cssmenu ul ul ul li:hover > ul,
      #cssmenu.align-right ul ul,
      #cssmenu.align-right ul ul li:hover > ul,
      #cssmenu.align-right ul ul ul li:hover > ul {
    z-index:100;
        position: relative;
        left: 0;
        right: auto;
        top: 0;
        width: 100%;
        display: none;
        padding: 0;
        opacity: 1;
        text-align: left;
      }
     
      #cssmenu ul li {
        width: 100%;
        border-top: 1px solid rgba(120, 120, 120, 0.2);
      }
     
      #cssmenu > ul > li > a,
      #cssmenu ul ul li a,
      #cssmenu ul ul li:first-child > a,
      #cssmenu ul ul li:last-child > a {
        width: 100%;
        border-radius: 0;
        box-shadow: none;
        background: none;
      }
     
      #cssmenu ul li a {
        padding-left: 12.5px;
      }
     
      #cssmenu ul ul li a {
        padding: 14px 25px 14px 27.5px;
      }
     
      #cssmenu ul ul ul li a {
        padding-left: 42.5px;
      }
     
      #cssmenu ul ul ul ul li a {
        padding-left: 57.5px;
      }
     
      #cssmenu > ul > li.has-sub > a:after,
      #cssmenu > ul > li.has-sub > a:before,
      #cssmenu ul ul li.has-sub > a:after,
      #cssmenu ul ul li.has-sub > a:before {
        display: none;
      }
     
      #cssmenu #menu-button {
    z-index:100;
        position: relative;
        display: block;
        padding: 20px;
        padding-left: 12.5px;
        cursor: pointer;
        font-size: 12px;
        color: #ffffff;
        text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
        letter-spacing: 1px;
        text-transform: uppercase;
      }
     
      #cssmenu .submenu-button {
        position: absolute;
        right: 0;
        display: block;
        width: 53px;
        height: 53px;
        border-left: 1px solid rgba(120, 120, 120, 0.2);
        z-index: 10;
        cursor: pointer;
      }
     
      #cssmenu ul ul .submenu-button {
        height: 41px;
      }
     
      #cssmenu ul .submenu-button:after,
      #cssmenu #menu-button:after {
        content: '';
        position: absolute;
        right: 12.5px;
        top: 12.5px;
        display: block;
        width: 28px;
        height: 28px;
        border-radius: 15px;
     
        background: #002f47;
        background: -webkit-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
        background: -ms-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
        background: -moz-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
        background: -o-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
        background: linear-gradient(to bottom, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
        box-shadow: inset 0 -1px 1px #002f47, inset 0 2px 1px #002f47;
     
        background-size: 56px 56px;
        background-position: 0 0;
        background-repeat: no-repeat;
        -webkit-transition: all 0.1s ease-out;
        -moz-transition: all 0.1s ease-out;
        -ms-transition: all 0.1s ease-out;
        -o-transition: all 0.1s ease-out;
        transition: all 0.1s ease-out;
      }
     
      #cssmenu ul .submenu-button.submenu-opened:after,
      #cssmenu #menu-button.menu-opened:after {
        background-position: 0 -28px;
      }
     
      #cssmenu ul ul .submenu-button:after {
        top: 6.5px;
      }
     
      #cssmenu #menu-button:before,
      #cssmenu .submenu-button:before {
        content: '';
        position: absolute;
        right: 22.5px;
        top: 25.5px;
        display: block;
        width: 0;
        height: 0;
        border: 4px solid transparent;
        border-top-color: #ffffff;
        z-index: 99;
      }
     
      #cssmenu ul ul .submenu-button:before {
        top: 19.5px;
      }
     
      #cssmenu #menu-button.menu-opened:before,
      #cssmenu .submenu-button.submenu-opened:before {
    /*    border-top-color: #19799f;*/
        border-top-color: #002f47;
      }
    }
    Zeb'...

  4. #24
    Invité
    Invité(e)
    Par défaut
    Mettre un rond autour, non, mais changer de couleur, oui :

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    #cssmenu ul > li.has-sub:hover > a:after {
        border-top-color: #002f47;
    }
    Dernière modification par Invité ; 06/12/2016 à 11h45.

  5. #25
    Membre actif Avatar de Zebulon777
    Homme Profil pro
    Informaticien
    Inscrit en
    Février 2005
    Messages
    1 319
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 57
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Informaticien

    Informations forums :
    Inscription : Février 2005
    Messages : 1 319
    Points : 286
    Points
    286
    Par défaut
    Ha oui, effectivement, c'est un oubli de ma part...
    Merci beaucoup, en tout cas, pour ton aide et ta patience.
    Zeb'...

+ Répondre à la discussion
Cette discussion est résolue.
Page 2 sur 2 PremièrePremière 12

Discussions similaires

  1. Réponses: 13
    Dernier message: 16/08/2006, 10h06
  2. [CSS] Centrage de bloc VERTICAL
    Par elraton dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 07/09/2005, 18h05
  3. [CSS] Problème de centrage vertical
    Par ZeImp dans le forum Mise en page CSS
    Réponses: 6
    Dernier message: 20/07/2005, 01h04
  4. Centrage vertical de cellule : est-ce possible ?
    Par kikidrome dans le forum SAP Crystal Reports
    Réponses: 3
    Dernier message: 13/06/2005, 12h13

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