Avatar billede bas Forsker
11. oktober 2003 - 00:42 Der er 32 kommentarer og
1 løsning

Fast cellehøjde ?

Hej eksperter

Kan man f.eks vha. CSS definere en fast cellehøjde,
som f.eks altid er Height 100%, uanset hvor meget eller hvor lidt der står i cellen.

Eller er cellens højde altid bestemt af cellens indhold ?

Har prøvet med < td style="height:100%" > men den er vist ikke gyldig.

På forhånd tak.

Hilsen Martin
Avatar billede dittlau Nybegynder
11. oktober 2003 - 00:47 #1
Har du prøvet med <td height="x">.
x er et givent tal, prøv gerne med 100%.

/dittlau
Avatar billede olebole Juniormester
11. oktober 2003 - 00:48 #2
<ole>

Dimensioner, angivet i procent, skal beregnes som et antal procent af dimensionerne af det omgivende element ... hvilket jo sjældent giver den store mening for en tabel-celle.
Prøv:
  <td style="height:40px">&nbsp;</td>

/mvh
</bole>
Avatar billede bas Forsker
11. oktober 2003 - 00:48 #3
Jeg tænker på ligesom det er lavet på eksperten.dk, hotpeopeople og iøvrigt rigtig mange hjemmesider, hvor den midterste celle fortsætter ned til bunden af skærmen, uanset cellens indhold.

Så skal man måske i stedet lave hele siden som én stor tabel ?

Hilsen Martin
Avatar billede bas Forsker
11. oktober 2003 - 01:13 #4
Til <ole>

Jeg prøvede med dit eksempel, hvor jeg har skrevet 600px,
og det virker.

Det handler altså om at angive en konkret størrelse.
Jeg synes ellers det ville være smart, hvis man bare kunne
skrive 100%.

Jeg venter lige og ser, om der kommer flere bud, ellers får du points.

Mange tak for det!

Hilsen Martin
Avatar billede roenving Novice
11. oktober 2003 - 04:03 #5
Som olebole skriver er det det omgivende element, som definerer en 100% ting, og det vil i sin yderste konsekvens blive en 10% <tr>, som må tage sin hele størrelse fra en tabel, som kun kan tage højde fra den div eller body, som omgiver den ...

-- dvs. at cellen i sig selv vil have den højde, som egentlig er hele din hjemmeside, og derfor ikke vil kunne tåle at have noget over eller under !-)

-- men man kan jo definere een tynd celle f.eks. i den ene side, som spanner over alle rækker og tager sin højde fra den højde du vil have tabellen til at have ialt ...

-- skal man have cellen begrænset til en højde må man så have fat i et element inde i, som kan definere højden, der kan en <div> anbefales !o]
Avatar billede roenving Novice
11. oktober 2003 - 04:04 #6
... en 100% <tr> ...
Avatar billede casper_skovgaard Nybegynder
13. oktober 2003 - 14:54 #7
her et eksempel på brug af "height: 100%"

husk at alle parent elementer skal også defineres som 100%, undtagen <tr>.

jeg kan dog ikke se hvornår man har brug for dette, og jeg er ikke sikker på at det virker i alle browsere.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
    <title></title>
    <style type="text/css">
    td {
        height: 100%;
    }
   
    </style>
</head>

<body style="height:100%; margin: 0px;">
<table style="height: 100%; width: 100%; border: 1px solid red">
<tr>
<td style="background-color: #FFEEDD">cell 1</td>
<td style="background-color: #EEFFDD">cell 2</td>
<td style="background-color: #DDFFEE">cell 3</td>
</tr>
</table>
</body>
</html>
Avatar billede olebole Juniormester
13. oktober 2003 - 15:00 #8
For at få det til at virke i alle browsere, bør man også sætte html-elementet til 100% -f.eks:

<style type="text/css">
html, body, table, td {
    height: 100%;
}
</style>
Avatar billede bas Forsker
13. oktober 2003 - 17:08 #9
Jeg har indtil videre løst det ved at give table height 100 % og
give de pågældene celler en højde i %, som til sammen giver 100 %

/Martin
Avatar billede olebole Juniormester
13. oktober 2003 - 17:15 #10
Hvis det virker, laver du andre fejl - prøv at lægge en URL til siden  :)
Avatar billede bas Forsker
13. oktober 2003 - 18:34 #11
Her en URL til siden:

http://www.detour.dk/fastcell.htm
Avatar billede olebole Juniormester
13. oktober 2003 - 21:34 #12
Aller øverst - før <html> - skal du have en DOC-TYPE. Til den kodeversion, du skriver, skal det nok være denne:
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

Ellers aner browserne ikke, hvad det er for et sprog - og hvilken version af det - der bliver skrevet i.
Det er _tvingende_ nødvendigt, du har URL'en med i din DOC-TYPE ("http://www.w3.org/TR/html4/loose.dtd"). Har du ikke den med, kan IE ikke tolke CSS (Cascading StyleSheets).

Når du har sat 'svinet' ind, vil du se, din tabel ikke længere holder højden. Det er fordi, dokumentets body nu er som den skal være: 0px høj ... indtil du kommer indhold på siden. Prøv f.eks:

<!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">
</head>
<body>

<button onclick="alert(document.body.offsetHeight)">Test body'ens højde</button>

</body>
</html>

Her er body'en 24px høj i IE og 32px i NS6 (knappen er lidt højere i NS). Prøv så at sætte nogle <br> ind over eller under knappen og læg mærke til højden tilpasser sig sidens indhold.
Da body'en er det omkransende element, giver det ingen mening at sætte tabellens højde til 100% (af body'ens).

Du skal derfor skrive:

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

I din head. Så vil 100%-tricket på tabellen virke igen. Håber det gav lidt afklaring  :)
/mvhh
Avatar billede olebole Juniormester
13. oktober 2003 - 21:35 #13
Faktisk bør du skrive:

<style type="text/css">
html, body {
  height: 100%;
  margin: 0px;
}
</style>
Avatar billede bas Forsker
13. oktober 2003 - 21:57 #14
Til olebole

ok tak, det må jeg prøve en af dagene - er for træt lige nu :-)
Avatar billede bas Forsker
13. oktober 2003 - 21:59 #15
Jeg har alligevel lige prøvet at lege med det.
Du mener altså at det trick du lige har skrevet sørger for, at
cellen tilpasser sig 100% i højden.


Jeg kan se, at knappen rykker nedad og at antallet at pixels ændre ved klik.
Avatar billede bas Forsker
13. oktober 2003 - 22:02 #16
Når jeg har sat dine ting ind, skal jeg så skrive det jeg har skrevet med < table height=100% > og angive de forskellige cellers højde i % ?

/Martin
Avatar billede olebole Juniormester
13. oktober 2003 - 22:09 #17
Jaja ... så laver du bare den tabel, du havde før.
Forskellen på det, du havde før og det, du nu har, er, at nu virker det i alle browsere. Samtidig vil CSS virke - i modsætning til før  ;o)
/mvh
Avatar billede olebole Juniormester
13. oktober 2003 - 22:15 #18
Da vi jo nu beskæftiger os med korrekt syntaks her på stedet, så se i øvrigt lige denne sætning:
  "Forskellen på det, du havde før og det, du nu har, er, at nu virker det i alle browsere."

Tænk så på, Dansk Sprognævn lige har fyret 'det ny komma' til fordel for 'det grammatiske komma', som er det, jeg bruger her.
Det er jo ren MS-tænkning: "Når nu, der er nogle, der ikke kan finde ud af at skrive ordentligt, må vi hellere acceptere noget klamp"  :oP

Nå, undskyld ... det var bare en (småspammende) strøtanke  :)
/mvh
Avatar billede bas Forsker
14. oktober 2003 - 18:49 #19
Til olebole

Jeg har opdateret den fil med tabellen http://www.detour.dk/fastcell.htm
Vil du se, om det ser rigtigere ud ?

Jeg har sat table til 100 %

Der skal være et billede i topppen (den øverste celle)
Jeg ved ikke, hvor meget højden er i %, derfor har jeg ikke
angivet nogen højde i % for den øverste celle.

Celle 2 og 3 er 5 % og 76 % - optager den øvreste celle automatisk
resten ?
Jeg har prøvet at angive en højde i % i den øverste celle, men
jeg synes ikke det virker helt efter hensigen.

Som udgangspunkt skal der ikke være scrollbar på siden, og tabellen / cellen skal gå helt ned til bunden.

På forhånd tak.

Hilsen Martin
Avatar billede olebole Juniormester
14. oktober 2003 - 22:31 #20
I det øjeblik øverste celle bliver over 19% af sidens højde (p.gr. af evt. indhold), vil der blive introduceret en scrollbar (19+5+76=100).
Avatar billede bas Forsker
14. oktober 2003 - 22:53 #21
Til olebole

ok tak, så det er altså et spørgsmål om simpel regning.

Et lidt andet spørgsmål:

Jeg vil gerne have mit indhold på siderne til at begynde samme sted.

Jeg overvejer at bruge div eller måske bare tabeller med margin-angivelser.
Jeg vil gerne lave det sådan at det vises relativt - altså alt efter skærmstørrelse.

Skal jeg så bruge position: relative ?
margin-top;
margin-left;...osv.
Jeg har rodet lidt med det, men jeg synes ikke helt det virker.

Tak.

Du sender bare et svar, når du vil have points :-)

Hilsen Martin
Avatar billede olebole Juniormester
14. oktober 2003 - 23:53 #22
Du skal bruge det, der er bedst i det givne tilfælde. Det er umuligt at udtale sig om uden at vide, hvad du fylde på siden og hvordan, det skal se ud  :)
/mvh
Avatar billede bas Forsker
15. oktober 2003 - 16:10 #23
Det er tekst og et enkelt billede.

/Martin
Avatar billede olebole Juniormester
15. oktober 2003 - 16:19 #24
Orv, hvor bli'r jeg klog  :o))
Avatar billede bas Forsker
15. oktober 2003 - 23:18 #25
olebole gik i skole....:-)

ok, jeg konkretiserer lige lidt.

På siderne skal der f.eks. være en overskrift og en mængde
brødtekst (svært at sige præcist hvor meget).
Teksten skal (selvfølgelig) være i den hvide celle.
På én af siderne vil jeg gerne have 2-3 kolonner med links under brødteksten.

Det skal være sådan, at jeg kan angive en standard margin for top, left og rihgt - og gerne sådan, at det bliver tilpasset i forhold til skærmstørrelse.

Jeg ved ikke, om det giver mening for dig ?

/Martin
Avatar billede bas Forsker
15. oktober 2003 - 23:19 #26
right, ikke rihgt
Avatar billede olebole Juniormester
16. oktober 2003 - 00:35 #27
Mon ikke du kunne lave noget à la:

<!-- tabel til links slutter -->
    </td>
  </tr>
  <tr>
    <td style="height:76%;text-align:center;vertical-align:middle;" bgcolor="#FFFFFF">
   
    <table style="width:100%;height:100%" cellspacing="0" cellpadding="0" border="0">
    <tr>
        <td style="width:33%;padding:20px 10px 20px 30px">Her står din tekst ...</td>
        <td style="width:33%;padding:20px 10px">Her står din tekst ...</td>
        <td style="width:33%;padding:20px 30px 20px 10px">Her står din tekst ...</td>
    </tr>
    </table>
   
    </td>
  </tr>
</table>
Avatar billede olebole Juniormester
16. oktober 2003 - 00:36 #28
... og:

<!-- tabel til links slutter -->
    </td>
  </tr>
  <tr>
    <td style="height:76%;text-align:center;vertical-align:middle;" bgcolor="#FFFFFF">
   
    <table style="width:100%;height:100%" cellspacing="0" cellpadding="0" border="0">
    <tr>
        <td style="width:33%;padding:20px 30px">Her står din tekst ...</td>
    </tr>
    </table>
   
    </td>
  </tr>
</table>
Avatar billede olebole Juniormester
16. oktober 2003 - 00:37 #29
I den sidste skal der ikke sættes bredde på:
    <td style="padding:20px 30px">Her står din tekst ...</td>
Avatar billede bas Forsker
09. september 2004 - 15:11 #30
> olebole

poster du et svar, så lukker jeg.

/Martin
Avatar billede olebole Juniormester
09. september 2004 - 17:54 #31
Yups  :)
Avatar billede casper_skovgaard Nybegynder
10. september 2004 - 08:44 #32
bedre sent end aldrig.... :)
Avatar billede bas Forsker
10. september 2004 - 11:18 #33
Beklager den lange ventetid.
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