Deux boutons se chevauchent lors du positionnement? (HTML/CSS)

J'ai créé deux boutons que je voudrais placer sous mes boîtes de connexion d'entrée. Je veux qu'il soit réactif donc j'ai utilisé la valeur absolue mais quand je les déplace, les boutons se chevauchent soudainement! Des solutions? Voici mon index et stylesheet:Deux boutons se chevauchent lors du positionnement? (HTML/CSS)

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 
header { 
 
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(hero.jpeg); 
 
    background-size: cover; 
 
    background-position: center; 
 
    height: 100vh; 
 
} 
 
.login { 
 
    position: absolute; 
 
    /* Turns the the text box to absolute from static (allows free control of placement) */ 
 
    width: 100%; 
 
    max-width: 420px; 
 
    top: 30%; 
 
    left: 0px; 
 
    right: 0px; 
 
    height: auto; 
 
    font-size: 20pt; 
 
    margin: 0px auto; 
 
    padding: 15px; 
 
} 
 
#space-password { 
 
    padding-top: 20px; 
 
} 
 
html { 
 
    color: whitesmoke; 
 
    font-weight: 100; 
 
    font-family: 'Lato', 'Arial', sans-serif; 
 
    text-rendering: optimizeLegibility; 
 
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(hero.jpeg); 
 
} 
 
input { 
 
    border-radius: 50px; 
 
    height: 38px; 
 
    width: 100%; 
 
    color: aliceblue; 
 
    border: 2px solid #999; 
 
    background-color: #34495e; 
 
    box-sizing: border-box; 
 
    padding-left: 14px; 
 
    padding-right: 14px; 
 
    margin-top: 5px; 
 
    font-size: 17px; 
 
    font-family: 'Lato', 'Arial', sans-serif; 
 
} 
 
.btn:link, 
 
.btn:visited { 
 
    display: inline-block; 
 
    padding: 10px 30px; 
 
    /*This padding and border radius round border and define how big it is */ 
 
    font-weight: 300; 
 
    text-decoration: none; 
 
    border-radius: 200px; 
 
    transition: background-color 0.2s, border 0.2s, color 0.2s; 
 
    /* makes color subtly change instead of instantly. More applealing */ 
 
} 
 
.btn-full:link, 
 
.btn-full:visited { 
 
    background-color: #3498db; 
 
    /* From flat UI colors */ 
 
    border: 1px solid #3498db; 
 
    color: #fff; 
 
} 
 
.btn-ghost:link, 
 
.btn-ghost:visited { 
 
    border: 1px solid #3498db; 
 
    color: #3498db; 
 
} 
 
.btn:hover, 
 
.btn:active { 
 
    background-color: #7cbde8; 
 
} 
 
.btn-full:hover, 
 
.btn-full:active { 
 
    border: 1px solid #3498db; 
 
    /* Fixed issue of text disipearing in color and borders being different color for both full and ghost */ 
 
} 
 
.btn-ghost:hover, 
 
.btn-ghost:active { 
 
    border: 1px solid #3498db; 
 
    color: #fff; 
 
}

<!DOCTYPE> 
 
<html lan="en"> 
 

 
<head> 
 
    <link rel="stylesheet" type="text/css" href="vendors/css/normalize.css"> 
 
    <link rel="stylesheet" type="text/css" href="css/style.css"> 
 
    <link href="https://fonts.googleapis.com/css?family=Lato:300,400" rel="stylesheet"> 
 
    <title>Welcome-Sign in</title> 
 

 
</head> 
 

 
<body> 
 
    <header> 
 
    <form class="login"> 
 
     <p>Apple ID:</p> 
 
     <br> 
 
     <input type="text" name="Apple ID"> 
 
     <br> 
 
     <p id="space-password">Password:</p> 
 
     <br> 
 
     <input type="password" name="Password"> 
 
    </form> 
 
    <div> 
 
     <a class="btn btn-full" href="#">Login</a> 
 
     <a class="btn btn-ghost" href="#">Don't have an acount? Sign up!</a> 
 
    </div> 
 

 
    </header> 
 

 
</body> 
 

 
</html>

Source

2016-10-28 Temple Naylor

Il serait vraiment difficile de rendre la page réactive avec des éléments positionnés en absolu. Familiarisez-vous avec les requêtes média css à la place: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries – Esko

Essayez cette ...

Il n'y a pas de relation entre position:absolute et responsive design. Puisque vous avez l'intention de le faire avec absolu, placez simplement votre bouton div dans le formulaire.

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 
header { 
 
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(hero.jpeg); 
 
    background-size: cover; 
 
    background-position: center; 
 
    height: 100vh; 
 
} 
 
.login { 
 
    position: absolute; 
 
    /* Turns the the text box to absolute from static (allows free control of placement) */ 
 
    width: 100%; 
 
    max-width: 420px; 
 
    top: 30%; 
 
    left: 0; 
 
    right: 0px; 
 
    height: auto; 
 
    font-size: 20pt; 
 
    margin: 0px auto; 
 
    padding: 15px; 
 
} 
 
#space-password { 
 
    padding-top: 20px; 
 
} 
 
html { 
 
    color: whitesmoke; 
 
    font-weight: 100; 
 
    font-family: 'Lato', 'Arial', sans-serif; 
 
    text-rendering: optimizeLegibility; 
 
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(hero.jpeg); 
 
} 
 
input { 
 
    border-radius: 50px; 
 
    height: 38px; 
 
    width: 100%; 
 
    color: aliceblue; 
 
    border: 2px solid #999; 
 
    background-color: #34495e; 
 
    box-sizing: border-box; 
 
    padding-left: 14px; 
 
    padding-right: 14px; 
 
    margin-top: 5px; 
 
    font-size: 17px; 
 
    font-family: 'Lato', 'Arial', sans-serif; 
 
} 
 
.btn{ 
 
    margin-top:30px; 
 
    font-size: 14px !important; 
 
} 
 
.btn:link, 
 
.btn:visited { 
 
    display: inline-block; 
 
    padding: 10px 30px; 
 
    /*This padding and border radius round border and define how big it is */ 
 
    font-weight: 300; 
 
    text-decoration: none; 
 
    border-radius: 200px; 
 
    transition: background-color 0.2s, border 0.2s, color 0.2s; 
 
    /* makes color subtly change instead of instantly. More applealing */ 
 
} 
 
.btn-full:link, 
 
.btn-full:visited { 
 
    background-color: #3498db; 
 
    /* From flat UI colors */ 
 
    border: 1px solid #3498db; 
 
    color: #fff; 
 
} 
 
.btn-ghost:link, 
 
.btn-ghost:visited { 
 
    border: 1px solid #3498db; 
 
    color: #3498db; 
 
} 
 
.btn:hover, 
 
.btn:active { 
 
    background-color: #7cbde8; 
 
} 
 
.btn-full:hover, 
 
.btn-full:active { 
 
    border: 1px solid #3498db; 
 
    /* Fixed issue of text disipearing in color and borders being different color for both full and ghost */ 
 
} 
 
.btn-ghost:hover, 
 
.btn-ghost:active { 
 
    border: 1px solid #3498db; 
 
    color: #fff; 
 
}

<!DOCTYPE> 
 
<html lan="en"> 
 

 
<head> 
 
    <link rel="stylesheet" type="text/css" href="vendors/css/normalize.css"> 
 
    <link rel="stylesheet" type="text/css" href="css/style.css"> 
 
    <link href="https://fonts.googleapis.com/css?family=Lato:300,400" rel="stylesheet"> 
 
    <title>Welcome-Sign in</title> 
 

 
</head> 
 

 
<body> 
 
    <header> 
 
    <form class="login"> 
 
     <p>Apple ID:</p> 
 
     <br> 
 
     <input type="text" name="Apple ID"> 
 
     <br> 
 
     <p id="space-password">Password:</p> 
 
     <br> 
 
     <input type="password" name="Password"> 
 
     <div> 
 
     <a class="btn btn-full" href="#">Login</a> 
 
     <a class="btn btn-ghost" href="#">Don't have an acount? Sign up!</a> 
 
    </div> 
 
    </form> 
 
    
 

 
    </header> 
 

 
</body> 
 

 
</html>

Edit: Ceci est pour votre commentaire. Aussi, je vous recommande d'utiliser les requêtes Media pour une mise en page responsive.

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 
header { 
 
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(hero.jpeg); 
 
    background-size: cover; 
 
    background-position: center; 
 
    height: 100vh; 
 
} 
 
.login { 
 
    position: absolute; 
 
    /* Turns the the text box to absolute from static (allows free control of placement) */ 
 
    width: 100%; 
 
    max-width: 420px; 
 
    top: 30%; 
 
    left: 0; 
 
    right: 0px; 
 
    height: auto; 
 
    font-size: 20pt; 
 
    margin: 0px auto; 
 
    padding: 15px; 
 
} 
 
#space-password { 
 
    padding-top: 20px; 
 
} 
 
html { 
 
    color: whitesmoke; 
 
    font-weight: 100; 
 
    font-family: 'Lato', 'Arial', sans-serif; 
 
    text-rendering: optimizeLegibility; 
 
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(hero.jpeg); 
 
} 
 
input { 
 
    border-radius: 50px; 
 
    height: 38px; 
 
    width: 100%; 
 
    color: aliceblue; 
 
    border: 2px solid #999; 
 
    background-color: #34495e; 
 
    box-sizing: border-box; 
 
    padding-left: 14px; 
 
    padding-right: 14px; 
 
    margin-top: 5px; 
 
    font-size: 17px; 
 
    font-family: 'Lato', 'Arial', sans-serif; 
 
} 
 
.btn { 
 
    margin-top: 30px; 
 
    font-size: 14px !important; 
 
} 
 
.btn:link, 
 
.btn:visited { 
 
    display: inline-block; 
 
    padding: 10px 30px; 
 
    /*This padding and border radius round border and define how big it is */ 
 
    font-weight: 300; 
 
    text-decoration: none; 
 
    border-radius: 200px; 
 
    transition: background-color 0.2s, border 0.2s, color 0.2s; 
 
    /* makes color subtly change instead of instantly. More applealing */ 
 
} 
 
.btn-full:link, 
 
.btn-full:visited { 
 
    background-color: #3498db; 
 
    /* From flat UI colors */ 
 
    border: 1px solid #3498db; 
 
    color: #fff; 
 
} 
 
.btn-ghost:link, 
 
.btn-ghost:visited { 
 
    border: 1px solid #3498db; 
 
    color: #3498db; 
 
} 
 
.btn:hover, 
 
.btn:active { 
 
    background-color: #7cbde8; 
 
} 
 
.btn-full:hover, 
 
.btn-full:active { 
 
    border: 1px solid #3498db; 
 
    /* Fixed issue of text disipearing in color and borders being different color for both full and ghost */ 
 
} 
 
.btn-ghost:hover, 
 
.btn-ghost:active { 
 
    border: 1px solid #3498db; 
 
    color: #fff; 
 
} 
 
.btns { 
 
    position: absolute; 
 
     /* Turns the the text box to absolute from static (allows free control of placement) */ 
 
     width: 100%; 
 
     top: 300px; 
 
     left: 15%; 
 
     right: 0px; 
 
     height: auto; 
 
     font-size: 14pt; 
 
     margin: 0px auto; 
 
     padding: 15px; 
 
}

<!DOCTYPE> 
 
<html lan="en"> 
 

 
<head> 
 
    <link rel="stylesheet" type="text/css" href="vendors/css/normalize.css"> 
 
    <link rel="stylesheet" type="text/css" href="css/style.css"> 
 
    <link href="https://fonts.googleapis.com/css?family=Lato:300,400" rel="stylesheet"> 
 
    <title>Welcome-Sign in</title> 
 

 
</head> 
 

 
<body> 
 
    <header> 
 
    <form class="login"> 
 
     <p>Apple ID:</p> 
 
     <br> 
 
     <input type="text" name="Apple ID"> 
 
     <br> 
 
     <p id="space-password">Password:</p> 
 
     <br> 
 
     <input type="password" name="Password"> 
 

 
    </form> 
 
    <div class="btns"> 
 
     <a class="btn btn-full" href="#">Login</a> 
 
     <a class="btn btn-ghost" href="#">Don't have an acount? Sign up!</a> 
 
    </div> 
 

 
    </header> 
 

 
</body> 
 

 
</html>

Source

2016-10-28 05:05:56 Sankar

Cela n'a pas aidé un peu, mais merci pour votre contribution. Comme je l'ai dit, quand je fais cela, les boutons se chevauchent. Je voulais un moyen de placer les deux boutons comme je veux. –

@TempleNaylor vérifier maintenant – Sankar

Au lieu d'utiliser <a></a> balise pour créer des boutons que vous pouvez utiliser pour créer <button></button> tag bouton. Cela évitera le chevauchement des boutons. Pourquoi pensez-vous que vous devriez utiliser la positionnalité absolue pour la rendre réactive?

<!DOCTYPE> 
    <html lan="en"> 
    <head> 
    <link rel="stylesheet" type="text/css" href="vendors/css/normalize.css"> 
    <link rel="stylesheet" type="text/css" href="css/style.css"> 
    <link href="https://fonts.googleapis.com/css?family=Lato:300,400" rel="stylesheet"> 
    <title>Welcome-Sign in</title> 

</head> 
<body> 
    <header> 
     <form class="login"> 
      <p>Apple ID:</p><br> 
      <input type="text" name="Apple ID"><br> 
      <p id="space-password">Password:</p><br> 
      <input type="password" name="Password"> 
     </form> 
     <div> 
      <button class="btn btn-full" >Login</button> 
      <button class="btn btn-ghost">Don't have an acount? Sign up!  </button> 
     </div> 

    </header> 

</body>

Source

2016-10-28 05:09:33

Vous ne voyez pas comment cela peut vous aider? C'est juste mon code d'index qui est toujours le même. –

Deux boutons se chevauchent lors du positionnement? (HTML/CSS)

Répondre

Questions connexes