Avatar billede r.hegaard Nybegynder
24. juli 2006 - 14:09 Der er 18 kommentarer og
1 løsning

Problemer med table style="height: 100%"

Efter at jeg er begyndt at bruge DOCTYPE på mine dokumenter, har jeg haft svært ved at få dem til at se rigtige ud.

Jeg har en side i en frame. På denne side er en tabel t1, som gerne skal udfylde al den plads, som der er til rådighed i rammen. Øverst i t1 skal der være et logo og nederst i t1 skal der være noget anden blandet i en tabel t2, som skal bruge den plads, som er tilovers, når logoet har taget sin plads.
Problemet er, at jeg ikke kan få t2 til at bruge den resterende plads, da jeg i cellen udenom t2 ikke ved, hvor meget plads der er tilovers da skærm- eller vinduesstørrelser kan være forskellige. Det letteste ville jo være, hvis man kunne skrive 100%-150, men det er så vidt jeg ved ikke muligt. Hvis jeg bare skriver 100%, så går tabellen udenfor rammen.

Nogen der har et forslag til, hvad jeg kan gøre?

Her er et eksempel (det virker fint i Firefox men ikke i IE):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>html,body{height:100%;width: 100%;margin:0px;padding:0px;}</style>
</head>
<body>

<table cellspacing=0 cellpadding=0 border=1 style="height: 100%;width: 100%;">
<tr><td align='center' style="height: 150;"><img src='logo.gif' width=150 height=150></td></tr>
<tr><td align='left'  style="height: 100%;">

<table cellspacing=0 cellpadding=0 border=1 style="height: 100%;width: 100%;">
<tr><td>ABC</td></tr>
</table>

</td></tr>
</tr></table>
</body>
</html>
Avatar billede zynzz Praktikant
24. juli 2006 - 14:27 #1
height="100%" istedet for style... + lav en tabel som har height="100%" ud over alt sammen...
Avatar billede fennec Nybegynder
24. juli 2006 - 14:44 #2
zynzz >>
Der er ikke nogen height attribut på et table tag. Og uanset hvad, er det altid en fordel at bruge CSS/style. Det skal man ikke gå fra.

r.hegaard >>
Du skal bare fjerne din DTD. Her er en kode som virker og validere:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>dcnsk</title>
<style type="text/css">
html,body{height:100%;width: 100%;margin:0px;padding:0px;}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="1" style="height:100%;width:100%;">
<tr><td align='center' style="height:150px;"><img src='logo.gif' width="150" height="150" alt=""></td></tr>
<tr><td align='left'>

<table cellspacing=0 cellpadding=0 border=1 style="height: 100%;width: 100%;">
<tr><td>ABC</td></tr>
</table>

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

</body>
</html>
Avatar billede fennec Nybegynder
24. juli 2006 - 14:50 #3
Og med et charset og " omkring alle attributer, for at afslutte den helt:

<!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>Min side</title>
  <style type="text/css">
    html,body{height:100%;width: 100%;margin:0px;padding:0px;}
  </style>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="1" style="height:100%;width:100%;">
<tr><td align="center" style="height:150px;"><img src='logo.gif' width="150" height="150" alt=""></td></tr>
<tr><td align="left">

<table cellspacing="0" cellpadding="0" border="1" style="height: 100%;width: 100%;">
<tr><td>ABC</td></tr>
</table>

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

</body>
</html>
Avatar billede r.hegaard Nybegynder
24. juli 2006 - 14:53 #4
fennec > >
Ja, det virker. Men er det også den rigtige måde at gøre det på? Bør man ikke henvise til en DTD ??
Avatar billede r.hegaard Nybegynder
24. juli 2006 - 15:04 #5
fenned > >
Er "/' også obligatorisk, når det drejer sig om talværdier? Har du et link til HTML-standarden, hvor det står. Jeg kan ikke finde det.
Avatar billede zynzz Praktikant
24. juli 2006 - 15:06 #6
fennec havde ikke set de fejl, men du har ret mht. CSS
Avatar billede fennec Nybegynder
24. juli 2006 - 15:14 #7
Hvis vi skal være 110% korrekt, så skal der være en DTD, men der er bare ikke en på W3, som der kan bruges i dette tilfælde. Du kan selvfølgelig lave din egen, men når du ser, hvad den skal indeholde, bliver du nok lidt overrasket. ALLE de tags der bruges skal beskrives. Du kan jo tjekke loose.dtd som ligger på W3:
http://www.w3.org/TR/html4/loose.dtd

Hvad der skal rettes deri, har jeg ingen ide om. Og så længe siden validere og vises rigtig i alle browsers, ser jeg ikke noget problem i at undvære DTD'en. 95% af de sider jeg har lavet er uden DTD, men mange kunne sagtens have den på.

/ er ikke obligatorisk. Tror næremere du har set det i forbindelse med gamle poster her på E, eller sammen med JS hvor /" er et escapetegn.
Avatar billede r.hegaard Nybegynder
24. juli 2006 - 15:20 #8
fennec > >
Tak for hjælpen. Jeg tror, at du har misforstået min sidste post. Det skulle forstås som " eller ', altså om det er obligatorisk at skrive border='0' eller om det er tilladt at skrive border=0 ?
Avatar billede fennec Nybegynder
24. juli 2006 - 15:26 #9
Det er ikke et krav at have " eller ' omkring, men det anbefales KRÆFTIGT at gøre det. I andre versioner (f.eks XHTML) er det nemlig et krav at have " omkring. ' dur heller ikke.

Så længe dine sider validere efter W3 standarden, så er du på den sikre side. Så tjek altid dine sider mod standarden.

Hvis du ikke ved hvordan du validere dine sider, så kan det gøres via W3:
http://validator.w3.org/

Eller ved at installere en validator i FireFox. Bruger selv "HTML Validator 0.7.9.3", som er et supert lækkert udvidelsemodul.
Avatar billede r.hegaard Nybegynder
24. juli 2006 - 15:46 #10
Tak for hjælpen. Jeg kender godt siden og jeg har også selv "HTML Validator 0.7.9.3" installeret.
Avatar billede mclemens Nybegynder
24. juli 2006 - 19:35 #11
Pas på med quirks mode ... IE går i quirks uden fuld doctype ... så den ikke overholder css ordentligt ... her er et eksempel (test og skift så til den korte doctype):


<!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>ingen titel</title></head><body>

<div style="width:100px;height:100px;background:#f00;">Test</div>
<div style="width:100px;height:100px;background:#f00;border:100px solid #ff0;">Test 2</div>

</body></html>
Avatar billede r.hegaard Nybegynder
24. juli 2006 - 19:50 #12
mclemens > >
Ja, det kan jeg godt se. Hvad vil du så gøre med et problem, som det jeg har?
Avatar billede mclemens Nybegynder
24. juli 2006 - 20:39 #13
... Hvis jeg nu skulle bruge den border ville jeg gøre som fennec gjorde ( http://www.eksperten.dk/spm/716535#rid6312232 ) ... jeg ville bare huske at jeg kodede i quirks og huske det når jeg valgte hvad css jeg ville bruge...


- ellers ville jeg måske prøve noget i denne stil (koder ikke så tit tables længere):


<!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>Ingen titel</title>

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

</style>

</head><body>

<div style="height:100%;">

<div style="width:150px;height:150px;margin:0px auto;background:#aaa;"><img src='logo.gif' width=150 height=150></div>

<div style="position:absolute;top:0px;left:0px;height:100%;">
<div style="height:150px;width:100%;"></div>
Her starter teksten..................................................................</div>


</div>
</body></html>


men, IE understøtter ikke min-height endnu ... så en ordentlig css løsning på dette problem er svær at lave ... % - px kommer ikke før css 3 ... den kqn ikke laves i højden men kan delvis simuleres i bredden ( http://www.eksperten.dk/spm/717496 )

( et par andre problemstillinger med height 100% her http://www.eksperten.dk/spm/712486#rid6300689 , http://www.eksperten.dk/spm/717767 )
Avatar billede Slettet bruger
25. juli 2006 - 21:52 #14
Fennec: Hvor har du det fra, at det ikke skulle være gyldigt at bruge single quotes i xhtml?
Avatar billede fennec Nybegynder
26. juli 2006 - 09:34 #15
Sandbox >>
Det var noget jeg fik at vide på skolen for mange år siden.
Skal dog siges at mange af de informationer jeg fik der, senere har vist sig at være forkert. Så hvis det er tilladt at bruge ' i XHTML, er dette bare endnu en streg, til listen over fejlinformation jeg har fået derfra.

Jeg har ikke kunne finde en side som beskriver at ' (eller ") er gyldige tegn, så har du et link vil det være super fedt.
Avatar billede mclemens Nybegynder
26. juli 2006 - 09:55 #16
Der er sikkert nogle "officielle sider"
hvor det står på også her er lige 2 uofficielle
http://www.htmlhelp.com/faq/html/basics.html , 3.4
http://www.featureblend.com/xhtml-attribute-quotes.html
Avatar billede fennec Nybegynder
26. juli 2006 - 10:06 #17
mclemens >>
Takker. Så har jeg også lært noget i dag :o)
Avatar billede mclemens Nybegynder
26. juli 2006 - 10:30 #18
Ok :o)

http://www.w3.org/TR/xhtml1/#h-4.4 <- Den giver ikke ligefrem indtryk af
at det er ok med ' - lidt dårlig vist/formuleret af w3 ... i kilden på samme
side bruges ' dog flere gange til omslutning af attributter ... f.eks.:
<ul class='toc'> (følte lige det er bedre med et w3 eksempel også end de andre links...)
Avatar billede Slettet bruger
26. juli 2006 - 15:16 #19
Da XHTML også overholder XML-specifikationerne, lykkedes det mig at finde et sted, hvor det siges meget præcist (men også ret svært læseligt) i http://www.w3.org/TR/REC-xml/#sec-common-syn hvor der står:
[10]      AttValue      ::=      '"' ([^<&"] | Reference)* '"'
            |  "'" ([^<&'] | Reference)* "'"

Oversat til lidt mere læseligt dansk betyder betyder det:

attributværdier består af
  "
  en streng, som består af en vilkårlig rækkefølge og kombination af
      tegn, der ikke er < eller & eller "
      reference
  "
eller
  '
  en streng, som består af en vilkårlig rækkefølge og kombination af
      tegn, der ikke er < eller & eller '
      reference
  '

Bare for kompletheds skyld, vil jeg lige tilføje, at referencer er sådan noget som &amp; og &lt;

Så definitionen kan omskrives til:
attributværdier består af to anførselstegn (" eller ') hvorimellem der er en hvilkensomhelst rækkefælge af tegn med enkelte begrænsninger:
  1) Det omgivende anførselstegn og < må ikke være i tegnfølgen
  2) & må kun være i tegnfølgen, når det er som del af en reference
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