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

Jak ustalić div, żeby nie przemieszczał się podczas zmniejszania na szerokość okna przeglądarki ?

Aruba Cloud - Virtual Private Server VPS
0 głosów
270 wizyt
pytanie zadane 5 listopada 2017 w HTML i CSS przez DariuszH Gaduła (3,100 p.)

 

Chodzi mi o to, żeby "html css3 jquery sql" nie przesuwało się (nie rzucało się w oczy swoim przesuwaniem się) podczas zmniejszania okna. Strona jest responsywna. w ustawieniach na max jest ok, w ustawieniach na min jest ok, tylko między wersją komputerową (max) a smartfonową (min) div .window_learn robi co chce. Jak z tego wybrnąć (tzn. niech się zmniejsza poprzez skalowanie) 



<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<link rel="stylesheet" href="index.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">   
<link href="https://fonts.googleapis.com/css?family=Archivo+Black" rel="stylesheet">  
 <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 
<link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet">
    
    
</head>

<body>

    
    
            
<div class="header">
     
         <div class="face"> <img src="face.png" style="widht:6vh; height:6vh; "></div> 
    
         <div class="twitter"> <img src="twitter.png" style="widht:6vh; height:6vh; "></div> 
    
    
         <div class="mail"> <img src="mail.png" style="widht:6vh; height:6vh; "></div> 
    
  
         <div class="dane">  <div class="name">DARIUSZ </div><div class="surname"> HOZER</div></div>
    
    
 </div>   
    
    
    
    
<div class="main">
    
        <div class="web_designer">WEB DESIGNER</div> 

        <div class="window_learn" >
            <div class="html5">HTML5</div>
            <div class="jquery">JQUERY</div>
            <div class="css3">CSS3</div>
            <div class="php5">PHP5</div>
            <div class="sql">MySQL</div>
        </div>

    <div class="passion">PASJA TWORZENIA STRON</div>
    
    </div>
    
    
    
    
</body>

</html>

@media (max-width: 599px){


body{
    width:100%;
    margin: 0;
    
    
}


    

.header
{
    position: fixed;
    z-index: 100;

    width: 100%;
    height: 11vh;

    background-color: black;
    background-size: 100% 100%;
}
    
    
    
 
.face,
.twitter,
.mail
{
    float: left;

    width: 6vh;
    height: 6vh;
    margin-top: 2.4vh;
    margin-right: 1vh;
    margin-left: 1.5vh;
}


.face:hover,
.mail:hover,
.twitter:hover
{
    float: left;

    width: 6vh;
    height: 6vh;
    margin-top: 2.4vh;
    margin-left: 1.5vh;

    border: 1px solid aqua;
    border-radius: 10%;
}
    
  
.dane
{
    float: right;

    width: 7.2vh;
    height: 5vh;
    margin-top: 3vh;
    margin-right: 5vh;
}


    
    .name
{
    font-family: 'Montserrat', sans-serif;
    font-size: 1.7vh;

    display: inline;

    color: aliceblue;
}



.surname
{
    font-family: 'Archivo Black', sans-serif;
    font-size: 1.7vh;

    display: inline;
    float: right;

    color: silver;
}

    
.window_learn
{
    display: none;
    }
    
   

.main
.web_designer
{
    font-family: 'Roboto', sans-serif;
    font-size: 5vh;
    font-weight: 800;

    position: relative;
    top: 40vh;
    left:18.5%;

    display: none;
    
    
    width: 60%;
    height: 10vh;

    text-align: center;

    color: orangered;
}
 
    

    
    
   

    
 
.main
.passion
{
    font-family: 'Roboto', sans-serif;
    font-family: 'Abel', sans-serif;
    font-size: 2.6vh;
    font-weight: 500;

    display: inline;
    display: none;
    position: relative;

    width:70%;
    height: 15vh;
    top: 45vh;
    left: 13.3%;

    text-align: center;
} 
 
 


 
    
}









@media (min-width: 599px)  {
    
    
 
.header
{
    position: fixed;
    z-index: 100;

    width: 100%;
    height: 11vh;

    background-color: black;
    background-size: 100% 100%;
}

  
    



.face,
.twitter,
.mail
{
    float: left;
    
    width: 6vh;
    height: 6vh;
    margin-top: 2.4vh;
    margin-right: 1vh;
    margin-left: 1.5vh;
    
    
    
    display: none;
}



.face:hover,
.mail:hover,
.twitter:hover
{
    float: left;

    width: 6vh;
    height: 6vh;
    margin-top: 2.4vh;
    margin-left: 1.5vh;

    border: 1px solid aqua;
    border-radius: 10%;
}


.dane
{
    float: right;

    width: 24vh;
    height: 10vh;
    margin-top: 4vh;
    margin-right: 3vh;
}

    
 
.name
{
    font-family: 'Montserrat', sans-serif;
    font-size: 2.7vh;

    display: inline;

    color: aliceblue;
}




.surname
{
    font-family: 'Archivo Black', sans-serif;
    font-size: 2.7vh;

    display: inline;
    float: right;

    color: silver;
}

    

.window_learn
{
    position: relative;
    top: 33.4vh;
    left: 29.4%;
 
 
   

    width:37%;
    height: 12vh;
    animation: mymove 2s ;
    animation-iteration-count: 1; 
}
    
   @-webkit-keyframes mymove {
    0%   {top: -15vh;}
    
    100% {top: 33.4vh;}
} 
    
    
 
.html5,
.css3,
.jquery,
.sql,
.php5
{   width: 100%;
    height: auto;
    font-family: 'Archivo Black', sans-serif;
    font-size: 2.5vh;
    line-height: 13vh;
     margin-left: 4.6vh;
   
    display: inline;
   
    color: #444;
    
   
}
 

.html5:hover,
.css3:hover,
.jquery:hover,
.sql:hover,
.php5:hover
{
    font-family: 'Archivo Black', sans-serif;
    font-size: 2.5vh;
    line-height: 13vh;
     margin-left: 4.6vh;
    
    display: inline;

    color: darkturquoise;
    border-radius: 100%;
}

    
    
    
}


.web_designer
{
    font-family: 'Roboto', sans-serif;
    font-size: 11vh;
    font-weight: 800;

    position: relative;
    top: 50vh;
    left:18%;

    display: none;
    
    
    width: 60%;
    height: 10vh;
    
    text-align: center;

    color: orangered;
}

 
.passion
{
    font-family: 'Roboto', sans-serif;
    font-family: 'Abel', sans-serif;
    font-size: 3.1vh;
    font-weight: 500;

    display: inline-block;
    display: none;
    position: relative;

    width: 50%;
    height: 15vh;
    top: 39.3vh;
    left: 29.6%;

    text-align: center;
    letter-spacing: 0.85vh;
    word-spacing: .1vh;
}

   
}

<script>
        
              $(document).ready(function(){
            $(".web_designer").each(function(){

                $(".web_designer").fadeIn(3000);
            });
        }); 
        
          $(document).ready(function(){
            $(".passion").each(function(){

                $(".passion").show(1000);
            });
        }); 
        
        
   $(document).ready(function(){
                $(".window_learn").each(function(){
                    $(".html5,.css3,.jquery,.sql,.php5").fadeIn(1000);
                });
       
   });
    
    
       $(document).ready(function(){
                $(".face").each(function(){
                    $(".face").fadeIn(1800);
                    $(".twitter").fadeIn(1800);
                    $(".mail").fadeIn(1800);
                   
               
                });
             }); 
                  
                  $(document).ready(function(){
                $(".dane").each(function(){
                    $(".dane").fadeIn(1800);
                    
               
                });
             });
                  
                  
                       $(document).ready(function(){
                $(".learn").each(function(){
                    $(".html5,.css3,.jquery,.sql,.php5").fadeIn(1000);
                
               
                });
             });
      
    
  

 

1 odpowiedź

0 głosów
odpowiedź 5 listopada 2017 przez pablop76 VIP (123,540 p.)
Witam. Nie powtarzaj tematów. Odpowiedziałem Ci w poprzednim pytaniu. Twoje elementy nie mieszczą się w pojemnikach przy zmianie rozdzielczości i nim dojdzie do punktu przełamania rozlatują się. Jeżeli pojemnik ma np: 500px a punkt przełamania 400px to między 400 a 500 zawartość się rozlatuje. To tak ogólnie.

Podobne pytania

0 głosów
1 odpowiedź 549 wizyt
0 głosów
0 odpowiedzi 339 wizyt

93,324 zapytań

142,323 odpowiedzi

322,390 komentarzy

62,653 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

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...