Oprettet tir. d. 11. marts 2008 kl. 11:08:19

200 point uddelt | 17 kommentarer
donkazz
donkazz (11.670 point. Point ude: 1.395)

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/ (...)

Whyyyy? :-O
Anmeld misbrug
Skriv et svar | Skriv en kommentar

Skrevet tir. d. 11. marts 2008 kl. 11:18:17| #1

erikjacobsen
erikjacobsen (135.106 point)
jeg.samler.slet.ikke.paa.point.tak.erikjacobsen.com/
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>.
Anmeld misbrug
Skriv et svar | Skriv en kommentar

Skrevet tir. d. 11. marts 2008 kl. 11:38:01| #2

donkazz
donkazz (11.670 point)
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. :(
Anmeld misbrug
Skriv et svar | Skriv en kommentar

Skrevet tir. d. 11. marts 2008 kl. 11:49:05| #3

zargoth
zargoth (7.945 point)
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).
Anmeld misbrug
Skriv et svar | Skriv en kommentar

Skrevet tir. d. 11. marts 2008 kl. 11:50:54| #4

fennec
fennec (118.176 point)
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/ (...)
Anmeld misbrug
Skriv et svar | Skriv en kommentar

Skrevet tir. d. 11. marts 2008 kl. 11:53:58| #5

donkazz
donkazz (11.670 point)
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. :)
Anmeld misbrug
Skriv et svar | Skriv en kommentar

Skrevet tir. d. 11. marts 2008 kl. 12:00:38| #6

donkazz
donkazz (11.670 point)
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
Anmeld misbrug
Skriv et svar | Skriv en kommentar

Skrevet tir. d. 11. marts 2008 kl. 12:27:41| #7

erikjacobsen
erikjacobsen (135.106 point)
jeg.samler.slet.ikke.paa.point.tak.erikjacobsen.com/
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.
Anmeld misbrug
Skriv et svar | Skriv en kommentar

Skrevet tir. d. 11. marts 2008 kl. 13:00:08| #8

donkazz
donkazz (11.670 point)
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 :)
Anmeld misbrug
Skriv et svar | Skriv en kommentar

Skrevet tir. d. 11. marts 2008 kl. 14:00:20| #9

olebole
olebole (214.613 point)
<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>
Anmeld misbrug
Skriv et svar | Skriv en kommentar

Skrevet tir. d. 11. marts 2008 kl. 14:19:31| #10

donkazz
donkazz (11.670 point)
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)
Anmeld misbrug
Skriv et svar | Skriv en kommentar

Skrevet tir. d. 11. marts 2008 kl. 14:23:31| #11

olebole
olebole (214.613 point)
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  :)
Anmeld misbrug
Skriv et svar | Skriv en kommentar

Skrevet tir. d. 11. marts 2008 kl. 14:29:04| #12

donkazz
donkazz (11.670 point)
default.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ (...)
<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>
Anmeld misbrug
Skriv et svar | Skriv en kommentar

Skrevet tir. d. 11. marts 2008 kl. 14:29:55| #13

donkazz
donkazz (11.670 point)
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;
    }
Anmeld misbrug
Skriv et svar | Skriv en kommentar

Skrevet tir. d. 11. marts 2008 kl. 14:38:11| #14

olebole
olebole (214.613 point)
Hvis det er noget, du ønsker, jeg skal forholde mig til, så upload det
Anmeld misbrug
Skriv et svar | Skriv en kommentar

Skrevet tir. d. 11. marts 2008 kl. 14:42:40| #15

donkazz
donkazz (11.670 point)
Ja så er det vist ligemeget hvis det skal være med den fisefornemme hat på, Hr. Ole Bole. Ellers tak du!
Anmeld misbrug
Skriv et svar | Skriv en kommentar

Skrevet tir. d. 11. marts 2008 kl. 14:43:04| #16

Accepteret svar!200 point tildelt
donkazz
donkazz (11.670 point)
spørgsmål lukket pga. arrogance
Anmeld misbrug
Skriv et svar | Skriv en kommentar

Skrevet ons. d. 12. marts 2008 kl. 01:22:30| #17

olebole
olebole (214.613 point)
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!
Anmeld misbrug
Skriv et svar | Skriv en kommentar

Skriv et indlæg




Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] [img]link til billede[/img]
Web- og emailadresser omdannes automatisk til links
Se preview
Opret

Log ind

   
Opret bruger | Glemt adgangskode
   

Seneste spørgsmål

hvordan fungerer en "phone version" af en side?

Oprettet den 25. maj 2012 kl. 13.03
kurdo giver 200 point for svar | Giv et svar »

Opsætning af design

Oprettet den 24. maj 2012 kl. 20.33
EveryMA giver 60 point for svar | Giv et svar »

text top

Oprettet den 23. maj 2012 kl. 08.08
oersted giver 200 point for svar | Giv et svar »

Seneste guides

Hjælp til opsætning af IP-cam samt alm. netværks...
22. maj 2012 kl. 00.07 | Læs »
See Kessler vs. Green fight in your living room on pc
19. maj 2012 kl. 21.11 | Læs »
Ny god bærbar til tunge programmer
17. maj 2012 kl. 17.23 | Læs »
PSA-diagnosticering og -fejlkoder (Pre-Boot System...
9. maj 2012 kl. 11.12 | Læs »
Dell pc-diagnosticering - Problemer med din Dell...
7. maj 2012 kl. 14.38 | Læs »
   

Seneste nyheder

Galleri: De fedeste håndholdte gennem 40 år
25. maj 2012 kl. 16.04 | Læs »
Min Mac er under angreb - Apple skal tage det alvorligt
25. maj 2012 kl. 14.30 | Læs »
Landmænd låst fast til konkursramt bredbånds-firma
25. maj 2012 kl. 14.04 | Læs »
Her er din næste digitale gadget: En "Phablet"
25. maj 2012 kl. 13.40 | Læs »
Læserne: Her er vores værste it-indkøb
25. maj 2012 kl. 13.31 | Læs »

Tips & Tricks fra PC World

Teaser billede

Læserne: Her er vores værste it-indkøb

Det er ikke al it-udstyr, som er det rene guld. Her er nogle af læsernes skrækhistorier.

Læs mere »

Anmeldelser fra PC World

Teaser billede

Test: Mobil med Ferrari-design - og en Trabant-motor

Motorola har begået endnu en smartphone med lækkert design og potentiale til at være blandt de bedste. Men den når ikke i mål. Se her hvorfor.

Læs mere »

Seneste blogindlæg

Teaser billede

Tvangslukke spørgsmål: Hvad er den bedste løsning?

Hej Vi har mange åbne spørgsmål på Eksperten. Vi ville gerne tvangslukke dem - så et spørgsmål efter f.eks. 6 måneder lukkes. Men der er et par uklarheder som ville være gode at få lidt input til:...

Læs mere »

Nyheder fra PC World

Teaser billede

Sådan siger du farvel til Facebook

Læs her, hvordan du dropper Facebook og i stedet anvender nogle brugervenlige alternativer, så du stadig kan være social på nettet.

Læs mere »

Nyheder fra Computerworld

Teaser billede

Galleri: De fedeste håndholdte gennem 40 år

Her har du de mest banebrydende håndholdte computere gennem alle tider.

Læs mere »

Kurser
Visio 2007 Udvidet
Lær at bruge Office 2010 - kursus i opgradering til 2010 versionen
Securing Cisco Routers and Switches
iPhone programmering - lav din egen app.
Microsoft SharePoint 2010 Udvidet
Microsoft SharePoint 2010 Application Development Kursusnr.: 10175
JavaScript Grundlæggende kursus
Excel for nørder
Opgradering til MS Office 2010 (dette er en 3 timers gennemgang af nyhederne)
Deploying, Configuring, and Administering Microsoft Lync Server 2010 Kursusnr.: 10533 afholdes i Kbh
Alle kurser »
Samarbejdspartnere
Ferienhäuser in Dänemark.
Webhotel
Digital TV fra Viasat
VM fodbold
Udgiver · © 2012 IDG Danmark A/S · Hørkær 18 · 2730 Herlev · Tlf.: 77 300 300 · Fax: 77 300 301 · Brug af personoplysninger