Problème de taille avec CSS/HTML5

Je travaille actuellement sur un petit site web. J'ai quelques questions en ce qui concerne le positionnement, le dimensionnement, l'alignement de certains de mes boutons ...Problème de taille avec CSS/HTML5

Je voudrais que mes boîtes de rester toujours au centre de l'écran (✔).
Je voudrais avoir un schéma de bouton adaptatif afin qu'ils s'empilent les uns sur les autres lorsque la fenêtre devient suffisamment petite. Actuellement, ils sont regroupés et sont illisibles une fois que la page atteint une certaine taille (image ci-dessous). Je voudrais que mon texte d'inscription soit au bas de mes deux boutons. Il est actuellement du bon côté d'eux. Aussi, quand la fenêtre est à une certaine taille où les boîtes doivent être l'une sur l'autre et non à côté, je voudrais que mon texte d'inscription suive et passe sous la deuxième case. Ci-dessous, je vais partager mon code (les deux html & CSS) et je vais envoyer des photos de l'état actuel du site.

Merci d'avance.

CSS CODE

body{ 
    margin-top: 300px; 
    text-align: center; 
} 


.ownerButton, .employeeButton { 
    background-color: #333; 
    text-align: center; 
    text-decoration: none; 
} 



.ownerButton, .employeeButton { 
    font-family: "georgia", sans-serif; 
    font-size: 24px; 
    padding: 1em 2em; 
    margin: 3px; 
    border: 0; 
    outline: 0; 
    color: #000000; 
    background-color: #2196F3; 
    text-transform: uppercase; 
    border-radius: 0.15em; 
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); 

    font-weight: bold; 

    overflow: hidden; 
    position: relative; 
} 

.footer{ 
    font-family: sans-serif; 
    font-weight: bold; 
    font-size: 14px; 

    position: fixed; 
    left: 0; 
    bottom: 0; 
    width: 100%; 

    background-color: #2196F3; 
    text-align: center; 
}

HTML CODE

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
     <title>Belper</title> 
    <link rel="stylesheet" href="style.css"> 
    </head> 
    <body bgcolor=#4286f4> 

     <a href="http://www.google.com" class="ownerButton">Sign in as OWNER</a> 
     <a href="http://www.google.com" class="employeeButton">Sign in as EMPLOYEE</a> 

     <a href="http://google.com" class="signUp">Dont have an account? Sign up here!</a> 

     <div class="footer"> 
     <p>Copyright © 2000-2017 - Mathieu Larocque - All Rights Reserved.</p> 
     </div> 

    </body> 
</html>

Image while window is large

Image while window is small

Source

2017-10-05 Larocque

Vous pouvez ajouter display:block à une règle .signUp dans votre feuille de style pour l'obtenir sur une nouvelle ligne.

Vous pouvez également ajouter display: inline-block à la règle .ownerButton, .employeeButton

https://codepen.io/jbanegas/pen/xXpMKM?editors=1100

Source

2017-10-05 23:57:33

Cest parfait !!! Je vous remercie beaucoup pour votre aide Joe. – Larocque

Heureux d'aider, et bienvenue à Stack Overflow. Si cette réponse a résolu votre problème, veuillez le marquer comme accepté. :) –

Juste une petite question, comment envoyer le texte/boutons au centre exact de la fenêtre? Je pensais placer un logo en haut de la page! :-) – Larocque

Problème de taille avec CSS/HTML5

Répondre

Questions connexes