Notifikationer

Markér alle som læst Log ud

trane_frisk Nybegynder

30. august 2008 - 13:55 Der er 11 kommentarer og
3 løsninger

Centrere tabel midt på skærmen?

Hej

Hvordan centrerer jeg en tabel midt på skærmen?? - altså både horizontalt og vertikalt.

Synes godt om

w13 Novice

30. august 2008 - 15:23 #1

Horisontalt klares med style="margin:auto"

Vertikalt er langt sværere. Så skal du enten bruge JavaScript eller f.eks. http://www.wpdfd.com/editorial/thebox/deadcentre4.html, men til den sidste skal du vist kende tabellens højde.

Synes godt om

per-olof Nybegynder

30. august 2008 - 18:55 #2

Hvis du kigger på kilde koden for www.damolof.dk så er det *.swf centreret både horizontalt og vertikalt. Det er måske noget du kan bruge for din tabel ?

Synes godt om

w13 Novice

30. august 2008 - 19:52 #3

Når man mindsker vinduet flytter swf'en sig jo ikke. Så det er bare sat fast til at være ca. i midten af en standardopløsning.

Synes godt om

per-olof Nybegynder

30. august 2008 - 23:34 #4

Ja, lige meget hvilken skærmopløsning, så er det i midten. Jeg opfattede at det var spg.

Synes godt om

w13 Novice

30. august 2008 - 23:52 #5

Nej, på min står det ikke i midten.

Synes godt om

net-base.dk Nybegynder

31. august 2008 - 00:25 #6

Uh ha. du skal igang med at frygtelig masse javascript snask. skal lige siges jeg ikke kan skrive javascript så kan ikke komme med et kode eksempel.

Start med at find ud af højden på læseruden i browseren... træk så højden på det felt du vil have fra og divider med 2 og lav det om til 0 i decimal. Det samme gør du så i breden også. så skulle du gerne have 2 kordinater for hvor din boks skal placeres...

Hvis den ikke vil rykke der ned prøv at sæt <html> og <body> til style="height: 100%;"

her er et lille tid til hvordan højde og brede aflæses i de forskellige browsere.
http://www.javascripter.net/faq/browserw.htm

Til sidst kan du lave et javascript som tjekker om browseren ændre størelse og så får den til at reloade siden. så boksen igen står i midten...

Håber du kan bruge nogle af mine råd...

Synes godt om

thesurfer Nybegynder

31. august 2008 - 03:19 #7

Når man nu vil bruge tabeller, kan man jo lige så godt bruge tabeller:

<table style="width:100%;height:100%;background-color:#ff0000;"><tr><td align="center" valign="middle">

<table style="background-color:#00ff00;">
<tr>
<td>denne tekst er centreret</td>
</tr>
</table>

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

Teksten er centreret både horizontalt og vertikalt.

Der er ikke nævnt noget der ugyldiggør denne løsning.

- Svar

Synes godt om

per-olof Nybegynder

31. august 2008 - 10:47 #8

w13 det har du ret i fordi jeg har en dims der som fisser op og ned.
Men udifra koden kan du finde:
<STYLE type="text/css">
body {margin:0; width:100%; height:100%;}
table.main {HEIGHT: 100%;}
.container {
text-align:center;
width:100%;
vertical-align:middle;
}
</style>
</head>
<table class="main" width="100%" border="0" cellpadding="2" cellspacing="2" style="position: relative">
<tr>
<td class="container" width="100%" height="100%" style="position: relative">
<div align="center">Og så indeholdet her...

Synes godt om

w13 Novice

31. august 2008 - 11:11 #9

Ellers kan det gøres sådan her med java script:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<body style="height:100%" onload="placeObj('test')">

<div style="width:400px" id="test">
Tekst her<br>
og her
</div>

<script type="text/javascript">
function placeObj(o){
var o=document.getElementById(o);

var iBodyHeight=document.getElementsByTagName("body")[0].offsetHeight/2;
var iBodyWidth=document.getElementsByTagName("body")[0].offsetWidth/2;

var iObjHeight=o.offsetHeight/2;
var iObjWidth=o.offsetWidth/2;

o.style.position="absolute";
o.style.top=(iBodyHeight-iObjHeight)+"px";
o.style.left=(iBodyWidth-iObjWidth)+"px";

}
</script>

Synes godt om

thesurfer Nybegynder

31. august 2008 - 17:13 #10

w13> Din kode fra 31/08-2008 11:11:16 gør jo netop det du skriver i 30/08-2008 19:52:32.
Hvorfor? Fordi koden kun bliver afviklet når siden loades.
Hvis JavaScript-koden skulle være brugbar, skulle den også afvikles når vinduet resizes:

<body style="height:100%" onload="placeObj('test')" resize="placeObj('test')">

En bedre løsning, som også virker selvom JavaScript er slået fra, er:

<table style="width:100%;height:100%;background-color:#ff0000;"><tr><td align="center" valign="middle">

<table style="background-color:#00ff00;">
<tr>
<td>denne tekst er centreret</td>
</tr>
</table>

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

(jeg har brugt baggrundsfarverne rød og grøn for at vise at teksten er centreret)

Her vil koden være centreret:
- både horisontalt og vertikalt
- uden at kende størrelsen på tabllen med teksten
- selv om JavaScript slåes fra

Mens jeg sidder og skriver dette indlæg, kan jeg ikke lige komme i tanke om dårlige ting ved denne metode?

Synes godt om

thesurfer Nybegynder

31. august 2008 - 17:14 #11

"koden" i "Her vil koden være centreret:" skulle have været "teksten".. ellers giver det ingen mening.. :-)

Synes godt om

w13 Novice

31. august 2008 - 19:01 #12

Ja, det er sandt. (Det, jeg mente i 30/08-2008 19:52:32 var nu mere, at den bare ikke stod centreret hos mig på noget tidspunkt. :P )

Dog skal "resize" vel være "onresize" i dit eksempel?

Personligt vil jeg hellere fikse problemet med JavaScript og undgå al det tablekode.
Jeg har ikke noget imod tabeller, så længe de ikke er brugt til design altså, og dette tablehack tiltaler mig heller ikke rigtigt.

Det skyldes nok også lidt, at mine sider som regel bruger en del JavaScript, så en besøgende der har slået det fra vil ikke få helt så meget ud af det.

Jeg kender nu heller ikke nogen, der slår JavaScript fra, og hvis de gør det, kan de vel heller ikke forvente at kunne bruge nogen sider fornuftigt. =)
Dette tilfælde er oven i købet meget mildt, da en besøgende uden JS bare vil se elementet uden at det er centreret vertikalt. =)

Synes godt om

w13 Novice

31. august 2008 - 19:01 #13

Tak for point i øvrigt! :)

Synes godt om

thesurfer Nybegynder

31. august 2008 - 21:12 #14

"resize" skal være "onresize".. :-)

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
Hjælp med HTML og CSS Af Nojsa i HTML	18	10/09/202515:07	17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML	3	19/03/202522:16	20/03/202513:04
Se og ændre html på en webside Af magger i HTML	4	11/03/202513:55	12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML	5	02/03/202520:05	04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27

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