webForumDet fria alternativet

positionering deluxe....

HTML & CSS

5 svar · 399 visningar · startad av alnö_mattias

Medlem sedan maj 200516 inlägg
Frågan#1

Svårt att sättta rubrik på denna.
Men jag vill ha detta:
en header som alltid är högst upp.
en footer som alltid är längst ner.

Sedan en tre kolumns layout som scrollas mellan dessa två.

Så här långt har jag kommit än så länge...

xhtml:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<link rel="stylesheet" href="css/ultimate2.css" media="screen" />
		<title>ultimate</title>

	</head>
	<body>

	<div id="wrapper">

		<div id="header">huvud</div>

		<div id="leftnav">navigering</div>

  	<div id="content">
	  	<div id="mainContent">Inneh&aring;ll</div>
	  	<div id="rightContent">h&ouml;ger</div>
  	</div>

		<div id="footer">fotnot</div>

	</div>

	</body>
</html>

css:

body
{
	margin: 0;
	padding: 0;
}

#wrapper
{
	width: 740px;
	margin: 0 auto;	
}

#header
{
	height: 92px;
	clear: both;
}

#content
{
	width: 570px;
	float: right;
}

#mainContent
{
	width: 445px;
	float: left;
}

#rightContent
{
	width: 125px;
	float: right;
}

#leftnav
{
	width: 170px;
	float: left;
}

#footer
{
	height: 18px;
	clear: both;
}
Medlem sedan juni 20031 837 inlägg
#2

Du bör nog förklara lite mer vad det är som inte fungerar.

Medlem sedan maj 200516 inlägg
#3

Det som inte fungerar är att footern flyttas med om innehållet i mittdelen fylls ut med t.ex. text.

Jag vill ha den layout som ser ut så här: http://www.ultimate.se/ny_shop/
Denna är byggd med frames. Det vill jag inte ha i min.
Men funktionen av att ha header högst och fotter lägst är det jag vill uppnå med CSS.

Medlem sedan nov. 20041 189 inlägg
#4

Du menar alltså inte en header och footer högst upp och längst ner respektive, utan en footer fixerad längst ner i din vy/viewport och en header högst upp i din vy/viewport.

Antingen lägger du footer under wrapper i htmlkoden och använder dig av statisk positionering genom att lägga margin-top: -18px på din footer - eller också

så sätter du position: fixed; på både header och footer och positionerar dem fixerat på sidan, och sedan lägger sedan till en fix för IE - om du söker efter mitt namn i HTML och CSS forumet så hittar du 2 poster - en om statisk layouthantering och en om position:fixed för typ ett par dagar sedan.

Måste tyvärr iväg nu.

Medlem sedan aug. 20039 340 inlägg
#5

Jag har inte alls kollat noga på ditt problem, men pröva denna kod: http://www.webforum.nu/showthread.php?p=1166321#post1166321

Medlem sedan nov. 20041 189 inlägg
#6

Här är en lösning:
http://haf.se/css/examples/fixedColumns.aspx

261 ms totalt · 4 externa anrop · v20260731065814-full.1dc6f849
124 ms — deklarationer (db)
0 ms — hämta statistik (cache)
134 ms — hämta tråd, inlägg och bilagor (db)
116 ms — ändringar (db)