Hur göra layout som validerar?

Micke_ · 2007-04-19, 22:40

Jag har inte lyckats göra en layout som bilden visar som validerar. Toppen ska ha en fast höjd, Maindelen ska vara anpassningsbar i höjdled, och bottendelen ska vara fast höjd - men alltid ligga i botten.

Jag har inte lyckats åstadkomma detta med divar på ett bra sätt. Man kan göra det med tabeller, men då endast om man tar bort DOCTYPE koden, vilket innebär att sidan inte kan valideras.

Någon som har en bra lösning som validerar och fungerar i alla webbläsare?

Magnus_A · 2007-04-19, 23:07

Ska du ha något på sidorna? eller är det bara tre boxar staplade på varann?

melin · 2007-04-19, 23:49

varför skulle en <table> inte validera?

allstars · 2007-04-20, 05:30

Detta kan fungera:

html, body {height: 100%;}
div#wrapper {height: 100%;}
div#header {height: 100px;}
div#content {height: 100px;}
div#footer {height: 100px; position: absolute; bottom: 0;}

Micke_ · 2007-04-20, 08:31

Citat:

Originally posted by allstars@Apr 20 2007, 05:30
Detta kan fungera:
html, body {height: 100%;}
div#wrapper {height: 100%;}
div#header {height: 100px;}
div#content {height: 100px;}
div#footer {height: 100px; position: absolute; bottom: 0;}

Jag har provat detta. Det fungerar ända tills innehållet i main-rutan blir längre och måste scrollas - då lägger sig botten-rutan ovanpå.

Citat:

varför skulle en <table> inte validera?

Jag har inte lyckats få 100% höjd på tabellen i IE. Om någon har en lösning på detta så är saken biff.

melin · 2007-04-20, 08:40

ja

Kod:

html, body, #mintabell {
 height: 100%;
}

Kod:

<html>
<body>

<table id="mintabell">
</table>

</body>
</html>

borde.. funka

Micke_ · 2007-04-20, 09:11

Ja man får visserligen tabellen till 100%, men sen kommer problemet med den mellersta raden. Om man inte sätter någon fast höjd på den, expanderas de andra raderna. Det spelar ingen roll om man sätter t.ex. top och bottom till 100px....

Om jag sätter mittenrutan till 100%, då tolkar webbläsaren det som 100% av hela ytan så att sidan blir för lång.

Opera och FF funkar bra, men inte IE. Inte ens IE7 =(

melin · 2007-04-20, 09:13

Citat:

Originally posted by Micke_@Apr 20 2007, 08:11

Opera och FF funkar bra, men inte IE. Inte ens IE7 =(

Som vanligt då

Du skulle kunna (med t.ex jQuery) få fram höjden på webläsarens fönster och sen sätta höjd på de olika delarna med javascript.. en ful-lösning dock

Björn · 2007-04-20, 11:15

div#footer {height: 100px; position: absolute; bottom: 0;}

Detta är problemet. det övriga är inga problem. Det går bara att få den att ligga mot botten oavsett så att säga, genom att använda tabeller eller javascript. Kör tabeller om det är ett måste är min inställning.

I övrigt
Lägg alla tre i en wrapper div med fast bredd. Wrappern ska bara vara där för att centrera allt och för att hålla dem rätt i sidled alltdå bredden ska vara fast på den.

Sen float left clear both på alla de indre divvarna, samt fast höjd på headern och footern men inte mittendivven. Detta kommer få den undre divven att ligga dikt an mot botten sålänge content i mittendivven är mer än webbläsarens höjd.

Saint · 2007-04-20, 14:01

Är det kanske detta du är ute efter?
http://www.themaninblue.com/experiment/footerStickAlt/

Aktiva användare som för närvarande tittar på det här ämnet: 1 (0 medlemmar och 1 gäster)

Menu

Hur göra layout som validerar?