Kiedy jest position: relative; miedzy obrazkiem a górną częścią strony jest przerwa. Co zrobić, żeby jej nie było? - żeby obrazek zaczynał się od samej góry? Kiedy jest position: fixed; obrazek zaczyna się od samej góry strony. ale wtedy sie nie scrolluje strona cała. :/
<!DOCTYPE html>
<html lang="pl-PL">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="Stylesheet" type="text/css" href="style.css"/>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html"; charset=iso-8859-2">
<meta charset="UTF-8">
<meta name="Description" content="Tu wpisz opis zawartości strony" />
<meta name="Keywords" content="gta, gta5, gta 5, gtav, gta v, roleplay, serwer roleplay, serwer rp, rp pl, gta rp, gta 5 rp, gta v rp, LightRP, rp light, gta light, gta lightrp, serwery roleplay, najlepsze serwery rp, najlepsze serwery roleplay, najlepsze, serwery, serwer, role play, role, play, najszybciej, rozwijający, się, serwer, grang theft auto, polish, server, polski, serwer, Zarabiaj z OjcemTheGamer, Miedziak, Jebac niemca"/>
<title>LightRP - Najszybciej Rozwijający Się Serwer RolePlay!</title>
</head>
<body>
<div class="witamy">
<h1><b>WITAMY NA LightRP!</b></h1>
<h2><b>NAJSZYBCIEJ ROZWIJAJĄCY SIĘ SERWER ROLEPLAY!</b></h2>
</div>
<div class="container">
<div id="prawy">
</div>
<!--MENU-------------------------------------->
<div class="content">
<div id="content">
<figure> <!--Slide'y-->
<img src="tlo2.png">
<img src="tlo3.png">
<img src="tlo4.png">
<img src="tlo5.png">
<img src="tlo2.png">
</figure>
</div>
<p class="logo"> <!--logo-->
<img src="logo2.png" alt="LightRP" align="top">
</p>
<div class="menu"> <!--Menu-->
<ul id="menu">
<li>Cechy</li>
<li class="join">Dołącz</li>
<li class="wl">WhiteList</li>
<li class="discord">
<a href="https://discord.gg/T2JTk9H">Discord</a>
</li>
<li>Zespół</li>
</ul>
</div>
</div>
<div class="cechy"> <!--DIV CECHY-->
<h3 class="cechyserwera">Cechy serwera LRP</h3>
<p>JDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJD<p>
<p>JDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJD<p>
<p>JDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJD<p>
<p>JDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJD<p>
</div>
<div class="dolacz"> <!--DIV DOŁĄCZ-->
<h3 id="dolacz">JAK WEJŚĆ NA SERWER?</h3>
<p>JDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJD<p>
<p>JDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJD<p>
<p>JDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJD<p>
<p>JDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJD<p>
<p>JDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJDJD<p>
</div>
<div class="zaproszenie'>
<p>Dołącz do nas już dzisiaj!</p>
<p>I kreuj historie swojej postaci</p>
</div>
<div class="stopka">
</div>
</div>
</body>
</html>
@font-face {
font-family: mojaczcionka;
src: url(Poppins-Medium.ttf);
}
@font-face{
font-family: mojaczcionkaBold;
src: url(Poppins-Bold.ttf);
}
@font-face {
font-family: ubuntumedium;
src: url(ubuntu-medium.ttf);
}
@font-face{
font-family: ubunturegular;
src: url(ubuntu-regular.ttf);
}
@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
* {
margin: 0px 0px;
padding: 0px 0px;
}
body {
margin:0;
padding:0;
height:100%;
text-align:center;
overflow: auto;
}
body { margin: 0; }
.content { overflow: hidden; }
.content figure img { width: 20%; float: left; }
.content figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
text-align: left;
font-size: 0;
animation: 30s slidy infinite;
padding: 0px;
}
.container {
max-width: 1900px;
overflow: hidden;
height: auto;
height: 100%;
width:100%;
background-color: #ffffff;
}
#menu, li {
list-style: none;
display: inline;
float: left;
text-decoration: none;
text-align: center;
white-space: nowrap;
padding: 5px 2px;
position: relative;
left: -120px; top: 10px;
}
li {
display: relative;
float: right;
font-family: mojaczcionka;
text-align: center;
font-size: 20px;
width: 120px;
text-decoration: none;
color: white;
text-shadow: -2px 2px 5px black;
margin: 0px -18px 1px 0px;
background: linear-gradient(currentColor, #1cd7f9) bottom / 0 .1em no-repeat;
transition-property: background-size;
transition: 1s background-size;
}
#menu {
float: left;
width: 100%;
padding: 0;
margin: 0;
list-style: none;
text-decoration: none;
max-width: 1900px;
}
.content {
width: 1900px;
height: 1100px;
background-repeat: no-repeat;
display:block;
left: 0px; top: 0px;
max-height: 830px;
right:0px;
position:relative;
}
a {
text-decoration:none;
color:#ffffff;
}
h1, h2 {
position: relative; z-index: 3;
font-family: ubuntu-medium;
color: #ffffff;
text-align: center;
top: 350px;
text-shadow: 7px 5px 5px black;
line-height: 1cm;
}
.container > .content > .logo {
display: inline;
text-shadow: -1px 1px 5px black;
position: fixed;
top: -190px;
left: -230px;
}
h1{
font-size: 48px;
z-index: 3;
clear:both
}
li:hover {
background-size: 100% .1em;
font-size: 25px;
}
.container > .content > .menu > #menu > li {
margin-top: 2px;
margin-right: 15px;
}
.container > .content > .menu > #menu {
position: fixed;
left: 0px;
}
img{
max-width: 100%;
width:auto;
position: relative;
height: auto;
position: relative;
top: 0;
left: 0;
right: 0;
margin: 0px;
padding: 0px;
}
body {
width:100%;
height: auto;
}
.cechyserwera {
position: relative;
text-align: center;
font-size: 40px;
font-family: mojaczcionka;
color: #515151;
clear:both;
}
.cechy {
background-color: #f7f7f7;
width: 100%;
text-align: center;
clear:both;
position: relative;
width:100%;
}
.dolacz {
clear:both;
position: relative;
width:100%;
bottom:0;
}
#content {
position: relative;
top: 0px;
height: 100%;
width: 100%;
float:left;
margin: 0px;
padding: 0px;
width:100%;
}
#dolacz{
position: relative;
width: 100%;
text-align: center;
top: -5px;
font-size: 30;
z-index: 3;
background-color: #ffffff;
clear:both;
}
#prawy {
position: relative;
float: right;
overflow:scroll;
}
.dolacz {
margin: 10px;
}
