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

Rozmieszczenie elementów podczas skalowania strony względem okna ekranu

VPS Starter Arubacloud
0 głosów
459 wizyt
pytanie zadane 12 marca 2016 w HTML i CSS przez DariuszH Gaduła (3,100 p.)

Podczas zmiany szerokości ekranu skaczą mi elementy gdzie popadnie. NIe bardzo wiem jak to ustawić. Ma ktoś pomysł ? :) Kod poniżej pod ostatnim obrazkiem :)

 

 

maxymalnie (całe okno)

 

 

minimalnie

i podczas przejścia z min do max (i vice versa)\

 

<!DOCTYPE html>
<html>
<head>
<title>HTML5, CSS3 and JavaScript demo</title>

 <link rel="stylesheet" type="text/css"  href="index.css" />
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" >
 
</head>
<body>
<!-- Start your code here -->

<div class="top">
	<div class="site1">
	     <div class="nazwa">HTML5 & <span class="css"> CSS3</class></div>
	     <div class="nazwa1">designed by <span class="css1">Dariusz Hozer</class></div>
	     <div class="foto"></div>
		 
	</div>
	
	
	
	<div class="site2"></div>
	<div class="site3"></div>
	<div class="site4"></div>
	<div class="site5"></div>
</div>



<!-- End your code here -->
</body>
</html>
div.top{
	
	 width:100%;
     height: auto;
	
	
	
	
	
}


/*początek 1 strony*/






div.site1{
	width:100%;
	background-image:url(blue.png);
	background-size:cover;
	height:1080px;
	
	
}


div.nazwa{
	
	font-family: Fantasy;
	word-spacing: 20px;
	letter-spacing:5px;
	font-size:140px;
	font-weight:normal;
	color:white;
	position:absolute;
	top:31%;
	left:23%;
	text-shadow:2px 4px  black;
}




 span.css{
	 color:	#1E90FF;
	 
	 
	 
 }



div.nazwa1{
	
	
	font-family: Fantasy;
	font-size:28.2px;
	font-weight:normal;
	color:	#F8F8FF;
    position:absolute;
	top:50%;
	right:20.8%;
	text-shadow:2px 3px black;
	
}


@media (max-width: 1000px ) 
{
div.nazwa
       {
    font-size: 3.5em; 
	top:31%;
	left:9%;
	word-spacing:1px;
	   }
	   

	
div.nazwa1
       {
    width:185px;
    font-size: 0.77em; 
	position:absolute;
	top:41.5%;
	left:60.5%;
	
	   }
	     
}

 span.css1{
	 color:#1E90FF	;
	 
	 
	 
 }
div.foto{
	
	background-image:url(darek.jpg);
	background-size:100% 100%;
	position:absolute;
	top:10.595cm;
	right:20.5%;
	width:158px;
	height:220px;
	opacity:0;
	transition:0.5s;
	
	
}

.foto:hover
{
	opacity:1;
	border: 0.9px solid #1E90FF;
    border-radius: 4px;
	position:absolute;
	top:10.595cm;
	right:20.5%;
	width:158px;
	height:220px;
	transition: 0.5s;
	
	
}

@media (max-width: 1000px )
{
	div.foto{
		
    background-image:url(darek.jpg);
	background-size:100% 100%;
	position:absolute;
	top:42.2%;	
	width:68px;
	height:99px;
	left: 73.4%;	
    opacity:0;
	
		
		
	}
	.foto:hover
{  
      background-image:url(darek.jpg);
	background-size:100% 100%;

    position:absolute;
	opacity:1;
	 border: 0.9px solid #1E90FF;
    border-radius: 4px;
	
	top:42.2%;	
	width:68px;
	height:99px;
	left: 73.4%;	
	
}
	
	
}






/*koniec 1 strony*/















/*początek 2 strony*/

div.site2{
	
	background-color:white;
	height:1080px;
	
}


/*koniec 2 strony */













div.site3{
	
	background-color:blue;
	height:1080px;	
}


div.site4{
	
	background-color:red;
	height:1080px;	
}
div.site5{
	
	background-color:grey;
	height:1080px;	
}




























 

2 odpowiedzi

0 głosów
odpowiedź 12 marca 2016 przez 0e85dc6eaf Dyskutant (8,840 p.)
wybrane 12 marca 2016 przez DariuszH
 
Najlepsza
Jeśli chcesz, żeby coś się ładnie skalowało to użyj wszędzie % i jednostek viewport (vw,vh). Żadnych px
komentarz 12 marca 2016 przez DariuszH Gaduła (3,100 p.)
Dzięki bardzo  :D
0 głosów
odpowiedź 12 marca 2016 przez arces Pasjonat (17,700 p.)
Użyj jednostek % w marginach, paddingach, width i height i powinno być okej. Po prostu dla każdego znacznika jaki chcesz, żeby był większy/mniejszy dopasowujesz wartości. Nic trudnego, wystarczy trochę wprawy, chociaż wiadomo, że też będzie trzeba kombinować z font-size i może się nie składać do całości na wszystkich rozdzielczościach tak jak byś chciał, ale będzie na pewno mniej roboty niż na px.
komentarz 12 marca 2016 przez 0e85dc6eaf Dyskutant (8,840 p.)
Na font-size masz właśnie jednostki viewport, czyli procent względem wielkości okna (font-size:1vh oznacza, że czcionka ma wielkość 1% wysokości okna)
komentarz 12 marca 2016 przez DariuszH Gaduła (3,100 p.)
Dzięki bardzo :D
komentarz 12 marca 2016 przez arces Pasjonat (17,700 p.)
Na font-size ja ogólnie używam remów, ale % też nie są złe. Chociaż akurat przy czcionkach zostałbym przy normalnych px, bo to nie ma aż takiego znaczenia. Bardziej chodzi o widht, height bloków.
komentarz 12 marca 2016 przez DariuszH Gaduła (3,100 p.)
Fajnie wszystko idzie :) Zmniejsza zwiększa się skalarnie, ale ten napis designed by wciąż skacze sobie byle gdzie :) a ustawienia position są takie same jak w pierwszym napisie  HTML & CSS3

Podobne pytania

0 głosów
1 odpowiedź 313 wizyt
0 głosów
0 odpowiedzi 126 wizyt
0 głosów
3 odpowiedzi 1,140 wizyt
pytanie zadane 10 września 2018 w HTML i CSS przez niezalogowany

92,786 zapytań

141,718 odpowiedzi

320,666 komentarzy

62,115 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!

...