Toon posts:

tabel precies in midden van pagina

Pagina: 1
Acties:

vrijdag 8 april 2005 23:42

Acties:

Verwijderd

Topicstarter
ik heb een frames page in een tabel gezet en deze moet zowel links/ rechts als boven/ beneden in het midden staat.

Nu is het dit: http://www.sjefklerken.nl/index2testje112.html

zoals je kunt zien "plakt" ie aan de bovenkant. Ik wil hem precies in het midden hebben. Na google en GOTsearch heb ik niet veel soeps gevonden.

Wel een css verhaaltje:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

 <style type="text/css">
  html,body{
   margin:0;
   padding:0;
  }
  div#horizon{
   text-align:center;

   position:absolute;
   top:50%;
   left:0;

   width:100%;
  }
  div#inner{
   text-align:left;

   margin:0 0 0 -100px;

   position:absolute;
   top:-100px;
   left:50%;

   width:200px;         /* 2*|div#inner{margin-left}| */
   height:200px;        /* 2*|div#inner{top}|         */

   background:lime;
  }
  p{                    /* this makes the look more consistent between browsers, it has nothing to do with the technique */
   margin:0;
   padding:.2em;
  }
 </style>
</head>
<body>
 <div id="horizon"> <!-- Opera needs this div, otherwise the content will not be aligned correctly on resizing the browser window -->
  <div id="inner">
   <p>The background color of the box should be 'lime' and the box should always be centered.</p>
  </div>
 </div>
</body>


voorbeeld van de code toegepast vind je hiero: http://annevankesteren.nl/test/templates/center-hv.php

maar als je dat scherm verkleint dan schuift de tabel onder je adresbalk door, en dat mag niet. De tabel moet in het midden blijven tot dat je het scherm verkleint, als je het scherm kleiner maakt dan de tabel moet er iets van de onderkant verdwijnen en in geen geval van de bovenkant.

Helaas is me dat met deze code niet gelukt. Kan het wel met deze css? Kan iemand me een schop in de goeie richting geven?

Thanx

zaterdag 9 april 2005 00:11

Acties:

Verwijderd

Wat je wil is eigenlijk niet w3c valid...een variabele hoogte mag je niet defineren. Als je je niet wilt conformeren aan een html 4 of xhtml DTD en bereid bent tabellen te gebruiken dan kun je alles gewoon in een megatabel gooien:

<table border='0' cellspacing='0' cellpadding='0' width='100%' height='100%'>
<tr>
<td align='center' valign='middle'>
[je website]
</td>
</tr>
</table>

als je het in css wilt doen, moet je sowiezo je .html en je .body op height: 100% zetten. en dan een "mega div" neerzetten waarin je alles centreert. Maar ik vind je site wel goed zo hoor !!

zaterdag 9 april 2005 08:23

Acties:
  • Rowanov
  • Registratie: Februari 2004
  • Niet online

Rowanov

Kop eens wat anders...

Het was vrij makkelijk te vinden met google:
http://vmalek.murphy.cz/

Plus dat je niets op je online voorbeeld hebt staan met css, dus ik vraag me af of je het uberhaupt geprobeerd hebt. Je zegt nu; hij werkt niet en deze voorbeeld code heb ik gebruikt. Die voorbeeld code werkt prima, alleen het is je niet gelukt hem in je pagina in te passen, maar wat is dan het nut van je post als je je poging niet eens laat zien? Zo kan niemand toch zeggen wat er fout is :?

[ Voor 74% gewijzigd door Rowanov op 09-04-2005 08:28 ]

zaterdag 9 april 2005 08:39

Acties:
  • simon
  • Registratie: Maart 2002
  • Laatst online: 08-05 22:18

simon

Cascading Stylesheet:
1
2
3
4
5
6
7

#ding
{
   position: absolute; // relative mag ook
   left: 50%;
   width: 200px;
   margin-left: -100px;
}


zo werk 't ook, met absolute breedtes

|>

zaterdag 9 april 2005 09:06

Acties:
  • ZeilDude
  • Registratie: Juli 2004
  • Laatst online: 19-02-2022

ZeilDude

Alles wat je wilt weten: http://www.quirksmode.org/index.html?/css/centering.html .
Verwijderd schreef op zaterdag 09 april 2005 @ 00:11:
Wat je wil is eigenlijk niet w3c valid...een variabele hoogte mag je niet defineren. Als je je niet wilt conformeren aan een html 4 of xhtml DTD en bereid bent tabellen te gebruiken dan kun je alles gewoon in een megatabel gooien
Het gaat tegen de principes in van W3C om voor opmaak tabellen te gebruiken. Het is juist de bedoeling om inhoud en opmaak te scheiden. Een tabel wordt gebruikt om inhoud te rangschikken.

Ter aanvulling...
  • Er zit een lijntje door de foto van de fietser, dwars over zijn gezicht. Deze zie je niet in IE en Opera, maar wel in Firefox.
  • Als je de inline pagina buiten een frame bekijkt, ziet ie er niet uit.
  • Als je met ASP of PHP (of...) werkt, dan heb je helemaal geen frames nodig. Om hiervan gebruik te maken, hoef je niet eens zoveel te weten van ASP of PHP.
Reageer