Søg
Avatar billede pnr Nybegynder
23. september 2005 - 14:42 Der er 25 kommentarer og
3 løsninger

Hjælpe til at lave fuld højde på side

Jeg vil gerne have lavet min side så den fylder skrærmen ud i højden. Jeg har prøvet følgende:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<body style="margin-left: 0px;margin-top: 0px;margin-right: 0px;margin-bottom: 0px">

<table style="border: 1px solid black;width:100%;height=100%;text-align:center" cellpadding="0" cellspacing="0">
    <tr>
        <td style="border: 1px solid black;width:100%;height:50px">top</td>
    </tr>
    <tr>
        <td style="border: 1px solid black;width:50%;height:100%">mid</td>
    </tr>
    <tr>
        <td style="border: 1px solid black;width:100%;height:50px">bottom</td>
    </tr>
</table>

</body>
</html>

Det virker fint hvis jeg fjerne "http://www.w3.org/TR/html4/loose.dtd" i doc type, men så vidt jeg har forstået børe man ikke fjerne den linie i doctype.

Hvordan laver jeg så fuld højde hvis jeg skal overholde alle regler?
Avatar billede olebole Juniormester
23. september 2005 - 14:48 #1
<ole>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>TITLE</title>
<style type="text/css">
body, html {
    height: 100%;
    margin: 0;
        padding: 0;
}
</style>
</head>
... osv, osv ...

/mvh
</bole>
Avatar billede Slettet bruger
23. september 2005 - 14:48 #2
Så prøv:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Avatar billede olebole Juniormester
23. september 2005 - 14:49 #3
Men når nu den første række skal være 100%, den næste 50% og den sidste 100% høj, hvor høj tror du så tabellen bliver?  ;o)
Avatar billede olebole Juniormester
23. september 2005 - 14:50 #4
gandso >> Den kan du ikke bruge til noget fornuftigt på WWW  :)
Avatar billede pnr Nybegynder
23. september 2005 - 16:28 #5
tak jeres kommentare!

Nu har jeg så rettet koden på baggrund af oleboles kommentar:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>TITLE</title>
    <style type="text/css">
        body, html
        {
            height:    100%;
            margin: 0;
                padding: 0;
        }
    </style>
</head>
<body>
<table style="border: 1px solid black;width:100%;height=100%;text-align:center" cellpadding="0" cellspacing="0">
    <tr>
        <td style="border: 1px solid black;width:100%;height:20%">top</td>
    </tr>
    <tr>
        <td style="border: 1px solid black;width:100%;height:80%">mid</td>
    </tr>
    <tr>
        <td style="border: 1px solid black;width:100%;height:20%">bottom</td>
    </tr>
</table>

</body>
</html>

men det virker stadig ikke efter hensigten.
Avatar billede apo Praktikant
24. september 2005 - 07:24 #6
Der er en fejl i følgende (fejlen: height=100%):
<table style="border: 1px solid black;width:100%;height=100%;text-align:center" cellpadding="0" cellspacing="0">

Den skal i stedet se således ud:
<table style="border:1px solid black; width:100%; height:100%; text-align:center;" cellpadding="0" cellspacing="0">

Desuden er dine cellers procentfordelinger (for højden) forkerte: 20% + 80% + 20% = 120%.

Derudover kan (bør) du smide så mange af dine styles, som muligt, op i <style> (Eller bedre endnu - i et eksternt stylesheet), og kalde dem via klasser og id'er (Som vist herunder):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>TITLE</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body, html {height:100%; margin:0; padding:0;}
#table {border:1px solid black; width:100%; height:100%; text-align:center;}
.td {border:1px solid black; width:100%;}
</style>
</head>
<body>

<table id="table" cellpadding="0" cellspacing="0">
  <tr>
      <td class="td" style="height:20%;">top</td>
  </tr>
  <tr>
      <td class="td" style="height:60%;">mid</td>
  </tr>
  <tr>
      <td class="td" style="height:20%;">bottom</td>
  </tr>
</table>

</body>
</html>

Apo
Avatar billede roenving Novice
24. september 2005 - 22:17 #7
-- nu er det måske ikke verdens bedste idé at bruge id'er og klassenavne som er sammenfaldende med element-navne, og desuden vil det være god programmeringsstil at benytte sig af cascading (c'et i css !-)

#myTable{/*...*/;border-collapse:collapse;}
#myTable td{/*...*/;margin:0;padding:0;}

<table id="myTable">
  <tr>
      <td style="height:20%;">top</td>
  </tr>
  <tr>

...

-- iøvrigt giver det grimme resultater, hvis man sætter 'noget' udenom en ting, som er 100%, for så er den selvfølgelig mere end 100% ialt ...
Avatar billede pnr Nybegynder
27. september 2005 - 06:19 #8
Så fik jeg det endelig til at virke :-)

Nu skal jeg have udbygget siden så jeg får et baggrundstapet i højre side, tapetet skal fylde hele siden ud i højden ligesom indholdet. Jeg har prøvet følgende:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>TITLE</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
        body, html
        {
            height:100%;
            margin:0;
            padding:0;
        }

        #hovedetabel
        {
            border: 0;
            height:100%;
            width:100%;
            border-collapse:collapse;
        }
       
        #mytable
        {
            border:1px solid black;
            width:600px;
            height:100%;
            text-align:center;
            border-collapse:collapse;
        }

        #mytable td
        {
            border:1px solid black;
            width:600px;
            margin:0;
            padding:0;
        }
       
        .baggrund
        {
            width:100%;
            height: 100px;
            background-image:url(images/baggrund.gif);
        }
    </style>
</head>
<body>
<table id="hovedetabel">
    <tr>
        <td>   
            <table id="mytable">
                <tr>
                    <td style="height:20%;">top</td>
                </tr>
                <tr>
                      <td style="height:60%;">mid</td>
                  </tr>
                  <tr>
                      <td style="height:20%;">bottom</td>
                  </tr>
            </table>           
        </td>
        <td class="baggrund"><img src="images/space.gif" style="width: 1px; height: 1px" alt=""></td>                               
    </tr>
</table>

</body>
</html>

Tapet fylder godt nok siden fint ud, men selve indholdet reagere slet ikke på de højder jeg har sat.
Avatar billede pnr Nybegynder
27. september 2005 - 06:20 #9
Jeg har i øvrigt smidt lidt flere point i spørgsmålet.
Avatar billede roenving Novice
27. september 2005 - 14:55 #10
Du havde ikke hele træet med, for der var ikke højde på den store celle, som indeholdt den indre tabel, men f.eks. sådan:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>TITLE</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
        body, html{
            height:100%;
            margin:0;
            padding:0;
        }

        #hovedetabel{
            border: 0;
            height:100%;
            width:100%;
            border-collapse:collapse;
            background-color:green;
        }
        #hovedetabel td{
            border: 0;
            height:100%;
            padding:0;
        }
       
        #mytable{
            /*border:1px solid black; */
            width:600px;
            height:100%;
            text-align:center;
            border-collapse:collapse;
        }

        #mytable td{
            /*border:1px solid black; */
            width:600px;
            margin:0;
            padding:0;
        }
       
        .baggrund{
            width:100%;
            height: 100px;
            background-image:url(images/baggrund.gif);
        }
    </style>
</head>
<body>
<table id="hovedetabel">
    <tr>
        <td>   
            <table id="mytable">
                <tr>
                    <td style="height:20%;">top</td>
                </tr>
                <tr>
                    <td style="height:60%;background-color:#aaf;">mid</td>
                  </tr>
                  <tr>
                    <td style="height:20%;">bottom</td>
                  </tr>
            </table></td>
        <td class="baggrund"><img src="images/space.gif" style="width: 1px; height: 1px" alt=""></td>                               
    </tr>
</table>

</body>
</html>
Avatar billede pnr Nybegynder
06. oktober 2005 - 06:01 #11
roenving tusind tak for din hjælp og undskyld jeg først vender tilbage nu! Smid et svar så er der point...
Avatar billede pnr Nybegynder
06. oktober 2005 - 06:36 #12
Kan jeg lige nå et spørgsmål mere her på "falderebet".

Hvis nu jeg skulle opbygge siden ved hjælp af divs istedet for tabeller, hvordan ville det så se ud?
Avatar billede roenving Novice
08. oktober 2005 - 21:02 #13
F.eks.

-- i stylesheetet:

#site{
  height:100%;
  background-image:url(images/baggrund.gif);
}
#indhold{
  width:600px;
  height:100%;
  background:white;
  background-image:none;
}

-- og så kommer html'en til at se sådan ud:

...

<body>
<div id="site">
  <div id="indhold">
    <div style="height:20%;">
      top
    </div>
    <div style="height:60%;background-color:#aaf;">
      mid
    </div>
    <div style="height:20%;">
      bottom
    </div>
  </div>
</div>
</body>
</html>

-- og du skal selvfølgelig stadig have html,body-reglen med !-)

Velbekomme '-)

-- og point-uddeleingen må vel være en deler !o]
Avatar billede pnr Nybegynder
10. oktober 2005 - 09:15 #14
Hvem vil du gerne dele dine point med?
Avatar billede roenving Novice
10. oktober 2005 - 13:43 #15
Jamen tråden startede jo med at først olebole og derefter apo meldte ind med væsentligheder i forhold til dit spørgsmål !-)
Avatar billede pnr Nybegynder
10. oktober 2005 - 13:53 #16
apo og olebole smid nogle svar så er der point på vej.

Også mange tak for hjælpen til jer!
Avatar billede skelboe Nybegynder
10. oktober 2005 - 13:58 #17
Jeg har ikke læst svarene igennem for jeg så en masse div tags.. men du kan da vælge en simel tabel i tabel løsning...

<table style="width: 100%; height: 100%;">
<tr>
<td width="100%" height="100%">
<table>
<tr><td>Så skulle det være løst</td></tr>
</table>
</td>
<tr>
</table>

I må undskylde hvis en anden allerede har forslået dette da jeg ikke har læst savrene igennem p.s. height i en <table> skal være i et style ellers kan den ikke valideres....
Avatar billede roenving Novice
10. oktober 2005 - 14:04 #18
-- og ovenstående virker ikke, hvis du bruger et rigtigt html-dokument inklusive dtd-link, hvilket er påpeget i de allerførste indlæg !-)
Avatar billede pnr Nybegynder
10. oktober 2005 - 14:07 #19
roenving: Jeg ved godt at jeg jogger rundt i de samme spørgsmål, men det kunne være interessant hvis du ville kigge lidt på den her: http://exp.dk/spm/654063.
Avatar billede olebole Juniormester
11. oktober 2005 - 01:16 #20
- kun en lille sjat til mig. Jeg talte kun for ... de andre sang hele nummeret  :)
Avatar billede olebole Juniormester
13. oktober 2005 - 19:00 #21
Tak for points  :)
Avatar billede roenving Novice
16. oktober 2005 - 15:56 #22
-- også tak herfra ;~}
Avatar billede pnr Nybegynder
09. november 2005 - 11:38 #23
roenving: Jeg har nu rodet lidt med dit løsningsforslag fra 27/09-2005 14:55:29

Men jeg har et problem følgende:

#hovedetabel td{
            border: 0;
            height:100%;
            padding:0;
        }

Den gør det umuligt for mig at styrre højden i alle mine underliggende kolonner...
Avatar billede roenving Novice
10. november 2005 - 10:21 #24
?-)

-- prøv at vise et eksempel !-)
Avatar billede pnr Nybegynder
16. november 2005 - 08:49 #25
Så er jeg på banen igen :-)

Hvis du kigger på den her side: http://net.ibil.dk/

Det område hvor man finder "Område 1", "Område 2" osv skal fylde hele sin plads ud. Dvs at teksten skal stå for oven og ikke trukket ud i hele højden, derudover skal baggrundsbilledet være i bunden.

Jeg vil godt give flere point for at få problemet løst!
Avatar billede pnr Nybegynder
21. november 2005 - 14:36 #26
Roenving: er du der?

Jeg skal nok finde nogle flere point til dig...
Avatar billede roenving Novice
21. november 2005 - 14:38 #27
-- hrm, jeg har ikke haft så meget tid ved pc'en de sidste dage ...
Avatar billede pnr Nybegynder
21. november 2005 - 14:51 #28
Hvis du kan få tid på et tidspunkt vil jeg blive meget glad :-)
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
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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 17:10 Windows 10 Home 22H2 produktnøgle Af Uvanga i Windows
I går 17:10 Windows 10 Home 22H2 produktnøgle Af Uvanga i Windows
05/0810:19 Kan jeg beholde Publisher på min maskine efter at MS stopper med support Af KurtG i Office & Kontorpakker
02/0814:53 TV4ever 3.0 Af valby i Diverse
01/0816:21 Installere Ubuntu på Virtuel Maskine Af Uvanga i Andet software
White papers
Flere white papers »