Avatar billede nitnellav Nybegynder
18. juli 2005 - 08:50 Der er 8 kommentarer

Højde på tablesæt - problem omkring "100%"

Hej,
Jeg sidder og piller ved noget html til en hjemmeside og har i den forbindelse et problem med at få et tablesæt som ligger inde i en celle til at fylde ud i højden.
Grunden til at det SKAL fylde ud i højden er at jeg nederst i det inderste tablesæt skal have et logo, som altid skal sidde det samme sted i forhold til bunden.

Se følgende kode som er en forsimplet udgave af min problematik.

Er der mon nogen som kan hjælpe med hvordan dette tablesæt kommer til at fylde ud i højden?


------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

    <head>
        <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
        <title>Untitled Page</title>
    </head>

    <body>
        <table width="404" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td valign="top" bgcolor="#84f208" width="290"><font color="black">Tekstside med variabel h&oslash;jde<br>
                        <br>
                        <br>
                        <br>
                        <br>
                        <br>
                        <br>
                        <br>
                        <br>
                        <br>
                        <br>
                        <br>
                        <br>
                        <br>
                        <br>
                        <br>
                        <br>
                        <br>
                        <br>
                        <br>
                        <br>
                        <br>
                        <br>
                        <br>
                        <br>
                        <br>
                        <br>
                        <br>
                        <br>
                        <br>
                    </font></td>
                <td valign="top" width="114">
                    <table width="114" border="0" cellspacing="0" cellpadding="0" height="100%">
                        <tr height="200">
                            <td bgcolor="#de00de" height="200">fast h&oslash;jde</td>
                        </tr>
                        <tr height="100%">
                            <td bgcolor="#ffaa00" height="100%">variabel h&oslash;jde</td>
                        </tr>
                        <tr height="40">
                            <td valign="top" bgcolor="#0091ff" height="40">logo som SKAL sidde i bunden</td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
        <p></p>
    </body>

</html>
------------------
Avatar billede jps6kb Novice
18. juli 2005 - 09:15 #1
Det her virker for mig ;)



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

    <head>
        <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
        <title>Untitled Page</title>
    </head>

    <body>
        <table width="404" style="border-collapse:collapse;" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td valign="top" bgcolor="#84f208" width="290">
            Tekstside med variabel h&oslash;jde<br>
        </td>
                <td valign="top" width="114">
                    <table width="114" height="100%" border="0" style="border-collapse:collapse;" cellspacing="0"

cellpadding="0"             height="100%">
                        <tr height="200">
                            <td bgcolor="#de00de" height="200">fast h&oslash;jde</td>
                        </tr>
                        <tr height="100%">
                            <td bgcolor="#ffaa00">variabel h&oslash;jde<br/><br/>gg</td>
                        </tr>
                        <tr height="40">
                            <td valign="top" bgcolor="#0091ff" height="40">logo som SKAL sidde i bunden</td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
        <p></p>
    </body>

</html>
Avatar billede nitnellav Nybegynder
18. juli 2005 - 10:24 #2
Hej jps6kb,

Tak for dit forslag som dog desværre ikke løser mit problem.
Jeg har glemt at skrive at den jeg laver hjemmesiden for sidder på MAC og kigger på hans hjemmeside med Safari browseren fra Apple. Og det kunne du jo ikke vide.
Det er derfor specielt denne browser som jeg forsøger at få koden til at fungere på. På internet explorer på pc er der i forvejen ingen problemer med min egen kode...

Så hvis der er nogen som kan få det inderste tablesæt til at fylde ud i højden på en Safari browser så vil det være fantastisk. Jeg er selv ved at blive lidt skør i hovedet af det her...
Avatar billede jps6kb Novice
18. juli 2005 - 10:59 #3
Altså, jeg sidder med Mozilla Firefox, og der virker det da fint..
Du vil bare have den orange box til at blive større, sammen med den grønne til venstre?
Det gør den her da også.. hvad gør Safari?
Avatar billede jps6kb Novice
18. juli 2005 - 11:18 #4
Tror jeg ved hvad mener.. prøv det her ;)


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>Untitled Page</title>
</head>

<body>
<table width="404" style="border-collapse:collapse; border: 1px solid black;" cellspacing="0" cellpadding="0">
<tr>
  <td style="vertical-align: top; background: #84f208; width: 290px;">
    Tekstside med variabel h&oslash;jde<br>
    <br/>tester<br/>tester    <br/>tester<br/>tester
    <br/>tester<br/>tester    <br/>tester<br/>tester
    <br/>tester<br/>tester    <br/>tester<br/>tester
    <br/>tester<br/>tester    <br/>tester<br/>tester
    <br/>tester<br/>tester    <br/>tester<br/>tester

  </td>
  <td style="vertical-align: top; width: 114px; height: 100%;">

  <table style="width: 114px; border-collapse:collapse; border: 1px solid black;" cellspacing="0" cellpadding="0"

height="100%">

    <tr>
    <td style="height: 200px; background: #de00de;">
    fast h&oslash;jde
    </td>
    </tr>

    <tr>
    <td style="background: #ffaa00;">
    variabel h&oslash;jde
    <br/>tester<br/>tester
    </td>
    </tr>

    <tr>
    <td style="vertical-align: top; background: #0091ff; height: 40px;">
    logo som SKAL sidde i bunden
    </td>
    </tr>
  </table>

  </td>
</tr>
</table>
</body>

</html>
Avatar billede nitnellav Nybegynder
18. juli 2005 - 11:29 #5
h..., ja det er lidt en "lorteopgave", da det ikke rigtig fungerer...heller ikke denne gang. Safari er noget lort, men jeg SKAL have det til at virke...
Avatar billede jps6kb Novice
18. juli 2005 - 11:32 #6
Hehe.. safari er lidt kræsen har jeg erfaret, men der er altid en løsning ;) Hvordan ser det ud i den nu? Så jeg har noget at gå efter.. har ikke selv en Mac her.. ;)
Avatar billede jps6kb Novice
18. juli 2005 - 11:45 #7
Prøv dét her så ;)



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>Untitled Page</title>
</head>

<body>
<table style="border-collapse:collapse; width: 404px;" cellspacing="0" cellpadding="0">
<tr>
  <td style="vertical-align: top; background: #84f208; width: 290px;" rowspan="3">
    Tekstside med variabel h&oslash;jde<br>
    <br/>tester<br/>tester    <br/>tester<br/>tester
    <br/>tester<br/>tester    <br/>tester<br/>tester
    <br/>tester<br/>tester    <br/>tester<br/>tester
    <br/>tester<br/>tester    <br/>tester<br/>tester
    <br/>tester<br/>tester    <br/>tester<br/>tester

  </td>
  <td style="vertical-align: top; width: 114px; height: 200px; background: #ff4455;">
    1
  </td>
</tr>
<tr>
  <td style="vertical-align: top; width: 114px; background: #dd4455;">
  2
  </td>
</tr>
<tr>
  <td style="vertical-align: top; width: 114px; height: 40px; background: #c0c0c0;">
  3
  </td>
</tr>
</table>
</body>

</html>
Avatar billede olebole Juniormester
18. juli 2005 - 17:43 #8
<ole>

Forklaringen ligger i, at I har misforstået CSS-standarden - og at jeres koder generelt disabler CSS i hovedparten af WWW's browsere  :)

Hvis du vil bruge CSS, skal du anvende en fuld DTD - med definitions-link. F.eks:
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

- ellers virker noget af det væsentligste CSS slet ikke i IE  ;o)

Dernæst foreskriver CSS, at når du anvender en relativ højde (en højde sat i procent), så skal den udregnes på baggrund af det omkransende elements højde ... hvorfor dette explicit skal have sat en højde.

Skal tabellens højde derfor angives i pocent, skal cellen, den ligger i også have sat en højde.
Bliver også denne sat i procent, skal den tabel, cellen ligger i også have sat en højde ... osv. Til aller sidst kommer du til body- og html-element, der også bør have sat højder:

<style type="text/css">
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
</style>

/mvh
</bole>
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