Notifikationer

Markér alle som læst Log ud

wampiro-uha Nybegynder

08. maj 2004 - 19:22 Der er 25 kommentarer og
1 løsning

Tabel 100% høj?

I HTML 4.01 Strict med CSS.

Er det muligt at lave en tabel 100% høj?

I så fald, hvordan laver jeg så en tabel med 5 rækker, hvor:

række 1 = 50px
række 2 = 75px;
række 3 = det resterende
række 4 = 25px;
række 5 = 100px;

Det skal fungere i IE, Netscape, Opera og Mozilla :-)

Synes godt om

roenving Novice

08. maj 2004 - 19:40 #1

http://www.eksperten.dk/spm/488278, men hrm, det er en af dem, som døde, men så kan du få koden:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Fuld højde simpelt</title>
<meta name="Generator" content="Stone's WebWriter 4">
<meta name="keywords" content="roenving,http://www.eksperten.dk/spm/488278">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%;margin:0px;padding:0px;}
#banner{position:absolute;height:120px;width:100%;background:yellow;z-index:1;}
#main{height:100%;background:green;}
#spacer{height:120px;}
</style>
</head>
<body>
<div id="banner">Banner</div>
<div id="main">
<div id="spacer">Usynligt</div>
Hovedside</div>
</body>
</html>

-- men der har jeg ikke arbejdet med bunden, som alt andet lige vil være mere besværlig at få til at virke ens i browserne !-)

Synes godt om

skovenborg Nybegynder

08. maj 2004 - 19:40 #2

Det letteste er at skrive:
<body>
<table style="height:100%;" border="1">
<tr><td style="height:50px;">Række 1 - 50px</td></tr>
<tr><td style="height:75px;">Række 2 - 75px</td></tr>
<tr><td height="*">Række 3 - resten</td></tr>
<tr><td style="height:25px;">Række 4 - 25px</td></tr>
<tr><td style="height:100px;">Række 5 - 100px</td></tr>
</table>
</body>

Samtidig skal der i stylesheetet stå:
body,html {margin:0px;height:100%;}

margin er ikke påkrævet, men jeg plejer at sætte den på så der ikke kommer en scrollbar som standard.

Synes godt om

skovenborg Nybegynder

08. maj 2004 - 19:43 #3

næ hov - drop height="*". Den er ikke nødvendig her ;-)

Synes godt om

wampiro-uha Nybegynder

08. maj 2004 - 19:44 #4

Hmm, kan det ikke gøres i en tabel i stedet for med layers?

Synes godt om

wampiro-uha Nybegynder

08. maj 2004 - 19:45 #5

hovsa, havde ikke set dit skovenborg :-)
Laver du ikke et svar. Det virker!

Havde glemt html { height: 100%; } i css :-D

Synes godt om

wampiro-uha Nybegynder

08. maj 2004 - 19:46 #6

margin:0px synes jeg ikke fjerner scrollbaren, men det gør intet.

Synes godt om

olebole Juniormester

08. maj 2004 - 19:48 #7

<ole>

skovenborgs er måske lettere, men det virker bare ikke efter hensigten :)

/mvh
</bole>

Synes godt om

wampiro-uha Nybegynder

08. maj 2004 - 19:49 #8

Det virker fint i både Opera, Netscape og Mozilla, men IE laver ikke den øverste 100pixel, men laver derimod alle rækkerne lidt tilfældige i højden. Men den laver hele tabellen 100% høj som den skal være...
Problemet er bare at have en række som tilpasser sig højden i IE???

Synes godt om

roenving Novice

08. maj 2004 - 19:49 #9

Arh, jeg sidder og kan ikke få det til at virke, men det er fordi, jeg har dtd-link med ...

Synes godt om

wampiro-uha Nybegynder

08. maj 2004 - 19:49 #10

olebole --> hvorfor virker det ikke efter hensigten? Det er da kun i IE den er gal lige pt.?

Synes godt om

olebole Juniormester

08. maj 2004 - 19:50 #11

Netop ... men det skal vel også fungere i IE ... eller ...? :)

Synes godt om

olebole Juniormester

08. maj 2004 - 19:52 #12

... og så er det vigtigt i Opera at have 'padding:0px' med i:

body, html {
height: 100%;
margin: 0px;
padding: 0px;
}

Synes godt om

wampiro-uha Nybegynder

08. maj 2004 - 19:53 #13

Vil det sige man ikke kan lave det med tabeller i html 4.01 strict og css?

Skal man lave layers (synes de er "ulækre")

Synes godt om

roenving Novice

08. maj 2004 - 19:55 #14

Virker da fint i IE ...

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Tomt dokument</title>
<meta name="keywords" content="søgeord adskilt af komma">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%;margin:0px;padding:0px;}
#table100{height:100%;margin:0px;padding:0px;border:0px;border-collapse:collapse;}
#table100 td{border:0px;padding:0px;margin:0px;}
</style>
</head>

<body>
<table id="table100">
<tr>
<td style="height:50px;background:#7f0000;"> </td>
</tr>
<tr>
<td style="height:75px;background:#f00;"> </td>
</tr>
<tr>
<td height="*" style="background:#0f0;width:100%;"><img width="800" height="3"> </td>
</tr>
<tr>
<td style="height:25px;background:#00007f;"> </td>
</tr>
<tr>
<td style="height:100px;background:#00f;"> </td>
</tr>
</table>
</body>

</html>

Synes godt om

wampiro-uha Nybegynder

08. maj 2004 - 19:56 #15

Jeg må da ikke bruge attributen height="*" i html 4.01 strict?

Synes godt om

olebole Juniormester

08. maj 2004 - 19:58 #16

roenving >> *LooL* ja, med den DTD ... det skal være i Strict - og man skulle vel gerne kunne anvende CSS på en ordentlig måde ... så ingen quirks-mode, tak ;o)

Synes godt om

roenving Novice

08. maj 2004 - 19:58 #17

Nej !-)

Derfor mit første indlæg !o]

Synes godt om

olebole Juniormester

08. maj 2004 - 20:02 #18

Moralen er: Der er bunker af ting, der ikke kan lade sig gøre - eller må laves med alle mulige, vanvittige krumspring - den næste håndfuld år :o|

Når man tænker på, vi stadig må skrive til IE5.0 (og nogen skriver sågar stadig til IE4.X), tager det zq nok laaaang tid, før vi slipper af med IE6.X, som desværre er så frygtelig dårlig.
/mvh

Synes godt om

wampiro-uha Nybegynder

08. maj 2004 - 20:05 #19

Det er rigtig... men er der ikke en måde lige at slippe uden om dette problem forholdsvis nemt med tabeller :-)

Er selv en firefox-bruger...! Men IE er jo så udbredt...

Synes godt om

olebole Juniormester

08. maj 2004 - 20:11 #20

nope ... så havde du fået den forlængst. Det er et tilbagevendende problem, der hvergang bliver løst med mere eller mindre heldige 'cowboy-hacks' - ofte noget JavaScript-snask, der jo fjerner store dele af meningen med at skrive til HTML/CSS-standarderne :o|

Synes godt om

wampiro-uha Nybegynder

08. maj 2004 - 20:18 #21

Øv.... :-( Det er jeg ked af at høre, men der er måske ikke noget at gøre ved det...

Synes godt om

roenving Novice

08. maj 2004 - 20:20 #22

Men hvis du skal lave det delt på den måde, har du vel heller ikke brug for tabel-egenskaberne: hold kolonner og rækker samlet hhv. lodret og vandret, og så kan du vel lave en layer-løsning !-)

Synes godt om

roenving Novice

08. maj 2004 - 20:27 #23

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 strict//EN"
"http://www.w3.org/TR/html401/strict.dtd">
<html>
<head>
<title>Fuld højde simpelt</title>
<meta name="Generator" content="Stone's WebWriter 4">
<meta name="keywords" content="roenving,http://www.eksperten.dk/spm/488278">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%;margin:0px;padding:0px;}
#banner{position:absolute;height:125px;width:100%;background:yellow;z-index:1;}
#top1{width:100%;height:50px;background:#770;}
#top2{width:100%;height:75px;background:#707;}
#main{height:100%;background:green;}
#spacer{height:120px;}
#bottom{position:absolute;bottom:0px;height:125px;width:100%;background:yellow;z-index:1;}
#bund1{width:100%;height:25px;background:#770;}
#bund2{width:100%;height:100px;background:#707;}
</style>
</head>
<body>
<div id="banner">
<div id="top1">top1</div>
<div id="top2">top2</div>
</div>
<div id="main">
<div id="spacer">Usynligt</div>
Hovedside</div>
<div id="bottom">
<div id="bund1">bund1</div>
<div id="bund2">bund2</div>
</div>
</body>
</html>

Synes godt om

olebole Juniormester

08. maj 2004 - 20:35 #24

Man skal nok lige bruge den rigtige strict-DTD:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> :)

Derudover, er det ikke en hensigtsmæssig måde at skrive CSS på. Meningen med CSS er netop nedarvning gennem klasser - id-selektorer bør være undtagelsen. CSS med udstrakt brug af id-selektorer bliver ligeså uoverskueligt, som hvis man ikke bruger CSS - hvorfor W3C's begrundelser for CSS på det nærmeste bortfalder.

Det kan lade sig gøre på denne måde - men det er ærgeligt man skal 'hacke' sig igennem i stedet for at lave de gode løsninger, som standarderne lægger op til :o|

Synes godt om

wampiro-uha Nybegynder

08. maj 2004 - 20:35 #25

Jeg bruger netop tabel-egenskaberne. Det er derfor jeg er så fast på dem :-)

Hmmm, ved ikke lige hvad jeg gør!

Synes godt om

wampiro-uha Nybegynder

23. maj 2004 - 14:10 #26

Nå, lukker!

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML	18	10/09/202515:07	17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML	3	19/03/202522:16	20/03/202513:04
Se og ændre html på en webside Af magger i HTML	4	11/03/202513:55	12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML	5	02/03/202520:05	04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS