login  Naam:   Wachtwoord: 
Registreer je!
 Forum

tabel/div verticaal centreren

Offline copyfile - 04/05/2007 11:48
Avatar van copyfileNieuw lid Ik heb hier nu nog een tabel, die later omgezet wordt naar div's waarbij het de bedoeling is dat deze tabel/div horizontaal maar ook verticaal gecentreerd wordt. Hoe zou ik dit kunnen doen ?

12 antwoorden

Gesponsorde links
Offline nvleeuwen88 - 04/05/2007 11:50
Avatar van nvleeuwen88 HTML interesse van een tabel een div maken??
Offline radem205 - 04/05/2007 12:02 (laatste wijziging 04/05/2007 12:02)
Avatar van radem205 Nieuw lid Je kan werken met negatieve margins, dus zoals dit:


php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div style="position: absolute; top: 50%; left: 50%; width: 400px; height: 400px; margin-left: -200px; margin-top: -200px;">
  2.  
  3. </div>
Offline copyfile - 04/05/2007 12:06
Avatar van copyfile Nieuw lid @nvleeuwen88 : Het gaat niet over het van tabel div maken. Ik heb nu voor de handigheid tijdelijk even met tabellen gewerkt. Als alles straks goed werkt zet ik alles over naar div's. Het gaat nu alleen even over het uitlijnen.

@radem205 : Zal straks even kijken of het werkt. Maar hoe zou ik die -200 moeten instellen als de div 750px breed is en 160px hoog ?
Offline radem205 - 04/05/2007 12:13
Avatar van radem205 Nieuw lid <div style="position: absolute; top: 50%; left: 50%; width: 750px; height: 160px; margin-left: -375px; margin-top: -80px;">

</div>
Offline Thomas - 04/05/2007 12:17
Avatar van Thomas Moderator Ik zou geen negatieve margins gebruiken, dan kun je last krijgen van raar gedrag in IE (de helft van je pagina heeft hyperlinks die niet aanklikbaar zijn enzo).
Offline copyfile - 04/05/2007 12:35
Avatar van copyfile Nieuw lid Hoe zou het dan kunnen FangorN ?
Offline radem205 - 04/05/2007 12:44
Avatar van radem205 Nieuw lid Het is niet de beste methode inderdaad, maar anders zou je met vertical align moeten werken, welke ook niet altijd even goed werkt in de verschillende browsers.

Ik heb met negatieve margins nog geen problemen ondervonden in IE5.2, IE5.5, IE6.0, IE 7.0 en alle Firefox versies.
Offline Orves - 04/05/2007 13:33
Avatar van Orves Nieuw lid Negatieve margins zou geen problemen meer moeten opleveren en werkt vrijwel in alle browsers. Enkel de oudere versies van Safari pakken het soms niet goed op.

Het is een goede manier om je 'wrapper' op deze manier te positioneren.
Offline copyfile - 04/05/2007 14:26
Avatar van copyfile Nieuw lid Heb het even getest en het werkt in ieder geval in ie en firefox goed. Bedankt !!
Offline CDNC - 04/05/2007 15:23
Avatar van CDNC PHP ver gevorderde het geheel in een table gooien:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <table style="width:100%;height:100%;">
  2.  <tr style="vertical-align:middle;">
  3.   <td style="vertical-align:middle;">
  4.   </td>
  5.  ...


met vertical-align:top werkt het in alle browsers, met middle heb k et nooit getest...
Offline Orves - 04/05/2007 15:39
Avatar van Orves Nieuw lid Even een kleine note: indien je je website W3C Valid wilt maken is bovenstaande optie om het in een tabel te zetten niet correct. Een tabel een height van 100% meegeven is namelijk niet valid volgens de W3C normen.

Indien je dit niet belangrijk vindt is dit ook een goede manier om je probleem te tackelen.
Offline radem205 - 04/05/2007 15:41
Avatar van radem205 Nieuw lid Je geeft in je startpost aan dat je in de toekomst gebruik wil maken van divs, dus lijkt mij verstandig om het op mijn manier te doen (negatieve margins).
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.202s