anoniem Geplaatst: 16 oktober 2003 Delen Geplaatst: 16 oktober 2003 Ik wil mijn pagina centreren d.m.v. css boxes, nu lukt het me wel om de pagina horizontaal gecentreerd te krijgen maar verticaal niet. De vraag is dus hoe ik dit voor elkaar krijg ZONDER frames. [code:1:566266b1eb]#main { padding: 10px; margin-top: auto; margin-bottom: auto; margin-right: auto; margin-left: auto; width: 982px; height: 559px; }[/code:1:566266b1eb] Dit is ook nog een stuk CSS maar bij het onderstaande is het probleem dat hij niet stopt bovenaan de pagina, dus de pagina verdwijnt aan de bovenkant uit het beeld en je kan er ook niet naartoe scrollen. [code:1:566266b1eb]#main1 { top: 50%; margin-top: -283px; height: 567px; position: absolute; }[/code:1:566266b1eb] iemand een idee ? -marcel Quote Link naar reactie
anoniem Geplaatst: 16 oktober 2003 Auteur Delen Geplaatst: 16 oktober 2003 http://www.thenoodleincident.com/tutorials/box_lesson/basic_centered.html Quote Link naar reactie
anoniem Geplaatst: 16 oktober 2003 Auteur Delen Geplaatst: 16 oktober 2003 teacher, bedankt maar op deze pagina word ook niet verticaal gecentreerd, ik had gezocht en gevonden ;) Quote Link naar reactie
anoniem Geplaatst: 17 oktober 2003 Auteur Delen Geplaatst: 17 oktober 2003 Nog in beta (URI [b:260e2040c7] is veranderd[/b:260e2040c7]): [url]http://annevankesteren.nl/test/templates/center-hv[/url] (test) [url]http://annevankesteren.nl/test/templates/center-hv.phps[/url] (source) Quote Link naar reactie
anoniem Geplaatst: 17 oktober 2003 Auteur Delen Geplaatst: 17 oktober 2003 dit is wat ik nu ook heb, alleen dat is niet helemaal goed. ik zal proberen om te laten zien wat ik bedoel d.m.v. je voorbeeld. [img:c99fce3db7]http://junk.xanuex.nl/voorbeeld.gif[/img:c99fce3db7] de pagina gaat nu aan alle kanten uit het scherm, het is zelfs zo erg dat je er met scrollen niet meer bij kan. met mijn css stukje stopt hij iig aan de linkerkant alleen centreert hij het geheel nog niet verticaal. nee ik wil niet terug naar frames.... :lol: Quote Link naar reactie
anoniem Geplaatst: 17 oktober 2003 Auteur Delen Geplaatst: 17 oktober 2003 Enige oplossing daarvoor is een klein JSje :roll: vrees ik. Er is wel een betere oplossing:[code:1:4ec4e17c96]<html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> html{ background:#fff; } body{ position:absolute; top:0;right:0;bottom:0;left:0; margin:auto; height:200px; width:200px; line-height:200px; vertical-align:middle; text-align:center; background:lime; } </style> </head> <body> TEST </body> </html>[/code:1:4ec4e17c96](opslaan als .xhtml) maar dat werkt alleen in Mozilla... IMO ben je gek als je Frames gaat gebruiken. Daar heb je er zo'n 6 voor nodig om hetzelfde te bereiken. Het moet er gewoon nog goed uitzien op 800*600 lijkt me, dan heb je elke res die je site bezoekt. Quote Link naar reactie
anoniem Geplaatst: 17 oktober 2003 Auteur Delen Geplaatst: 17 oktober 2003 Je zou ook nog zoiets kunnen proberen: [code:1:0386fcc843] <html><head><title></title> <style type="text/css"> html,body{ width:100%; height:100%; margin:0; padding:0; } body{display:table;} #m { margin:auto; height: 500px; background-color:green; width:300px; } #l{ display:table-cell; vertical-align:middle; width:100%; height:100%; background-color:blue; margin:0; padding:0; } </style> </head> <body> <div id="l"><div id="m">test</div></div> </body></html> [/code:1:0386fcc843] Dit werkt alleen in Mozilla en Opera, omdat IE display:table en display:table-cell niet kent. Als je wil dat het ook in IE werkt, dan zul je ipv divjes table,tr en td moeten gaan gebruiken vrees ik. Quote Link naar reactie
Aanbevolen berichten
Om een reactie te plaatsen, moet je eerst inloggen