Search code examples
htmlcsslistbuttondropdown

Problem matching dropdown button and dropdown content in html CSS

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Site de Yani Mira</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div id = "banniere">
            <img src="/images/banniere_site.png" alt="">
        </div>
        <div class="dropdown">
            <button class="dropbtn">Menu^</button>
            <div class="dropdown-content">
               <a href="#">Accueil</a>
               <a href="#">Telecharger CV</a>
               <a href="#">Chaîne Youtube</a>
               <a href="#">Contact</a>
               <a href="#">Mes projets</a> 
            </div>            
        </div>
         <div id='bienvenue'>Bienvenue sur mon Site</div>
         <div id="banniere">
         <img src="images/banniere_site.png" alt="">
        </div>
        <section>
            <div id="presentation">
                Je me présente je m'appelle Yani Mira
            </div>
    <div id="texte_section">Je suis un jeune développeur en 3ème année à l'école d"informatique
        ESTIAM (Paris 20) et suis en contrat d'alternance avec la société
        de consulting informatique Xenoo.
        Depuis petit je suis passioné par les nouvelles technologies et
        souhaite en faire mon métier.</div>
        <img class="photodemoi" src="images/yani_photo_resized.jpg" alt="">
        </section>
        <script src="" async defer></script>
    </body>
</html>

@font-face {
    font-family: 'freshmannormal';
    src: url('polices/freshman/freshman-webfont.woff2') format('woff2'),
         url('polices/freshman/freshman-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'gowaitalic';
    src: url('gowa-italic-webfont.woff2') format('woff2'),
         url('gowa-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'gowaregular';
    src: url('polices/gowa/gowa-regular-webfont.woff2') format('woff2'),
         url('polices/gowa/gowa-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}



#bienvenue{
    font-family: 'freshmannormal';
    text-align: center;
    border-width: 100%;
    border-style: solid;
    border-radius: 40px;
    border-left: 40px;
    border-right: 40px;
     height: 100px; 
     height: auto;
    width: 100%;
    font-size: 3em;
    background-color: antiquewhite;
    margin-right: 20em;    
}


#banniere img
{
    width: 100%;
    border-radius: 30px;
    display: flex;
    /* margin-left: 25%; */
}

#presentation{
    font-family: 'gowaregular';
    font-weight: bold;
    font-size: 2em;

}
#text_section{
}
section{
    font-family:sans-serif;
    padding-right: 10em;
    margin-right: 40px;
    margin-left: 40px;
    padding-bottom: 100px;
    font-size: 2em ;
    border: 10px;
    border-radius: 40px;
    border-style: solid ;
    border-color:antiquewhite;
    text-align: center;
}

.photodemoi{
    border-style: solid;
    border-color: antiquewhite;
    height: 7em;
    width: 6em;
    position: relative;
    bottom: 160px;
    left:8.5em; 
    float: right;
    border-radius: 20px;
}

/* Le bouton du dropdown*/
.dropbtn {
    font-family: 'freshmannormal';
    background-color: antiquewhite;
    color: black;
    padding: 16px;
    font-size: 18px;
    font-weight: bold;
    border: none;
    float: right;
    margin-right: 40px;
    margin-top: 1px;
  }
  
/* Configuration du container dropdown */

  /* Contenu du dropdown (qu'on a caché avec display:none) */
  .dropdown-content{
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      padding: 12px 16px;
      /* margin-left: 110em; */
      z-index: 1;     
      
  }

  /* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }

  /* Change color of dropdown links on hover */
.dropdown-content a:hover {
    background-color: #ddd;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    background-color:antiquewhite;
}
@font-face {
    font-family: 'freshmannormal';
    src: url('polices/freshman/freshman-webfont.woff2') format('woff2'),
         url('polices/freshman/freshman-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'gowaitalic';
    src: url('gowa-italic-webfont.woff2') format('woff2'),
         url('gowa-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'gowaregular';
    src: url('polices/gowa/gowa-regular-webfont.woff2') format('woff2'),
         url('polices/gowa/gowa-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}



#bienvenue{
    font-family: 'freshmannormal';
    text-align: center;
    border-width: 100%;
    border-style: solid;
    border-radius: 40px;
    border-left: 40px;
    border-right: 40px;
     height: 100px; 
     height: auto;
    width: 100%;
    font-size: 3em;
    background-color: antiquewhite;
    margin-right: 20em;    
}


#banniere img
{
    width: 100%;
    border-radius: 30px;
    display: flex;
    /* margin-left: 25%; */
}

#presentation{
    font-family: 'gowaregular';
    font-weight: bold;
    font-size: 2em;

}
#text_section{
}
section{
    font-family:sans-serif;
    padding-right: 10em;
    margin-right: 40px;
    margin-left: 40px;
    padding-bottom: 100px;
    font-size: 2em ;
    border: 10px;
    border-radius: 40px;
    border-style: solid ;
    border-color:antiquewhite;
    text-align: center;
}

.photodemoi{
    border-style: solid;
    border-color: antiquewhite;
    height: 7em;
    width: 6em;
    position: relative;
    bottom: 160px;
    left:8.5em; 
    float: right;
    border-radius: 20px;
}

/* Le bouton du dropdown*/
.dropbtn {
    font-family: 'freshmannormal';
    background-color: antiquewhite;
    color: black;
    padding: 16px;
    font-size: 18px;
    font-weight: bold;
    border: none;
    float: right;
    margin-right: 40px;
    margin-top: 1px;
  }
  
/* Configuration du container dropdown */

  /* Contenu du dropdown (qu'on a caché avec display:none) */
  .dropdown-content{
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      padding: 12px 16px;
      /* margin-left: 110em; */
      z-index: 1;     
      
  }

  /* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }

  /* Change color of dropdown links on hover */
.dropdown-content a:hover {
    background-color: #ddd;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    background-color:antiquewhite;
}

@font-face {
    font-family: 'freshmannormal';
    src: url('polices/freshman/freshman-webfont.woff2') format('woff2'),
         url('polices/freshman/freshman-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'gowaitalic';
    src: url('gowa-italic-webfont.woff2') format('woff2'),
         url('gowa-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'gowaregular';
    src: url('polices/gowa/gowa-regular-webfont.woff2') format('woff2'),
         url('polices/gowa/gowa-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}



#bienvenue{
    font-family: 'freshmannormal';
    text-align: center;
    border-width: 100%;
    border-style: solid;
    border-radius: 40px;
    border-left: 40px;
    border-right: 40px;
     height: 100px; 
     height: auto;
    width: 100%;
    font-size: 3em;
    background-color: antiquewhite;
    margin-right: 20em;    
}


#banniere img
{
    width: 100%;
    border-radius: 30px;
    display: flex;
    /* margin-left: 25%; */
}

#presentation{
    font-family: 'gowaregular';
    font-weight: bold;
    font-size: 2em;

}
#text_section{
}
section{
    font-family:sans-serif;
    padding-right: 10em;
    margin-right: 40px;
    margin-left: 40px;
    padding-bottom: 100px;
    font-size: 2em ;
    border: 10px;
    border-radius: 40px;
    border-style: solid ;
    border-color:antiquewhite;
    text-align: center;
}

.photodemoi{
    border-style: solid;
    border-color: antiquewhite;
    height: 7em;
    width: 6em;
    position: relative;
    bottom: 160px;
    left:8.5em; 
    float: right;
    border-radius: 20px;
}

/* Le bouton du dropdown*/
.dropbtn {
    font-family: 'freshmannormal';
    background-color: antiquewhite;
    color: black;
    padding: 16px;
    font-size: 18px;
    font-weight: bold;
    border: none;
    float: right;
    margin-right: 40px;
    margin-top: 1px;
  }
  
/* Configuration du container dropdown */

  /* Contenu du dropdown (qu'on a caché avec display:none) */
  .dropdown-content{
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      padding: 12px 16px;
      /* margin-left: 110em; */
      z-index: 1;     
      
  }

  /* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }

  /* Change color of dropdown links on hover */
.dropdown-content a:hover {
    background-color: #ddd;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    background-color:antiquewhite;
}

Hello guys I encounter a problem where i put my dropdown button to the far right of my page (which was initially to the far left) but the dropdown content shows to the far left when i hover over my dropdown button, obviously i tried to move it with the margin left px and it works, but the problem is that it is not responsive, if I reduce the page then im not seeing the dropdown content anymore when i hover over the dropdown button.

Here is my css code :

[enter image description here][1]

I edited with the code

before edit : [enter image description here][2]

before edit https://i.sstatic.net/zv2od.png after edit : https://i.sstatic.net/tup88.png

Solution

  • After seeing your screenshot i can tell that your problem is not defining your dropbtn as a relative position for your content your only defining the content as position absolute which will by default put it on the top left of your body. In order to fix it try to add position : relative; on your dropbtn And another thing is that when you use float you have to clear it after your done i personally don't prefer to use float instead you can define your button as a display:block; and than give it margin-left:auto; it will position it on the right side of your screen.