Avatar billede Max Novice
18. april 2004 - 02:23 Der er 16 kommentarer og
1 løsning

Tabellen vil ikke udfylde skærmen.

Hej alle.

Jeg vil lave en tabel, der udfylder hele skærmen både lodret og vandret, men det er som om den ikke fatter height="100%". Hvad kan jeg have gjort forkert? I får lige koden også.

Først min .CSS fil :

body {
    margin: 0px 0px 0px 0px;
}

table {
    color: #000000;
    font-family: Tahoma;
    font-size: 12px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
}

td.conleft {
    background-color: #DFEEFF;
    border-left: 1px solid #7599C6;
}

td.conright {
    background-color: #DFEEFF;
    border-right: 1px solid #7599C6;
}

td.contop {
    background-color: #DFEEFF;
    border-top: 1px solid #7599C6;
}

td.conbottom {
    background-color: #DFEEFF;
    border-bottom: 1px solid #7599C6;
}

td.contopleft {
    background-color: #DFEEFF;
    border-top: 1px solid #7599C6;
    border-left: 1px solid #7599C6;
}

td.contopright {
    background-color: #DFEEFF;
    border-top: 1px solid #7599C6;
    border-right: 1px solid #7599C6;
}

td.conbottomleft {
    background-color: #DFEEFF;
    border-bottom: 1px solid #7599C6;
    border-left: 1px solid #7599C6;
}

td.conbottomright {
    background-color: #DFEEFF;
    border-bottom: 1px solid #7599C6;
    border-right: 1px solid #7599C6;
}

td.conempty {
    background-color: #DFEEFF;
}

td.empty {
    background-color: #EAF3FF;
}


.. og så min .HTML fil :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>trunc8ed bit</title>
        <link rel="stylesheet" href="styles/main.css" type="text/css" />
    </head>
<body>
    <table height="100%" width="100%" cols="5" cellspacing="0">

        <tr height="20">
            <td colspan="5" class="empty">
                <pre style="font-size:2px"> </pre>
            </td>
        </tr>

        <tr height="80">
            <td class="empty" width="20">
                <pre> </pre>
            </td>
            <td class="contopleft" width="80">
                <pre> </pre>
            </td>
            <td class="contop">
                <pre> </pre>
            </td>
            <td class="contopright" width="80">
                <pre> </pre>
            </td>
            <td class="empty" width="20">
                <pre> </pre>
            </td>
        </tr>

        <tr>
            <td class="empty">
                <pre> </pre>
            </td>
            <td class="conleft">
                <pre> </pre>
            </td>
            <td class="conright" colspan="2">
                <iframe frameborder="0" id="con" name="con" src="http://www.google.com/" width="100%" height="100%"></iframe>
            </td>
            <td class="empty">
                <pre> </pre>
            </td>
        </tr>

        <tr>
            <td class="empty">
                <pre> </pre>
            </td>
            <td class="conbottomleft">
                <pre> </pre>
            </td>
            <td class="conbottom">
                <pre> </pre>
            </td>
            <td class="conbottomright">
                <pre> </pre>
            </td>
            <td class="empty">
                <pre> </pre>
            </td>
        </tr>

        <tr height="20">
            <td colspan="5" class="empty">
                <pre style="font-size:2px"> </pre>
            </td>
        </tr>   
    </table>

</body>
</html>


... håber I kan hjælpe.
/Mnc
Avatar billede cpccorp Juniormester
18. april 2004 - 02:26 #1
Prøv at indsætte height og width i din css ovenover
Avatar billede roenving Novice
18. april 2004 - 02:27 #2
En table har slet ikke en height-attribut !-)

-- derimod må du godt give den css-property, som angiver de 100%, men det kræver, at også body og html har de 100%, så:

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

table {
    height:100%;
    color: #000000;
    font-family: Tahoma;
    font-size: 12px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
}
Avatar billede roenving Novice
18. april 2004 - 02:31 #3
-- der findes heller ikke en cols-attribut, så dit table-tag kan indeholde din cellspacing, men fjern det hele og:

<table>

i din css:

table {
    height:100%;
    width:100%;
    color: #000000;
    font-family: Tahoma;
    font-size: 12px;
    padding:0px;
    border-colapse:collapse;
}
Avatar billede roenving Novice
18. april 2004 - 02:31 #4
Hov, en tavetosse:

    border-collapse:collapse;
Avatar billede Max Novice
18. april 2004 - 02:41 #5
Hmm.. Det virker, men den øverste og den nederste række <tr> bliver højere end de 20 pixels jeg har sat dem til. Skulle de ikke bare holde højden indtil der bliver fyldt et større indhold i?

/Mnc
Avatar billede roenving Novice
18. april 2004 - 02:43 #6
Nej, alle de browsere, jeg kender vil strække cellerne forholdsvis, specielt i højden ...
Avatar billede roenving Novice
18. april 2004 - 02:46 #7
Tjah, Mozilla viste det godt nok korrekt, også Google i iframen, som IE ikke ville vise ...
Avatar billede roenving Novice
18. april 2004 - 02:48 #8
Måske skulle du kigge på den, jeg smed i dette spørgsmål, for den kunne finde ud af det rigtige:

http://www.eksperten.dk/spm/488278 (den sidste !-)

Godt nok en helt anden opbygning, men principperne kan du vist også bruge !-)
Avatar billede Max Novice
18. april 2004 - 04:05 #9
Hmm.. Er der ingen måde at komme udenom at bruge absolut positionering? Det er fint nok, og det kan også lykkes, men det er ikke så fedt at lave relative størrelser, når man har lavet position:absolute på dem.
Det må da kunne lade sig gøre at få Internet Explorer til at makke ret?

/Mnc
Avatar billede mireigi Novice
18. april 2004 - 04:13 #10
roenving -> "En table har slet ikke en height-attribut !-)"

Måske er det bare mig, men har ikke hørt noget lign. i lang tid... En table _har_ en height attribut, den bliver bare ikke listet i programmer som Stones Webwriter... Men derfor kan den sagtens sættes alligevel... Nedenstående virker fx. fint for mig i både Webwriter og FP2K:

<body style="margin:0px,0px,0px,0px;">

<table border="1" width="100%" height="100%">
  <tr>
    <td></td>
  </tr>
</table>

</body>

Der er ingen problemer med anvendelsen af height attributten...

Men jeg kan jo tage fejl, sikkert pga. noget med browser-compabilitet eller lign... Hvis du kan modbevise at det virker, så lytter jeg gerne...

/MiReiGi
Avatar billede roenving Novice
18. april 2004 - 21:19 #11
Meget nemt at bevise, f.eks. ved at besøge w3c, som har fastsat standarden for html ...

f.eks. http://www.w3.org/TR/html401/struct/tables.html#edef-TABLE

hvoraf det fremgår, at attributten height ikke er til stede ...

-- noget andet er så, hvad forskellige browsere og programmører kan finde på at implementere ...

-- problemet opstår så bare, hvis de besøgende, man har, ikke bruger præcis den samme browser, for du vil vel gerne have besøgende på dit website !-)

-- og jeg vil gerne gentage:

En table har slet ikke nogen height-attribut ...

-- og det er sikkert også derfor, at webwriteren ikke viser den i nogen liste !o]
Avatar billede mireigi Novice
19. april 2004 - 19:20 #12
Ok... Tænkte nok at det havde noget med w3c at gøre, men ærligt talt virker det lidt forvirrende for mig, det der med at definere værdien af noget som ikke findes ved at kalde det noget andet, så værdien eksisterer og andre kan forstå det...

For mig virker det lidt li'som hvis man skal tildele variablen "x" en ny værdi... Problemet er bare, at variabel "x" ikke findes og kun få personer forstår betydningen af den... Derfor kalder man den variabel "y" istedetfor, hvorved alle forstår hvad der menes og variablen findes...

Ved ikke helt om det er mig som bare tænker underligt, men det virker lidt (læs: meget) forvirrende for mig...

/MiReiGi
Avatar billede roenving Novice
20. april 2004 - 11:04 #13
Tjah, det er jo ikke lige uforståeligt (*lol* !-)

Men der er faktisk noget som ligner en god forklaring:

Table-elementet er i sin tid skabt til at fremvise data på en ordnet måde, derfor gav det ikke mening at give en tabel en fikseret højde, den skulle jo alligevel være så høj, at de data, som var i tabellen, kunne være der ...

På samme måde har td'er heller ikke en fast bredde, de skal også være i stand til at vise de data, som er indeholdt !-)

Nu har vi så fået et nyt element til brug for opbygningen af en webside: Cascading Style Sheets, hvis mål er layout alene ...

For at det kan opfylde sin mission har det en række muligheder for at manipulere elementers størrelse og placering, og det giver jo ikke mening, hvis der er nogle elementer, det ikke virker på, så det virker på alle elementer, hvor f.eks. højde overhovedet giver en mening ...

Til gengæld overruler det ikke et elements medfødte egenskaber, hvilket burde blive tydeligt med dette eksempel:

<table style="height:10px;background:red">
  <tr>
    <td>1&nbsp;</td>
  </tr>
  <tr>
    <td>2&nbsp;</td>
  </tr>
</table>

-- prøver du at ændre højden til f.eks. 100px kan du se, at css-højden kommer til at agere som minimum !-)
Avatar billede Max Novice
24. april 2004 - 14:16 #14
Hmm.. Ok. Min tidligere kommentar kom åbenbart ikke på. (?)
Men ok, Roenvig, du har svaret på spørgsmaålet så godt som det kan gøres. Smid et svar, og pointsene går til dig.

/Mnc
Avatar billede roenving Novice
24. april 2004 - 14:29 #15
Velbekomme '-)

-- håber du har fået nogle ideer til at opfylde dit mål !-)
Avatar billede roenving Novice
24. april 2004 - 14:43 #16
-- og tak for point ;~}
Avatar billede Max Novice
24. april 2004 - 14:48 #17
np. tak for hjælpen. ;)
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