Niepotrzebnie latające elementy przy zmniejszaniu szerokości okna z 100 %

pytanie zadane 18 lutego 2017 w HTML i CSS przez DariuszH Gaduła (3,100 p.)
edycja 18 lutego 2017 przez Patrycjerz

Przy zmniejszaniu szerokości okna: napis email i hasło oraz okienka zaczynają szaleć. Jak ustalić,by nie latały?

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
    <meta charset="UTF-8">
    <script type="text/javascript" src="www.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="www.css" type="text/css" />
    <script src="www.js"></script>
</head>

    
    
    
<body>
  
<div class="menu"> 
        <div class="formularz"> 
            <form action="logowanie.php" method="post" id="loginForm">
         
                <label for="email" style="color:white;">e-mail :</label><input type="email" name="email" id="email"  required></label></br>

                <label for="haslo" style="color:white;">hasło :</label><input type="haslo" name="haslo" id="haslo" required></label>
            
        <input type="submit" value="Zaloguj" style="position:relative;top:5vh; left:75%;">
  
        </form>   
     </div>  
</div> 
    
            
</div>
              
<div class="main">
    
    

    
</div>




<div class="footer"></div>

   
</body>

          </html>

body{
  
width:100%;
height:auto;
padding:0;
margin:0;
}

.menu{

width:100%;
height:18.5vh;
background-color:black;
   
}


.formularz{
    margin: auto;
    padding: auto;
    width: 15%;
    height:auto;
    position: relative;
    top:3.5vh;
    left:100%;
  
    
    
 
}

input[type=email]{
float:right;
    width: 20vh;
    height: auto;
}

input[type=haslo]{
    
    float:right;
    width: 19.8vh;
    height: auto;
    
}

label[for=haslo]{
 position: relative;
    top: 2.4vh;
    left:0.91vh;
    
    
}

label[for=email]{
 position: relative;
    top: 0.1vh;
    left:0.91vh;
    
    
}



.main{
  
width:100%;
height:100vh;
background-color:#3299CC;

}

.footer{
    width:100%;
height:20vh;
background-color:black;
    
}

      
 $(document).ready(function(){
    $('.formularz').each(function(){
       $('.formularz').animate({
           left:'83.8%',
           
 });
   });
     });

2 odpowiedzi

odpowiedź 18 lutego 2017 przez pablop76 VIP (123,580 p.)

Witam. Pozycjonowanie relative stosuje się za zwyczaj aby uczynić z obiektu pojemnik na elementy pozycjonowane absolutnie względem niego. Przesunięcie elementu pozycjonowanego relative stwarza problemy przy zmianie rozmiarów okna przeglądarki więc za zwyczaj się go nie przesuwa.

Formatowanie formularza do poprawki.

Może zacznij od czegoś takiego

.formularz{
  float: right;
  background-color: grey;
  padding: .5%;
}
input:not([type='submit']){
  float: right;
}
input[type='submit']{
display: block;
margin-left: 32%;
}

label{
  line-height: 200%;
  padding: 0 10px;
}