Problem sa scroll-anjem stranice

Programiranje
1

Pozdrav svima, Novi sam u izradi webstranica, te sam izradio dio jedne u photoshopu. Želio sam ikodirati ovo što sam odradio za početak da vidim kako to izgleda. Sve super sam uspio onako kako sam želio, ali stranica mi ima “viška” slobodnog prostora. U desno mi može scrollati za duplo više nego što je moja stranica velika, te prema dolje isto duplo više od same stranice. Postavit ću vam svoj kod pa ako itko može pomoći oko toga molim da pomogne. hvala!

Html:

    <title>EcoLife</title>
    <link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
		
		<!-- zaglavlje -->
		
			<div id="zaglavlje">
				<center>
				<img src="zaglavlje.png" />
				</center>
					
			</div>
			
			<div id="logo">
				<img src="logo.png" />
			</div>
			
			<div id="zivizdravo">
				<img src="zivizdravo.png" />
			</div>
			
			<div id="onama">
				<img src="o nama.png" />
			</div>
			
				<div id="onama1">
					<p> O nama </p>
				</div>
			
			<div id="proizvodi">
				<img src="proizvodi.png" />
			</div>
			
				<div id="proizvodi1">
					<p> Proizvodi </p>
				</div>
			
			<div id="kontakt">
				<img src="kontakt.png" />
			</div>
			
				<div id="kontakt1">
					<p> Kontakt </p>
				</div>
				
			<div id="facebook">
			<img src="facebook.png" />
			</div>
			
				<div id="facebook1">
				<p> Facebook </p>
				</div>
			
			<div id="twitter">
			<img src="twitter.png" />
			</div>
			
				<div id="twitter1">
				<p> Twitter </p>
				</div>
			
			<div id="google">
			<img src="google.png" />
			</div>
			
				<div id="google1">
				<p> Google+ </p>
				</div>
			
		<!-- središte -->
			
			<div id="pozadina" >
			<center>
			<img src="pozadina.png" />
			</center>
			</div>

CSS:

ovdje /* zaglavlje */

#zaglavlje
{
position: relative;
top: -8px;

}

#logo
{
position: relative;
top: -180px;
left: 305px;
}

#zivizdravo
{
position: relative;
top: -275px;
left: 700px;
}

#onama
{
position: relative;
top: -234px;
left: 186px;
}

#onama1
{
position: relative;
top: -287px;
left: 223px;
font-family: Arial;
font-size: 20px;
color:#355b2a
}

#proizvodi
{
position: relative;
top: -340px;
left: 350px;
}

#proizvodi1
{
position: relative;
top: -392px;
left: 385px;
font-family: Arial;
font-size: 20px;
color:#355b2a
}

#kontakt
{
position: relative;
top: -446px;
left: 515px;
}

#kontakt1
{
position: relative;
top: -498px;
left: 557px;
font-family: Arial;
font-size: 20px;
color:#355b2a
}

#facebook
{
position: relative;
top: -550px;
left: 730px;
}
#facebook1
{
position: relative;
top: -595px;
left: 765px;
font-family: Arial;
font-size: 15px;
color:#cddb2e
}

#twitter
{
position: relative;
top: -638px;
left: 880px;
}

#twitter1
{
position: relative;
top: -682px;
left: 915px;
font-family: Arial;
font-size: 15px;
color:#cddb2e
}

#google
{
position: relative;
top: -726px;
left: 1010px;
}

#google1
{
position: relative;
top: -767px;
left: 1045px;
font-family: Arial;
font-size: 15px;
color:#cddb2e
}

/* središte */

#pozadina
{
position:relative;
top: -775px;
}
2

Pozdrav IvanPosavec,

S obzirom da si početnik preporučam ti da malo guglaš CSS tutorjiale ili barem CSS svojstvo position. Krivo ga koristiš, za svaki si element skoro postavio position: relative.

Ono što si ti zapravo želio uraditi je u CSSu napisati

body {
position: relative;
}

i onda za sve te elemente koje si već postavio position: relative; zapravo želiš promijeniti u position: absolute; mada nije ni to “najzdravije” rješenje da se toliko puta ponavljaš u kodu iako će ti to riješiti tvoj problem sa skrolanjem stranice. Preporučam korisnika thenewboston na Youtubeu i njegov HTML+CSS tečaj. U par dana ćeš savladati osnovno i neće praviti početničke greške kojih si trenutno prepun. Nisi niti otvorio niti zatvorio html tag, otvorio si body tag ali si ga zaboravio zatvoriti itd.

3

Ma probavao sam sve to s positionom, al nikako nevalja.
Ma jesam, samo mi kod nesto zeza kad ga stavljam tu na forum, vidiš da uopče neće poprimit svojstva pola toga koda neko nekakve naslove stavlja itd.

4

To ti mora raditi.

Kada kopiraš kod na forum, imaš ovdje iznad gdje pišeš post ikonicu za kod (izgleda ovako </>) i onda označiš sav kod koji si kopirao i klikneš na tu ikonicu.

Dakle, evo ti CSS

#zaglavlje
{ 
position: absolute;
top: -8px;

}

#logo
{
position: absolute;
top: -180px;
left: 305px;
}

#zivizdravo
{
position: absolute;
top: -275px;
left: 700px;
}

#onama
{
position: absolute;
top: -234px;
left: 186px;
}

#onama1
{
position: absolute;
top: -287px;
left: 223px;
font-family: Arial;
font-size: 20px;
color:#355b2a
}
#proizvodi
{
position: absolute;
top: -340px;
left: 350px;
}

#proizvodi1
{
position: absolute;
top: -392px;
left: 385px;
font-family: Arial;
font-size: 20px;
color:#355b2a
}
#kontakt
{
position: absolute;
top: -446px;
left: 515px;
}

#kontakt1
{
position: absolute;
top: -498px;
left: 557px;
font-family: Arial;
font-size: 20px;
color:#355b2a
}
#facebook
{
position: absolute;
top: -550px;
left: 730px;
}
#facebook1
{
position: absolute;
top: -595px;
left: 765px;
font-family: Arial;
font-size: 15px;
color:#cddb2e
}

#twitter
{
position: absolute;
top: -638px;
left: 880px;
}

#twitter1
{
position: absolute;
top: -682px;
left: 915px;
font-family: Arial;
font-size: 15px;
color:#cddb2e
}
#google
{
position: absolute;
top: -726px;
left: 1010px;
}

#google1
{
position: absolute;
top: -767px;
left: 1045px;
font-family: Arial;
font-size: 15px;
color:#cddb2e
}
/* središte */

#pozadina
{
position:absolute;
top: -775px;
}
body {
position: relative;
}

I nemoj zaboraviti zatvoriti </body> tag i naravno nedostaje ti otvaranje i zatvaranje html taga.
Još jednom ti preporučam da posjetiš link na Youtube kanal koji sam ti dao i pogledaš malo kako se to radi jer si pošao u krivom smjeru.

5

Sad je sve nešto pobrkano, sad znači bi trebalo ponovno sve pixele posložit.

6

Da, zato jer si od početka radio krivo.

Ali nije ti najpametnije rješenje to što radiš. Još jednom pogledaj par tutorijala s onog linka i vidjet ćeš da možeš puno brže i bez tog “odokativnog” poslagivanja sve srediti za puno manje vremena. Kako hoćeš.