[XHTML] Tabel in midden van pagina

[Verwijderd]

Het probleem is simpel: ik wil een tabelletje in het midden van de pagina hebben (dus ook vertikaal). De niet zo nette oplossing is om er een tabel van hoogte 100% omheen te zetten. Maar dat werkt niet als ik netjes de XHTML doctype vermelding maak. Ook niet als ik <table style="width: 100%"> gebruik.

Een divje eromheen met width: 100% en vertical-align: middle geeft evenmin het juiste resultaat. Hoe moet het dan wel opgelost worden volgens de xhtml standaard?

[Verwijderd]

Boter, Kaas en Eieren?

code:

<table style="width: 100%; height: 100%;">
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td style="width: 750px; height: 530px; vertical-align: top;">
                        Inhoud pagina hier
        </td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

Ranzig, maargoed.

[th3]

http://www.infoclicks.net/#positioning

daar staat misschien wel iets voor je bij

[Verwijderd]

css:

code:

div.wrapper {
   position:absolute;
   top:50%;
   left:50%;
   height:500px;
   width:500px;
   margin-left:-250px;
   margin-top:-250px;
}

gewoon je tabel in een div met id wrapper,
margin-left op helft van je width, margin-top op helft van je height.

[Verwijderd]

Verwijderd schreef op 31 oktober 2004 @ 18:57:
css:

code:

div.wrapper {
   position:absolute;
   top:50%;
   left:50%;
   height:500px;
   width:500px;
   margin-left:-250px;
   margin-top:-250px;
}

gewoon je tabel in een div met id wrapper,
margin-left op helft van je width, margin-top op helft van je height.

Idd, dat is de oplossing.. ook een beetje vreemd.. maar het is de enige praktische oplossing op dit moment volgens mij..

[th3]

Verwijderd schreef op 31 oktober 2004 @ 19:04:
[...]


Idd, dat is de oplossing.. ook een beetje vreemd.. maar het is de enige praktische oplossing op dit moment volgens mij..

dit is een hele pagina vol oplossingen
http://www.student.oulu.fi/~laurirai/www/css/middle/

[Verwijderd]

Bedankt heren, de oplossing van MindWipe werkt in Internet Explorer. Helaas niet in FireFox. Iemand enig idee? Het gaat overigens om de site in me signature mocht je broncode willen zien.

[Zoefff]

De oplossing vind je op mijn webserver, http://zoefff.gotdns.com/divcenter.htm

[crisp]

Bedenk wel dat bij de negative-margin truuk er bij een te kleine viewport delen wegvallen, en je daar ook geen scrollbars voor krijgt.
Voor horizontale centrering kan je beter het volgende gebruiken:

Cascading Stylesheet:

body {
  text-align: center;
}
body #containter {
  position: relative;
  width: 760px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

verticale centrering voor je gehele content is meestal onzin; dan krijg je echt van die "postzegel"-sites

[Verwijderd]

Das (Zoefff) dezelfde oplossing als die hier boven staat. Maar tis al gelukt, ik had een typo gemaakt . Thanx allemaal!!

[ Voor 4% gewijzigd door Verwijderd op 31-10-2004 20:32 ]

[Verwijderd]

crisp schreef op 31 oktober 2004 @ 20:18:
Bedenk wel dat bij de negative-margin truuk er bij een te kleine viewport delen wegvallen, en je daar ook geen scrollbars voor krijgt.
Voor horizontale centrering kan je beter het volgende gebruiken:

Cascading Stylesheet:

body {
  text-align: center;
}
body #containter {
  position: relative;
  width: 760px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

verticale centrering voor je gehele content is meestal onzin; dan krijg je echt van die "postzegel"-sites

De site is ook meer een soort van 'visitekaartje'. Dan vind ik het persoonlijk niet fout. Maarjah, smaken verschillen .

Thanx voor de toelichting nog, zal het er zo ook even in verwerken. Vertikaal heb je dan nog wel dat probleem maar ok.

[Verwijderd]

Verwijderd schreef op 31 oktober 2004 @ 19:41:
Bedankt heren, de oplossing van MindWipe werkt in Internet Explorer. Helaas niet in FireFox. Iemand enig idee? Het gaat overigens om de site in me signature mocht je broncode willen zien.

hoezo werkt niet in FF? kijk maar op m'n site als voorbeeld!

[Verwijderd]

Verwijderd schreef op 31 oktober 2004 @ 23:15:
[...]


hoezo werkt niet in FF? kijk maar op m'n site als voorbeeld!

Zoals ik later al zei, ik had per ongeluk een typefoutje gemaakt . IE vond dat niet erg maar Firefox wel .