Avatar billede buttersi Nybegynder
11. september 2008 - 17:46 Der er 23 kommentarer og
1 løsning

Tabel i midten af en side

Hej,

Jeg vil gerne placere en tabel i midten af min side. Det vil sige at hvis jeg ændre på min browser skal tabellen følge med og stadig ligge i midten. Altså min tanke var at gøre det på denne måde:

<table height="100%">
<tr>
<td><table width="700" border="1"><tr><td>Tekst her.</td></tr></table></td>
</tr>
</table>

Men det ser ikke ud til at virke. Nogen der har en løsning?
Avatar billede w13 Novice
11. september 2008 - 19:21 #1
Prøv at sætte style="margin:0 auto;" på din tabel.
Avatar billede zips Juniormester
11. september 2008 - 19:22 #2
Sådan her

<table style="margin:0 auto; height:100%;">
<tr>
<td><table width="700" border="1"><tr><td>Tekst her.</td></tr></table></td>
</tr>
</table>
Avatar billede zips Juniormester
11. september 2008 - 19:23 #3
Jeg er bare for langsom :)
Avatar billede buttersi Nybegynder
11. september 2008 - 19:54 #4
Det virker ikke i min browser. Men inde i dreamweaver virker det i design view.
Avatar billede olebole Juniormester
11. september 2008 - 20:05 #5
<ole>

Så er det nok ikke et HTML-dokument, du tester i  =)

Prøv at lægge et link til forsøget - eller skrive _hele_ koden her

/mvh
</bole>
Avatar billede buttersi Nybegynder
11. september 2008 - 20:10 #6
Avatar billede zips Juniormester
11. september 2008 - 20:55 #7
Tabellen er da midt på siden i IE6. FF3 og Chrome :)
Avatar billede buttersi Nybegynder
11. september 2008 - 20:59 #8
Det var da underligt, hos mig virker det heller ikke i Chrome og FF.
Avatar billede buttersi Nybegynder
11. september 2008 - 21:35 #10
Ja okay, så det fordi jeg ikke har fået forklaret mit problem ordenligt.

Jeg vil have tabellen til at stå i midten både vandret og lodret.
Avatar billede ssv Nybegynder
11. september 2008 - 21:41 #11
Ja, det kan du så ikke klare med en margin: auto ;-)
Avatar billede w13 Novice
11. september 2008 - 22:16 #12
Det er temmelig problematisk og kan i hvert fald ikke løses særlig enkelt.
Avatar billede w13 Novice
11. september 2008 - 22:24 #13
Personligt foretrækker jeg en JavaScript-løsning, da det forekommer mig nemmest og sikrest.
Avatar billede buttersi Nybegynder
11. september 2008 - 23:49 #14
w13 - Er der nogen steder jeg kan læse om sådan en løsning?
Avatar billede w13 Novice
12. september 2008 - 00:01 #15
Det er vel noget med:

<script type="text/javascript">
function DeadCenter(o)
{
  o = document.getElementById(o);
  o.style.position = "absolute";
  o.style.margin = "auto";
  o.style.top = (o.parentNode(o).offsetHeight / 2) - (o.offsetHeight / 2) + "px";
}
</script>

<div id="element1">
  Her er indholdet!
</div>

Og så på din body skal du sætte:

onload="DeadCenter('element1')"

Husk i øvrigt også, at body skal have sat height:100%;

Koden er dog meget utestet. =)
Avatar billede buttersi Nybegynder
12. september 2008 - 00:18 #16
Kan ikke få det til at fungere.

http://denstoretommelfinger.dk/tester/test.html
Avatar billede w13 Novice
12. september 2008 - 01:17 #17
Hmm, dette:

o.style.top = (o.parentNode(o).offsetHeight / 2) - (o.offsetHeight / 2) + "px";

skal være:

o.style.top = (o.parentNode.offsetHeight / 2) - (o.offsetHeight / 2) + "px";

Fungerer det så bedre?
Avatar billede roenving Novice
12. september 2008 - 10:31 #18
<table style="height:100%; width:100%;">
<tr>
<td><table style="width:700px; margin:0 auto; border:1px;"><tr><td>Tekst her.</td></tr></table></td>
</tr>
</table>

Det er vel ikke sværere ?-)

-- med en fuldt kvalificeret doctype vil det ovenikøbet virke i samtlige browsere, der understøtter css !-)
Avatar billede buttersi Nybegynder
12. september 2008 - 11:46 #19
w13 - nu er teksten næsten røget ud fra browseren :-P http://denstoretommelfinger.dk/tester/test.html

roeving - Altså med den løsning kommer tabellen ikke til både at stå i midten vandret og lodret. Men kunne jeg ændre noget i doctype så den gør det? nu ser siden således ud: http://denstoretommelfinger.dk/tester/test2.html
Avatar billede roenving Novice
12. september 2008 - 11:54 #20
1. Jeg vil anbefale dig at gemme brugen af xhtml, til der kommer en faktisk fungerende xhtml-version, formentlig xhtml 2.0 inden vi bliver pensionerede !-)

2. nej, for den ydre tabel ved ikke, hvad 100% er, når den ikke får det at vide, derfor skal du også sætte højden på de omkransende elementer:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html,body{height:100%;margin:0;padding:0;border:0;}
</style>
</head>

<body>
<table style="height:100%; width:100%;">
<tr>
<td><table style="width:700px; margin:0 auto; border:1px solid #000;"><tr><td>Tekst her.</td></tr></table></td>
</tr>
</table>
</body>
</html>
Avatar billede buttersi Nybegynder
12. september 2008 - 12:01 #21
roenving - det virker! men hvordan kan det være at ingen kom med den løsning før dig? er der nogle ulemper ved den?
Avatar billede roenving Novice
12. september 2008 - 12:14 #22
Tjah, nok fordi vi efterhånden er blevet så vant til tabelforskrækkelse, at det oftest resulterer i, at der fokuseres på ÷tabel-løsninger ...

-- det var jo så her fuldstændigt tåbeligt, når der i forvejen var en tabel !o]

-- og der kan godt findes problemer med den, da browserne jo bør tage de 100% (af viewporten !-) alvorligt, men mig bekendt støder man ikke ind i problemet ...

Velbekomme '-)

-- en deler bør vel også komme på tale ...

-- og à propos w13s funktionsnavn, så har thebox for en del år siden bragt en artikel-serie om problemet, hvor der så er fundet en css-løsning, der virker, hvis man kender det centrerede elements højde: http://www.wpdfd.com/editorial/thebox/deadcentre4.html
Avatar billede buttersi Nybegynder
12. september 2008 - 12:21 #23
Tak for svaret roenving

(også tak til w13 for alternativ løsning)
Avatar billede roenving Novice
12. september 2008 - 12:29 #24
-- og jeg takker for point ;~}
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