CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

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?

Synes godt om

w13 Novice

11. september 2008 - 19:21 #1

Prøv at sætte style="margin:0 auto;" på din tabel.

Synes godt om

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>

Synes godt om

zips Juniormester

11. september 2008 - 19:23 #3

Jeg er bare for langsom :)

Synes godt om

buttersi Nybegynder

11. september 2008 - 19:54 #4

Det virker ikke i min browser. Men inde i dreamweaver virker det i design view.

Synes godt om

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>

Synes godt om

buttersi Nybegynder

11. september 2008 - 20:10 #6

http://denstoretommelfinger.dk/tester/index.php

Synes godt om

zips Juniormester

11. september 2008 - 20:55 #7

Tabellen er da midt på siden i IE6. FF3 og Chrome :)

Synes godt om

buttersi Nybegynder

11. september 2008 - 20:59 #8

Det var da underligt, hos mig virker det heller ikke i Chrome og FF.

Synes godt om

zips Juniormester

11. september 2008 - 21:17 #9

Her er hvordan det ser ud hos mig
http://www.prebendahl.dk/exp/pic/buttersi_chrome.jpg
http://www.prebendahl.dk/exp/pic/buttersi_sleipnir.jpg
http://www.prebendahl.dk/exp/pic/buttersi_ie6.jpg
http://www.prebendahl.dk/exp/pic/buttersi_ff3.jpg

Synes godt om

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.

Synes godt om

ssv Nybegynder

11. september 2008 - 21:41 #11

Ja, det kan du så ikke klare med en margin: auto ;-)

Synes godt om

w13 Novice

11. september 2008 - 22:16 #12

Det er temmelig problematisk og kan i hvert fald ikke løses særlig enkelt.

Synes godt om

w13 Novice

11. september 2008 - 22:24 #13

Personligt foretrækker jeg en JavaScript-løsning, da det forekommer mig nemmest og sikrest.

Synes godt om

buttersi Nybegynder

11. september 2008 - 23:49 #14

w13 - Er der nogen steder jeg kan læse om sådan en løsning?

Synes godt om

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. =)

Synes godt om

buttersi Nybegynder

12. september 2008 - 00:18 #16

Kan ikke få det til at fungere.

http://denstoretommelfinger.dk/tester/test.html

Synes godt om

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?

Synes godt om

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 !-)

Synes godt om

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

Synes godt om

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>

Synes godt om

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?

Synes godt om

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

Synes godt om

buttersi Nybegynder

12. september 2008 - 12:21 #23

Tak for svaret roenving

(også tak til w13 for alternativ løsning)

Synes godt om

roenving Novice

12. september 2008 - 12:29 #24

-- og jeg takker for point ;~}

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Bredde på div elementer Af dane022 i HTML	2	16/02/202408:29	20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML	2	21/12/202322:51	22/12/202308:03
validering <input tlfnr. Af slein55 i HTML	5	15/10/202311:43	15/10/202314:51
Link fra form input Af jnrmgs i HTML	9	19/09/202319:10	23/09/202313:11
includere i HTML Af slein55 i HTML	3	15/09/202313:47	16/09/202309:40

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS