Avatar billede ducks Nybegynder
11. april 2004 - 23:42 Der er 19 kommentarer og
1 løsning

Fylde sidens højde ud

Øverst på min side er der 2 tabeller, som tilsammen er 120pixels høj, nedenunder er der en tabel mere, som jeg gerne vil have til at fylde resten af siden ud (hvis der er plads i overskud). Jeg har sat <body style="height: 100%;">, men kan ikke hitte ud af, hvordan jeg løser problemet, jeg kan jo ik bare sætte den nederste tabel til at være 100% - 120pixels høj. Hvordan kan jeg løse det?

Jeg har prøvet at lave et lille illustreret eksempel: http://www.thecszone.dk/filer/eks.jpg
Avatar billede roenving Novice
11. april 2004 - 23:51 #1
<!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="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>
Avatar billede ducks Nybegynder
12. april 2004 - 00:18 #2
Synes ikke rigtig det vil lykkes for mig, når det skal sættes ind hvor der er tabeller.

Eks: (Forenklet)

<body>
<div id="banner">
<table>
</table>
</div>
<div id="main">
<div id="spacer">&nbsp;</div>
<table>
</table>
</div>
</body>

Siden bliver stadig 100%+120px høj
Avatar billede roenving Novice
12. april 2004 - 00:22 #3
Heller ikke, hvis du har stylen med ?-)
Avatar billede ducks Nybegynder
12. april 2004 - 00:25 #4
Nej
Avatar billede backside Nybegynder
12. april 2004 - 00:26 #5
Er ret sikker på at roenving er yderst kompetent på området, men kan den simple version ikke også bruges?

<html><head>
<title></title></head>
<body topmargin="0" leftmargin="0">
<div align="center"><center>
<table border="0" width="600" height="100%" bgcolor="#000000" cellspacing="1" cellpadding="0">
<tr><td width="100%" height="60" bgcolor="#C0C0C0" align="center">60 p</td></tr>
<tr><td width="100%" height="60" bgcolor="#808080" align="center">60 p</td></tr>
<tr><td width="100%" bgcolor="#FFFFFF" align="center">indhold her</td></tr>
</table></center></div>
</body>
</html>
Avatar billede roenving Novice
12. april 2004 - 00:27 #6
Og du har givet banner absolut position og z-index ?-)
Avatar billede ducks Nybegynder
12. april 2004 - 00:29 #7
Jeg prøver lige at rode lidt videre med det - det er sikkert bare mig der har lavet en fejl et sted, som jeg bliver ved med at overse :\
Avatar billede roenving Novice
12. april 2004 - 00:31 #8
Jo, den simple version kan sagtens bruges, hvis man er sikre på at ens brugere bruger ie, man husker at fravælge standarder, og dermed ikke får browseren til at vise den kode man har skrevet, men det som en-eller-anden programmør i Bombay synes er firnuftigt !-)

-- og helt konkret findes der ikke en height-attribut til table-elementet ...
Avatar billede backside Nybegynder
12. april 2004 - 00:33 #9
Ok, det er dig der er klogeåge her. ;) (ment på den positive måde)
Avatar billede ducks Nybegynder
12. april 2004 - 00:38 #10
roenvig > Nu er den der, næsten. Jeg havde overset et ; :( .. Men main tabellen kommer ikke til at fylde 100% i højden, dog viser den grønne farve at det ellers virker. Men hvordan får jeg tabellen til at være 100% høj også, gerne på en tilladt måde, hvis den findes.
Avatar billede roenving Novice
12. april 2004 - 01:05 #11
Jeg er selv helt automatisk begyndt at tænke i layers, når jeg skal udforme noget, så, når der ikke er en tvingende grund til det, arbejder jeg i div'er ...

Man kan godt angive en tabels højde til 100% på en lovlig måde (style="height:100%" !-), men problemet med det er, at alle browsere 'strækker' celler lige meget, så når der er for meget plads, vil samtlige rækker blive strukket, oftest med uheldige/uforudsete resultater ...

Men hvad er der galt i, at du bruger div'erne som den væsentligste formatteringsting, og så evt. lægger tabeller der hvor det tabulære design er nødvendigt ?-)

Kolonner er jo ikke noget problem at lave med div'er, så hvis det er en baggrundsting, du godt vil have til at fylde ned, kan den jo lægges i et passende lag, for med css kan man jo lægge de forskellige elementer i forskellige lag !-)
Avatar billede ducks Nybegynder
12. april 2004 - 01:10 #12
Det er 4 forskellige baggrundsfarve jeg har, en til venstre der er 175px, lige ved siden af er der en på 150px derefter kommer en hvid som har den resterende bredde, bortset fra at der er en til højre som er 175px. Hvis du kan forstå hvad jeg mener.
Avatar billede ducks Nybegynder
12. april 2004 - 01:16 #13
Men ang. at strække alle cellerne ligemeget, så gør det ingenting, for der er kun en række og 4 kollonner.
Avatar billede roenving Novice
12. april 2004 - 01:25 #14
Jo, for enten skal du bruger 3 rækker (de to i toppen plus den forneden) og så vil de strække sig forholdsmæssigt efter indholdet ...

Eller også skal du igen ud i, at du har en tabel på 100% i højden !-)

men en skitse til hvordan du kan lave dine 4 baggrundsfarver:

#menu{position:relative;height:100%;width:175px;float:left;background:blue;}
#news{position:relative;height:100%;width:150px;float:left;background:red;}
#right{position:relative;height:100%;width:175px;float:right;background:red;}

Hvorefter baggrundsfarven på hoved-diven bare sættes til den hvide ...
Avatar billede roenving Novice
12. april 2004 - 01:45 #15
Her skulle det hele være med:

<!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:10;}
#baggrund{position:absolute;width:100%;height:100%;background:white;z-index:0;}
#menubag{position:relative;height:100%;width:175px;float:left;background:blue;}
#newsbag{position:relative;height:100%;width:150px;float:left;background:green;}
#rightbag{position:relative;height:100%;width:175px;float:right;background:red;}
#main{position:absolute;width:100%;height:100%;background:transparent;}
#spacer{height:120px;}
table{border:0px;border-collapse:collapse;}
td{margin:0px;border:0px;padding:0px;text-align:center;}
</style>
</head>
<body>
<div id="banner">Banner</div>
<div id="main">
<div id="rightbag"></div>
<div id="menubag"></div>
<div id="newsbag"></div></div>
<div id="main">
<div id="spacer">Usynligt</div>
<table style="width:100%">
  <tr>
    <td style="width:175px">Menuen</td>
    <td style="width:150px">News</td>
    <td>Hovedside</td>
    <td style="width:175px">Right-bar</td>
  </tr>
</table>

</div>
</body>
</html>
Avatar billede roenving Novice
12. april 2004 - 01:46 #16
Ufff ...

<!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:10;}
#baggrund{position:absolute;width:100%;height:100%;background:white;z-index:0;}
#menubag{position:relative;height:100%;width:175px;float:left;background:blue;}
#newsbag{position:relative;height:100%;width:150px;float:left;background:green;}
#rightbag{position:relative;height:100%;width:175px;float:right;background:red;}
#main{position:absolute;width:100%;height:100%;background:transparent;}
#spacer{height:120px;}
table{border:0px;border-collapse:collapse;}
td{margin:0px;border:0px;padding:0px;text-align:center;}
</style>
</head>
<body>
<div id="banner">Banner</div>
<div id="baggrund">
<div id="rightbag"></div>
<div id="menubag"></div>
<div id="newsbag"></div></div>
<div id="main">
<div id="spacer">Usynligt</div>
<table style="width:100%">
  <tr>
    <td style="width:175px">Menuen</td>
    <td style="width:150px">News</td>
    <td>Hovedside</td>
    <td style="width:175px">Right-bar</td>
  </tr>
</table>

</div>
</body>
</html>
Avatar billede ducks Nybegynder
12. april 2004 - 01:49 #17
Kigger lige på det
Avatar billede ducks Nybegynder
12. april 2004 - 13:44 #18
Takker ser ud til at virke, lægger du et svar? (Faldt i søvn i går :\)
Avatar billede roenving Novice
12. april 2004 - 16:36 #19
Velbekomme '-)
Avatar billede roenving Novice
12. april 2004 - 17:05 #20
-- og tak for points ;~}
Avatar billede 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.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

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