WN - Hur göra layout som validerar?

Sidan 1 av 2

Visa 40 inlägg från det här ämnet på en sida

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - Hur göra layout som validerar? (https://www.wn.se/forum/showthread.php?t=20728)

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?

http://www.razormedia.se/kunder/cash...fik/layout.gif

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

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å :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/

Alla tider är GMT +2. Klockan är nu 04:38.

Sidan 1 av 2

Visa 40 inlägg från det här ämnet på en sida