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 déroulant par dessus le reste du site


Sujet :

Positionnement en CSS avec z-index

  1. #1
    Membre confirmé Avatar de zool.bzh
    Homme Profil pro
    peintre industriel
    Inscrit en
    Octobre 2023
    Messages
    123
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France, Côtes d'Armor (Bretagne)

    Informations professionnelles :
    Activité : peintre industriel
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2023
    Messages : 123
    Par défaut Menu déroulant par dessus le reste du site
    Bonjour
    Mon menu se déroule avec les balise <div> suivantes
    Je voudrais que le menu dépasse tout, voici mon code :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
     
     <div class="dropdown">
        <button class="mainmenubtn">Catégories</button>
        <div class="dropdown-child">
            <span class="gris9"><a href="test.php?dos=dossier1">dossier1</span></a>
            <span class="gris9"><a href="test.php?dos=dossier2">dossier2</span></a>
            <span class="gris9"><a href="test.php?dos=dossier3">dossier3</span></a>
            <span class="gris9"><a href="test.php?dos=dossier4">dossier4</span></a>
        </div>
    </div>
    et le css :
    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
     
    .mainmenubtn {
        background-color: #000000;
        color: #B300B3;
        min-width: 210px;
        cursor: pointer;
        padding:10px;
        border: #999999;
        font-size: 15px;
        font-family: arial, verdana, sans-serif;
    }
    .mainmenubtn:hover {
        background-color: #B300B3;
    	font-size: 15px;
    	font-family: arial, verdana, sans-serif;
        color: #000000;
        border: #999999;
    }
    .dropdown {
        position: relative;
        display: inline-block;
    }
    .dropdown-child {
        display: none;
        background-color: #000000;
        font-size: 15px;
    	font-family: arial, verdana, sans-serif;
        min-width: 200px;
    }
    .dropdown-child a {
        color: #B300B3;
        padding:3;
        font-size: 15px;
    	font-family: arial, verdana, sans-serif;
        text-decoration: none;
        display: block;
    }
    .dropdown:hover .dropdown-child {
        display: block;
    }
    a:hover {
    font-family: arial, verdana, sans-serif;
    font-size: 15px;
    text-decoration: underline overline #B300B3;
    }
    Alors comment faire ?

  2. #2
    Membre confirmé Avatar de zool.bzh
    Homme Profil pro
    peintre industriel
    Inscrit en
    Octobre 2023
    Messages
    123
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France, Côtes d'Armor (Bretagne)

    Informations professionnelles :
    Activité : peintre industriel
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2023
    Messages : 123
    Par défaut
    me revoici avec un nouveau menu déroulant :
    Code html : 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
    <html>
    <head>
    <link href="menu.css" rel="stylesheet" type="text/css" />
    <link href="text.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <ul id="menu-accordeon">
       <li><a href="#">Lien menu 1</a>
          <ul>
             <li><a href="#">lien sous menu 1</a></li>
             <li><a href="#">lien sous menu 1</a></li>
             <li><a href="#">lien sous menu 1</a></li>
             <li><a href="#">lien sous menu 1</a></li>
          </ul>
       </li>
     
    </ul>
    <span class="vio">un bout de texte</span>
    </body>
    <html>
    Je voudrais que le menu passe par dessus le text comme suit -> oOo et voila le CSS:
    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
    #menu-accordeon {
      padding:0;
      margin:0;
      list-style:none;
      text-align: center;
      width: 180px;
    }
    #menu-accordeon ul {
      padding:0;
      margin:0;
      list-style:none;
      text-align: center;
    }
    #menu-accordeon li {
       background-color: #000;
       background-image:-webkit-linear-gradient(top,  #B300B3; 0%,  #B300B3; 100%);
       background-image: linear-gradient(to bottom,  #B300B3; 0%, #B300B3; 100%);
       border-radius: 0;
       margin-bottom:2px;
     
       border:solid 1px  #B300B3;
    }
    #menu-accordeon li li {
       max-height:0;
       overflow: hidden;
       transition: all .5s;
       border-radius:0;
       background: #000;
       box-shadow: none;
       border:none;
       margin:0
    }
    #menu-accordeon a {
      display:block;
      text-decoration: none;
      color:  #B300B3;
      padding: 8px 0;
      font-family: verdana;
      font-size:15px
    }
    #menu-accordeon ul li a, #menu-accordeon li:hover li a {
      font-size:15px
    }
    #menu-accordeon li:hover {
       background: #000;
    }
    #menu-accordeon li li:hover {
       background: #333;
    }
    #menu-accordeon ul li:last-child {
       border-radius: 0 0 6px 6px;
       border:none;
    }
    #menu-accordeon li:hover li {
      max-height: 15em;
    }
    alors comment faire ??

  3. #3
    Membre chevronné
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2022
    Messages
    273
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 21
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Industrie

    Informations forums :
    Inscription : Juin 2022
    Messages : 273
    Par défaut
    Faillit cliquer sur le lien et au taf par sûr de l'idée ...
    J'ai rien compris à ta demande .
    Tu voudrais que quand le menu est déplié les autres éléments ne soient pas déplacés ?
    Un problème sans solution est un problème mal posé. (Albert Einstein)

  4. #4
    Membre confirmé Avatar de zool.bzh
    Homme Profil pro
    peintre industriel
    Inscrit en
    Octobre 2023
    Messages
    123
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France, Côtes d'Armor (Bretagne)

    Informations professionnelles :
    Activité : peintre industriel
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2023
    Messages : 123
    Par défaut
    Oui c'est bien ça ...

  5. #5
    Membre habitué Avatar de Declique69
    Homme Profil pro
    Formateur en informatique
    Inscrit en
    Juin 2016
    Messages
    14
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 65
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Formateur en informatique

    Informations forums :
    Inscription : Juin 2016
    Messages : 14
    Par défaut Absolute
    Il faut l'afficher en positon absolute.
    Si ça ne suffit pas, tu peux ajouter z-index:1

  6. #6
    Membre confirmé Avatar de zool.bzh
    Homme Profil pro
    peintre industriel
    Inscrit en
    Octobre 2023
    Messages
    123
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France, Côtes d'Armor (Bretagne)

    Informations professionnelles :
    Activité : peintre industriel
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2023
    Messages : 123
    Par défaut
    Ok, merci Declique69

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

Discussions similaires

  1. Menu déroulant par-dessus une image
    Par feldi dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 18/01/2011, 14h16
  2. Passer mon menu déroulant au dessus du reste !
    Par u115rcu dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 17/03/2008, 23h01
  3. Menu déroulant par dessus tableau
    Par M1000 dans le forum Général JavaScript
    Réponses: 8
    Dernier message: 21/12/2005, 16h14
  4. Comment faire passer un menu par dessus une autre frame
    Par barthelv dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 29/11/2005, 12h03
  5. taille du menu par rapport au corps du site
    Par kykyn dans le forum Balisage (X)HTML et validation W3C
    Réponses: 7
    Dernier message: 25/07/2005, 20h42

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