• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

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

Object Storage Arubacloud
0 głosów
737 wizyt
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

+1 głos
odpowiedź 18 lutego 2017 przez pablop76 VIP (123,180 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;
}

 

 

komentarz 21 lutego 2017 przez DariuszH Gaduła (3,100 p.)
Zapomniałem o jednym :) DZIĘKUJĘ !!! :D
0 głosów
odpowiedź 18 lutego 2017 przez ShiroUmizake Nałogowiec (46,300 p.)
Moze jakis przyklad live? (Np na fiddle?)

Podobne pytania

0 głosów
1 odpowiedź 172 wizyt
pytanie zadane 11 marca 2016 w HTML i CSS przez DariuszH Gaduła (3,100 p.)
0 głosów
2 odpowiedzi 403 wizyt
pytanie zadane 21 maja 2017 w HTML i CSS przez sonewbie Użytkownik (690 p.)
0 głosów
1 odpowiedź 126 wizyt
pytanie zadane 11 marca 2018 w HTML i CSS przez ShadoWs Bywalec (2,800 p.)

92,757 zapytań

141,679 odpowiedzi

320,437 komentarzy

62,101 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...