Hvordan få denne siden til å følge med når du scroller

[halvors]

Hei!

Jeg driver å lager denne siden, men vil at hvis siden #content er lengere en resten av nettsiden (innholdet på siden er lengere) skal #side og #ad følge ned langs siden.

Hvordan får jeg til dette, her er koden:

/* index.php */

body 
{
	background-color:#E0E0E0;
	margin:0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size:small;
	color:#000000;
}
#index
{
	position:absolute;
	width:1250px;
	border:solid 1px;
	border-color:#ffffff;
}
#top
{
	background-color:#333333;
	float:left;
	width:1100px;
	height:150px;
}
#main
{
	float:left;
	width:1100px;
	height:440px;
}
#side
{
	float:left;
	background-color:#333333;
	width:150px;
	height:440px;
}
#content
{
	float:left;
	background-color:#E0E0E0;
	width:950px;
	height:440px;
}
#ad
{
	float:right;
	background-color:#333333;
	width:150px;
	height:590px;
}

 

[olafmoriarty]

Fixed positioning

 

[olafmoriarty]

Kan hende du finner noe nyttig informasjon her også.

 

[halvors]

Men hvor kan jeg plasere den i coden min?

Får det ikke til, og jeg må vel da ikke sette height på content, ad, side?

Kan noen hjelpe meg?

Halvor.

 

[olafmoriarty]

Jo, såklart du kan ha height og width og alt det der, det er da ikke noe problem.

Denne koden bør fungere fint:

(EDIT: Koden redigert klokka 13:02 fordi den jeg opprinnelig la ut her hadde en ørliten bug -- den fjernet den hvite rammen rundt index-diven.)

/* index.php */

body 
{
	background-color:#E0E0E0;
	margin:0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size:small;
	color:#000000;
}
#index
{
	position:absolute;
	width:1250px;
	border:solid 1px;
	border-color:#ffffff;
}
#top
{
	background-color:#333333;
	width:1100px;
	height:150px;
}
#main
{
	width:1100px;
	height:440px;
}
#side
{
	position: fixed;
	top: 151px;
	left: 1px;
	background-color:#333333;
	width:150px;
	height:440px;
}
#content
{
	background-color:#E0E0E0;
	width:950px;
	height:440px;
	margin-left: 150px;
}
#ad
{
	position: fixed;
	left: 1101px;
	top: 1px;
	background-color:#333333;
	width:150px;
	height:590px;
}

Jeg går ut fra at koden som står i BODY-taggen din ser omtrent sånn ut:

<div id="index">
<div id="top">Top</div>
<div id="ad">Ad</div>
<div id="main">
<div id="side">Side</div>
<div id="content">
Content
</div>
</div>
</div>

(Hva var det som var så vanskelig, forresten? Jeg har aldri gjort dette før, jeg fulgte instruksene til W3Schools, og det fungerte aldeles utmerket nesten på første forsøk. CSS-attributter skal du selvsagt plassere i CSS-en for det enkelte element.)