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;
}
