Emplacement des élement (css)

Marsh Posté le 06-02-2017 à 02:07:07

Bonjour,

je travaille en informatique mais ne fais que les réparation, les montages etc..
du coup je n'apprend rien en programmation.

je me suis surpris a "m'amuser" en découvrant le web (html / css / php)

malheureusement j'ai beaucoup de lacune.
et malgré beaucoup de recherche, je n'arrive pas a trouvé se que je cherche.

c'est surement sous mes yeux sans que je le sache et je m'en excuse.
je vous demande donc de l'aide:

quand je mets la fenêtré sur un autre écran a plus petite résolution ou en "fenêtrée" mes élément ne sont plus au même endroit. voir les photos.

voila mon CSS

Spoiler :

body { /*image de fond et couleur du texte */
background: white url(../divers/images/stretched.png) no-repeat;
margin: 0 auto;
background-size: 100%;
color:white;}

h1{ /* regles pour la norme du titre h1 */
font-family:sm, sans-serif;
font-size:6em;}

small{ /* regles pour la norme du titre h1 */
font: 2.5em/1em variant;}

@font-face{
font-family:sm;
src: url(../divers/font/Starjedi.ttf);}

@font-face{
font-family:efect;
src: url(../divers/font/efect.ttf);}

.SandyBrown {color :#ffa64d;
font-family:efect;
font-size: 105px;} /* couleur souhaité*/

.centrage {position: absolute; /*Titre*/
top: 7.4%;
left: 38.7%;}

.SousTitre {position: absolute; /*Titre*/
color :#800000;
top: 30%;
left: 63%;
font-family: Times, serif;}

.container img{
width: 200px;
height: 200px;
border-radius: 100%;
margin-top: -90px;
margin-bottom: 20px;}

.container{
width: 500px;
height: 517.5px;
text-align: center;
background-color: rgba(20, 20, 20, 0.85);
border-radius:18px;
margin: 0 auto;
margin-top: 19.5%;}

input[type="text"],input[type="password"],input[type="email"]{
height: 45px;
width: 300px;
font-size: 18px;
margin-bottom: 16px;
background-color: #fff;
padding-left: 5%;}

.btn-login{
padding: 15px 25px;
font-size: 21px;
color: #fff;
background-color: orangered;
border-radius:15px;}