Tabellproblem

Thor · 2007-01-27, 17:15

Hallåj,

detta är ju smått pinsamt men jag lyckas inte få till en enkel tabell som jag vill ha den... <_<

Jag vill att det ska se som på bilden nedan:

Önskemålet:

Tabellen: bredd 90% höjd 600px
Gula fältet: bredd 90%-160px höjd 30px (headern på sidan)
Gröna fältet: bredd 90%-160px höjd 570px-"orange höjd" (huvudfältet, sidans innehåll)
Oranga fältet: bredd 90%-160px höjd "det som behövs" (sidfot innehållande länkar)
Blå fältet: bredd 160px höjd 600px "rowspan=3" (google ads)

Problemet:
Eftersom det oranga fältets höjd beror på mängden länkar så kan jag inte ge det en fast höjd utan att behöva hålla på och ändra cellernas höjd så fort en eller flera länka ändras. Så jag vill helst låta detta fält vara utan förbestämd höjd.
jag försökte först det gamla hederliga tricket med att ge det gröna fältet 100% höjd, men det fungerar ju inte längre <_< Detta ledde bara till att höjden (600px) fördelades jämnt över de gula, oranga och gröna fälten.

Fråga:
Hur sätter jag höjden på det gröna fältet till 570px-orange höjd?

hnn · 2007-01-27, 18:28

css: min-height : 30px....

herkules · 2007-01-28, 12:48

Citat:

Originally posted by hnn@Jan 27 2007, 19:28
css: min-height : 30px....

min-height stöds inte av alla webbläsare, man måste använda sig av css hack.

selector {
min-height:500px;
height:auto !important;
height:500px;
}

Jag har aldrig själv provat om det fungerar.

martine · 2007-01-28, 21:25

Gör det lite enklare för dig själv förslagsvis – använd divvar i stället.

herkules · 2007-01-28, 23:05

Citat:

Originally posted by martine@Jan 28 2007, 22:25
Gör det lite enklare för dig själv förslagsvis – använd divvar i stället.

Håller med martine, tabeller används inte längre...

martine · 2007-01-29, 01:55

Citat:

Originally posted by herkules@Jan 28 2007, 13:48
min-height stöds inte av alla webbläsare, man måste använda sig av css hack.

IE6 menar du? Det är väl den enda "moderna" webläsaren som inte stöder min- och max-

height och width i IE före IE7 fungerar precis som min-width och min-heigth i andra webläsare.

martine · 2007-01-29, 02:49

Citat:

Originally posted by martine@Jan 28 2007, 22:25
Gör det lite enklare för dig själv förslagsvis – använd divvar i stället.

Ett lite vänligare svar:

Kod:

<body style="width:90%;margin:2em auto;border: 1px solid black">
<div style="float:right;width:160px;height:600px;background-color:cyan">Google</div>
<div style="height:30px;background-color:yellow">Kanske meny?</div>
<div style="height:570px;margin-right:160px;background-color:green;position:relative">
Massa text?
<div style="position:absolute;bottom:0;left:0;background-color:yellow;width:100%">Nere</div>
</div>
</body>

Detta borde ge ungefär vad du frågar efter. Komplett och färdigt. Det är ingen tabell (men det var ju inte en tabell du behövde egentligen) och färgerna är hiskliga. Dessutom borde man förstås ha css:en i en separat fil.

Ara · 2007-01-29, 10:53

Citat:

Originally posted by martine@Jan 28 2007, 22:25
Gör det lite enklare för dig själv förslagsvis – använd divvar i stället.

trodde inte heller det va någon som använde tabeller till design längre

allstars · 2007-01-31, 22:59

jodå - sådana personer finns. jag har själv sett

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

Menu

Tabellproblem