Avatar billede donkazz Nybegynder
11. marts 2008 - 11:08 Der er 16 kommentarer og
1 løsning

For faen table 100% højde og doctype?

Okay nu er jeg for alvor ved at få grå hår... :(

XHTML 1.0 Transitional er verdens værste ord lige nu.

Jeg kan ikke få min hjerne til at begribe hvorfor jeg kan have én overordnet tabel der er 100% i højde og bredde, men at en tabel der så ligger INDE i en af dens td'er, ikke kan være 100% i højden...?

Se evt. her:
http://imageload.dk/files/87bc496c65faa3f166665f858f313db3.jpg

Whyyyy? :-O
Avatar billede erikjacobsen Ekspert
11. marts 2008 - 11:18 #1
Hvorfor dog bruge XHTML?

Men generelt: 100% højde beregnes ud fra det omkransende element. Dvs. noget inde i en <td> tager højde efter denne <td>.
Avatar billede donkazz Nybegynder
11. marts 2008 - 11:38 #2
Ja hvorfor XHTML? Det ved jeg heller ikke, jeg tror folk har plapret om fremtidssikring eller noget... Har du et bedre forslag?

Ja det er nemlig det det ikke gør, som du kan se. Tabellen med border=10 er også sat til height: 100%, men det er tydeligt at den ikke makker ret. :(
Avatar billede zargoth Nybegynder
11. marts 2008 - 11:49 #3
Du ville kunne gå ind og give den tabel en min-height, dog kan det komme til at give scrool til nogle hvis de har en mindre opløsning end du optimere siden til.

Er det et billede du bruger som baggrund i den tabel? For så kan du sætte "URL (../images/eksempel.jpg) repeat-y center" på, det gør at den følger sidens længde.

Det anbefales også at man ikke laver sine ting i tabeller længere, men at du istedet opsætter dine ting via <div> tags (netop nu da du taler om fremtidssikring).
Avatar billede fennec Nybegynder
11. marts 2008 - 11:50 #4
Et forslag til doctype og DTD ville være ganske almindelig HTML med loose DTD:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
Avatar billede donkazz Nybegynder
11. marts 2008 - 11:53 #5
Nogle forslag på hvordan jeg får tabellen til at være 100% i højden? Vel at mærke den tabel der ligger INDE i den der allerede ER 100% i højden?

Jeg sætter normalt pris på alternative løsningsforslag, men i det her tilfælde kan jeg KUN bruge en teknisk forklaring på hvordan jeg får det til at virke. Ikke noget med at bygge op i div's osv., men ellers tak. :)
Avatar billede donkazz Nybegynder
11. marts 2008 - 12:00 #6
Det hjælper desværre ikke at sætte LOOSE doctype på ... :-o

til gengæld hvis jeg fjerner doctype helt, så virker det fint.. damnit
Avatar billede erikjacobsen Ekspert
11. marts 2008 - 12:27 #7
Giv din <td> en "sjov" baggrundsfarve, så du kan se hvor stor den er. Din tabel med 100% højde kan ikke blive større. Derefter må du så finde ud af at sætte højden på den <td>.

Et HTML-dokument uden DOC-type er uanvendeligt - forskellige browsere og browserudgaver vil gætte forskelligt og opføre sig forskelligt.
Avatar billede donkazz Nybegynder
11. marts 2008 - 13:00 #8
Jeg satte background: red på den td som umiddelbart skulle være 100% i højden - og ganske rigtigt blev hele td'en rød. Men den s#"¤% tabel med border=10 rykker sig stadig ingen steder.

Til gengæld hvis jeg sætter 100% i højde på den td med den røde bg, så bliver selve siden ca. 120% i forhold til browserens højde, dvs. der kommer dejlig scroll :)
Avatar billede olebole Juniormester
11. marts 2008 - 14:00 #9
<ole>

Nu kan man jo ikke hjælpe med kodeproblemer udfra et billede, men mon ikke problemet består i, du ikke overholder CSS-standarden? Den siger, at en relativ højde skal beregnes udfra det omkransende elements højde. Dette div bliver ikke 200px højt:

<tr>
<td>
    <div style="height:100%">Bla</div>
</td>
<td>
    <img src="gnu.jpg" height="200" width="100">
</td>
</tr>

- det gør dette derimod:

<tr>
<td style="height:200px">
    <div style="height:100%">Bla</div>
</td>
<td>
    <img src="gnu.jpg" height="200" width="100">
</td>
</tr>

/mvh
</bole>
Avatar billede donkazz Nybegynder
11. marts 2008 - 14:19 #10
men siden hvornår sker det at det virker i Firefox men ikke i IE 7? Er det igen igen IE 7 der ikke opfører sig ordentligt eller er det FF der holder fest og prøver at gøre mig glad? (selvom det er pænt ligegyldigt så længe IE skal té sig)
Avatar billede olebole Juniormester
11. marts 2008 - 14:23 #11
Det kan du jo selv afgøre, nu du ved, hvordan CSS-standarden er skruet sammen på dette punkt. Vi kan som sagt intet vide om din kode, da du har valgt at holde den hemmelig. Et billede er komplet intetsigende  :)
Avatar billede donkazz Nybegynder
11. marts 2008 - 14:29 #12
default.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>side 7</title>
      <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
        <link rel="StyleSheet" href="/css/style.css" type="text/css" />
    </head>
    <body>
       
        <table cellpadding="0" cellspacing="0" border="3" style="height: 100%; width: 100%">
            <tr>
               
                <td id="template_outer_left">
                    &nbsp;
                </td>
               
                <td id="template_outer_center">
                    <table id="template_inner_table" cellpadding="0" cellspacing="0" border="10">
                        <tr>
                            <td id="tdTop">
                                <div id="placeholder_top" class="placeholder">                                   
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td id="tdMiddle">
                                <table cellpadding="0" cellspacing="0" border="1" id="tblMiddle">
                                    <tr>
                                        <td id="left">
                                            <div id="placeholder_left" class="placeholder">
                                               
                                            </div>
                                        </td>
                                        <td id="center">
                                            <div id="placeholder_center" class="placeholder">
                                               
                                            </div>
                                        </td>
                                        <td id="right">
                                            <div id="placeholder_right" class="placeholder">
                                               
                                            </div>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td id="tdBottom">
                                <div id="placeholder_bottom" class="placeholder">
                                   
                                </div>                               
                            </td>
                        </tr>                                   
                    </table>
                </td>
                <td id="template_outer_right">
                    &nbsp;
                </td>
            </tr>
        </table>
    </body>
</html>
Avatar billede donkazz Nybegynder
11. marts 2008 - 14:29 #13
style.css:



html, body { height: 100%; }
body,td{
font-family:Arial, Tahoma, sans-serif;
font-size:11px;
color:#9F9F9F;
margin: 0;
}

td {
    vertical-align: top;
    text-align: left;
    }

a:link, a:active, a:visited {
    color: #006699;
    text-decoration: none;
    }

a:hover {
    color: #0033FF;
    text-decoration: underline;
    }
        td#bgrightrepeat {
        }
   
    td#bgleftrepeat {
        }       

    td#template_outer_left {
        background: url(/pictures/bg/bgleft.jpg) top right no-repeat;
        }
   
    td#template_outer_right {
        background: url(/pictures/bg/bgright.jpg) top left no-repeat;
        }



td#template_outer_center {
    text-align: center;
    vertical-align: top;
    width: 892px;
    background: url(/pictures/bg/repeat.jpg) top left repeat-y;
    }
   
div.placeholder {
    position: relative;
    height: 100%;
    }

div#placeholder_top {
    width: 892px;
    z-index: 1;
    }

div#placeholder_left {
    width: 220px;
    z-index: 1;
    }

div#placeholder_center {
    width: 650px;
    z-index: 0;
    }

div#placeholder_right {
    width: 0;
    z-index: 1;
    }

div#placeholder_bottom {
    width: 892px;
    z-index: 1;
    }

td#tdTop {
    background: url(/pictures/bg/top.jpg) bottom left no-repeat;
    height: 85px;
    }
   
td#tdMiddle {
    background: url(/pictures/bg/content.jpg) top left no-repeat;
    width: 892px;
    /*height: auto;*/
    height:100%;
    }
   
table#template_inner_table {
    height: 100%;
    }

table#tblMiddle {
    width: 892px;
    height: 100%;
    }
   
td#left {
   
    width: 220px;
   
    }
   
td#center {

    width: 650px;
       
    }

td#right {
   
    }

div#contentHolder {
    text-align: left;
    width: 630px;   
   
    margin: 0;
   
    }   

td#tdBottom {
    background: url(/pictures/bg/bottom.jpg) bottom left no-repeat;
    height: 84px;
    }
Avatar billede olebole Juniormester
11. marts 2008 - 14:38 #14
Hvis det er noget, du ønsker, jeg skal forholde mig til, så upload det
Avatar billede donkazz Nybegynder
11. marts 2008 - 14:42 #15
Ja så er det vist ligemeget hvis det skal være med den fisefornemme hat på, Hr. Ole Bole. Ellers tak du!
Avatar billede donkazz Nybegynder
11. marts 2008 - 14:43 #16
spørgsmål lukket pga. arrogance
Avatar billede olebole Juniormester
12. marts 2008 - 01:22 #17
Hvad i alverden mener du? Jeg har ikke billederne - og hvorfor skal jeg sidde og bikse et dokument sammen at teste på? Det ville da være ulig meget lettere, hvis du uploadede dokumentet, så jeg kunne teste på det dér - og se resultatet.

På den anden side ... hvis det er for meget forlangt for at få gratis hjælp til sine problemer, er det da også bedre at lukke - omend det virker en kende forkælet!
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