Søg
Avatar billede 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.
Avatar billede 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.
Avatar billede 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 ?
Avatar billede 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.
Avatar billede 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.
Avatar billede w13 Novice
30. august 2008 - 23:52 #5
Nej, på min står det ikke i midten.
Avatar billede 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...
Avatar billede 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
Avatar billede 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...
Avatar billede 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>
Avatar billede 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?
Avatar billede 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.. :-)
Avatar billede 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. =)
Avatar billede w13 Novice
31. august 2008 - 19:01 #13
Tak for point i øvrigt! :)
Avatar billede thesurfer Nybegynder
31. august 2008 - 21:12 #14
"resize" skal være "onresize".. :-)
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
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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
09/0715:37 Et wifi net til en kolonihave uden wifi Af Andershoegh i Andet hardware
09/0714:29 IIS Kan ikke Redirecte til anden side Af bsn i Webservere
09/0714:19 ESET Af hkprofil i Backup- & Antivirus
09/0712:16 diskpart - slet harddisk Af Uvanga i Windows
07/0717:39 oprette gruppe i outlook.dk Af fase i E-mail programmer
White papers
Flere white papers »