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

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

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

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