28172 sujets

CSS et mise en forme, CSS3

Menu déroulant

Bonjour, je voudrais faire apparaitre ma div #menu en passant sur l'image #derouler mais je n'y parviens pas. 

 <div id="menu">
    <div id="banner2">
        <img src="image/menu_orange.PNG" alt="menuu">
    </div>
    <div id="orange">Orange</div>
    <div id="sfr">SFR</div>
    <div id="bouygues">Bouygues</div>
    <div id="free">Free</div>
    
</div>

voici le menu que je souhaite faire apparaître en passant sur l'image dans le code : 

    <div id="banner">
        <img src="image/menu_orange.PNG" alt="menuu" id="derouler">
        <p>évaluez vos besoins</p>
        <p id="renit">réinitialiser</p>
    </div>
    <div id="resultat">
    <p>consommation mensuelle estimée...</p>
        <div id="chiffre"></div>
    </div>
....


Dans mon css 
#menu{
    position: absolute;
    height: 100%;
    width: 80%;
    background-color: dimgray;
    display: none;
    float: left;
pour quand le menu est caché et quand on passe sur l'image
#derouler:hover #menu{
    position: absolute;
    display: inline-block;
    z-index: 2;
    float: left;


Merci d'avance si vous pouvez m'aider!
Il y a beaucoup d'id et de div car pour la mise en page de mon site j'en ai besoin, je n'ai pas mis tout mon css mais la plupart des id sont utiles soit pour le .js ou le CSS. De plus je suis sur ce site depuis 3-4h alors il n'est pas encore des plus optimisé !
Perso en html/css j'utilise que des classes pour la mise en page et je réserve les id pour le javascript (plus simple). Et pour éviter d'avoir trop d'id et de classes il faut utiliser nth-child() pour cibler l'enfant d'un élément. Çà rend le code plus maintenable.

Pour ton menu il est censé apparaître comment et ou? Parce que avec ce code j'ai du mal à comprendre.
Pour en savoir plus sur les possibilités de nth-child() et nth-of-type() (offre plus de possibilités que nth-child() :

http://nthmaster.com/
Modifié par thierry (22 Feb 2018 - 11:44)
Merci pour le conseil, pour ce projet je souhaite continuer avec plusieurs id et tout, j'ai commencer le code cette année au travers de ma spécialité (ISN).
Pour ma page, je dois me baser sur les dimensions d'un iPhone 7.
Quand je dois passer sur l'image du menu (ou sur téléphone, cliquer sur l'image), je voudrais que le menu s'affiche par dessus la page initial, pour vous que vous compreniez mieux je peux si vous le souhaitez vous donnez le code au complet afin que vous puissiez me guidez dans la réalisation de ce menu !

Pour que vous compreniez, la page avec les bouton + et - est celle ou se trouve l'image du bouton menu et l'image de droite est celle du menu que je souhaite faire apparaître au dessus de la page de gauche en passant sur l'image du menu !
Désolé d'avoir été aussi long pour vous répondre, j'étais en voyage.

Voici les codes afin que vous compreniez mieux !
L'HTML : 
<html>
<head>
<meta charset="UTF-8"/>
         
        <link href="style/style.css" rel="stylesheet" type="text/css"/>
        <link href="style/menu.css" rel="stylesheet" type="text/css"/>
</head>
<body>
    
    
    <div id="menu">
    <div id="banner2">
        <img src="image/menu_orange.PNG" alt="menuu">
    </div>
    <div id="orange">Orange</div>
    <div id="sfr">SFR</div>
    <div id="bouygues">Bouygues</div>
    <div id="free">Free</div>
    
</div>
    
  <div id="pageprincipale"> 
    
    <div id="banner">
        <img src="image/menu_orange.PNG" alt="menuu" id="derouler">
        <p>évaluez vos besoins</p>
        <p id="renit">réinitialiser</p>
    </div>
    <div id="resultat">
    <p>consommation mensuelle estimée...</p>
        <div id="chiffre"></div>
    </div>
    
    <div id="bouton">
    
        <div class="info">
            <div class="marte"><input type="button" value="-" class="boutonmoins">
            <div class="nombredemo"></div><input type="button" value="+" class="boutonplus"></div>
            <h1>Surf sur internet</h1>
            <p>une heure = 12Mo</p>
            
            
        </div>
        <div class="info">
            <div class="marte"><input type="button" value="-" class="boutonmoins">
            <input type="button" value="+" class="boutonplus"></div>
            <h1>Email sans pièce jointe</h1>
            <p>1 email = 10Ko</p>
            
        </div>
        <div class="info">
            <div class="marte"><input type="button" value="-" class="boutonmoins">
            <input type="button" value="+" class="boutonplus"></div>
            <h1>Email avec pièce jointe</h1>
            <p>1 email = 500Ko</p>
            
        </div>
        <div class="info">
            <div class="marte"><input type="button" value="-" class="boutonmoins">
            <input type="button" value="+" class="boutonplus"></div>
            <h1>TV d'Orange, vidéo stream</h1>
            
            <p>une heure = 110Mo</p>
         
        </div>
        <div class="info">
            <div class="marte"><input type="button" value="-" class="boutonmoins">
            <input type="button" value="+" class="boutonplus"></div>
            <h1>Téléchargement d'applis</h1>
            <p>une application = 20Mo</p>
            
        </div>
        <div class="info">
            <div class="marte"><input type="button" value="-" class="boutonmoins">
            <input type="button" value="+" class="boutonplus"></div>
            <h1>MP3 téléchargés</h1>
            <p>1MP3 = 5Mo</p>
            
        </div>
        <div class="info">
            <div class="marte"><input type="button" value="-" class="boutonmoins">
            <input type="button" value="+" class="boutonplus"></div>
            <h1>Streaming audio</h1>
            <p>une heure = 45Mo</p>
            
        </div>
        <div id="vide">
        </div>
    
    </div>
    
    
    <div id="bottom">
    <span>*cette estimation n'a pas de valeur contractuelle et concerne tous les usages.</span>
    </div>
    </div> 
    
</body>
</html>

et le CSS : 

body{
    background-color: snow;
    width: 100%;
    height: 100%;
    margin: 0%;
}
p{
    display: inline;
    font-size: 20px;
}
h1{
    line-height: 10px
}
#pageprincipale{
    z-index: 1;
}
#banner{
    padding: 35px 0px 35px 0px;
    width: 100%;
    background-color: snow;
    text-align: center;
    font-size: 50px;
    font-family: sans-serif;
    padding-top: 30px; 
   
}
#renit{
    color: orange;
}
#renit:hover{
    color: white;
}


#resultat{
    
    width: 100%;
    padding: 30px 0px 30px 0px;
    background-color: orange;
    text-align: center;
    font-size: 50px;
    font-family: sans-serif;
    color: white;
   
}
#bouton h1{
    font-family: sans-serif;
    font-size: 17px;
    font-weight: bold;
    
    
    
}
#bouton p{
    font-family: sans-serif;
    font-size: 12px;
    color: lightgrey;
    
}
#derouler:hover #menu{
    position: absolute;
    display: block;
    
    
    
    
}

.marte{
    float: right;
}

.boutonplus{
    position: absolute;
    right: 40px;
    height: 80px;
    width: 80px;
    font-size: 50px;
    color: orange;
    border: 1px solid orange;
   
    
}
.boutonmoins{
    position: absolute;
   right: 240px;
    height: 80px;
    width: 80px;
     font-size: 50px;
    color: orange;
    border: 1px solid orange;
    
    
}
    

.info{
    padding: 30px 0px 30px 30px;
    border-bottom: 1px solid  grey;
    margin: 5px;
    
    
    
} 
#vide{
    height: 100px;
}



#bottom{
    background-color:lightgrey;
    padding: 20px 0px 20px;
    width: 100%;
    font-size: 35px; 
    position : absolute;
    bottom : 0;
    font-family: sans-serif;
    color:gray;
    text-align: center;
    border-top: 1px solid  grey;
    
    
    
    
}




/*-------MENU-------*/

#menu{
    position: absolute;
    height: 100%;
    width: 80%;
    background-color: dimgray;
    display: none;
    
 
    
    
}
#banner2{
    background-color: white;
    padding: 35px 0 35px 0;
    text-align: right;
    padding-right: 50px;
    
    
}

#orange{
   color: orange;
    border-bottom: 1px solid grey;
    padding: 60px 0 60px 60px;
    font-size: 50px;
    font-family: sans-serif;
}
#sfr{
   color: red;
    border-bottom: 1px solid grey;
    padding: 60px 0 60px 60px;
    font-size: 50px;
    font-family: sans-serif;
}
#bouygues{
   color: blue;
    border-bottom: 1px solid grey;
    padding: 60px 0 60px 60px;
    font-size: 50px;
    font-family: sans-serif;
}
#free{
   color: hotpink;
    border-bottom: 1px solid grey;
    padding: 60px 0 60px 60px;
    font-size: 50px;
    font-family: sans-serif;
}


J’espère que vous comprenez quel résultat je souhaite atteindre e que vous parviendrez à m'aider !
Sujet clos
Aller à