Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

[CSS] Pagina centreren (Breinbreker!)

15 antwoorden
  • Is het mogelijk - en zo ja: hoe? - om met CSS een pagina te centreren? Wat ik namelijk wil is het volgende: een div met een vaste breedte in het midden van de pagina. Zou je met frames [b:30e1099edd]*,750,*[/b:30e1099edd] gebruiken, in CSS is het niet mogelijk om een ruimte 'op te vullen', toch? En als je de body de eigenschap [b:30e1099edd]text-align: center[/b:30e1099edd] meegeeft werkt dit prima, totdat (!) je de div een breedte meegeeft, ongeacht absoluut of relatief. De div wordt dan niet langer gecentreerd weergegeven maar links. (In ieder geval in Netscape.) Wat ook nog mogelijk is, is om de div tussen [b:30e1099edd]<center>[/b:30e1099edd] en [b:30e1099edd]</center>[/b:30e1099edd] te zetten maar ook dit gaat niet door omdat het niet geldig XHTML Strict is. Dus mijn vraag: hoe dit op te lossen? - Bas
  • misschien is dit wat: [url=http://members.lycos.nl/djamn/juliussteiner/flash.php]klik[/url] grtzz.
  • Leuk geprobeerd (en zeer handig), maar deze vlieger gaat nu niet op. Probeer maar eens layer "main" een vaste breedte te geven en je zult precies zien wat ik bedoel. Er staat niet voor niets "breinbreker!" ;) - Bas
  • Zet margin-left en margin-right op auto voor Mozzilla en gebruik text-align voor IE. /E
  • en het in een ander div zetten? [code:1:00c612f32b]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <head> <title>test</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <body style="margin: 0;> <div id="main" style="width:100%; text-align: center;"> <div id="content" style="width: 400px; border: 1px solid black;">test</div> </div> </body></html>[/code:1:00c612f32b] Dit werkt in IE6, maar ik heb geen NS op mijn werk dus kan ik dat nu niet voor je controleren of dat ook werkt.
  • niet in ns7
  • Deze twee zouden in alle browsers moeten werken. <style> #test{ margin : 200px; background-color : yellow; width : auto; } #test2{ position : absolute; left : 50%; width : 400px; margin-left: -200px; background-color : green; } </style> <div id="test"> test </div> <div id="test2"> test 2 </div>
  • dit werkt idd, maar ie zet ze uit elkaar en ns zet ze tegen elkaar. kan je op dezelfde manier een div in het midden van je scherm krijgen? vind het overigens wel raar dat hier geen standaard oplossingen voor zijn. weet iemand of css3 het volgende gaat ondersteunen:[code:1:d9bcd7520e]left:50%-200px;[/code:1:d9bcd7520e]grtz..
  • [code:1:2adfc98d75]div { margin-left: auto; margin-right: auto; width: 750px; border: 1px solid; } body { text-align: center; } body > div { text-align: none; }[/code:1:2adfc98d75] Dit werkt in ie5+, opera 6 & 7, mozilla, en ns6+. /E
  • [quote:9f1b215d7e]vind het overigens wel raar dat hier geen standaard oplossingen voor zijn[/quote:9f1b215d7e] De margin op auto zetten is de standaard oplossing alleen IE ondersteunt 't niet. /E
  • Zal wel door de verschillende interpretatie van margin komen. Denk dat het zo wel goed gaat (1e): margin : 0px 200px 0px 200px; Ik zou er ook maar een tegelijkertijd gebruiken. De een is variabel van breedte, de ander vast.
  • [quote:7c129b0255="Eelco Osseweijer"][code:1:7c129b0255]body > div { text-align: none; }[/code:1:7c129b0255][/quote:7c129b0255]een [url=http://tantek.com/CSS/Examples/boxmodelhack.html]link[/url] van bas. hier had ik gelezen dat je geen spaties moest zetten tussen body en > en > en div. [quote:7c129b0255]And be sure to not leave any space around the '>'.[/quote:7c129b0255]dus dat moet misschien ff verandert worden. grtzz..
  • De oplossing van Eelco lijkt de juiste, bedankt! :D - Bas
  • maar het is alleen met die van gerben mogelijk om de div verticaal in het midden te krijgen toch? grtzz..
  • Volgens mij wel, maar dat wilde ik op dit moment alleen niet. Maar op zich is het een zeer mooie oplossing. - Bas

Beantwoord deze vraag

Weet jij het antwoord op deze vraag? Registreer of meld je aan met je account

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.