<div> centreert niet correct

zaterdag 3 maart 2012 01:03

Acties:

0 Henk 'm!

Topicstarter

Tijdens het testen van een website op een iPad in portrait mode kwam ik erachter dat een wrapper div niet juist centreert. Het probleem lijkt veroorzaakt te worden door de viewport-meta-tag. Nu ben ik niet helemaal bekend met de technische achtergrond van deze tag, maar als ik 'm verwijder, lijkt de div correct gecentreerd te worden. De tag is afkomstig van de HTML5 boilerplate, waar ik gebruik van maak in mijn WordPress theme.

Met deze tot de kern teruggebrachte code kan het probleem gereproduceerd worden:

HTML:

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            body {
                padding: 0 20px 0 20px;
            }
            
            #page {
                width: 900px;
                margin: 0 auto;
                background-color: #000;
                color: #fff;
            }
        </style>
    </head>
    
    <body>
        <div id="page">
            Hoodie american apparel raw denim next level terry richardson nulla. Yr authentic vero elit, truffaut brooklyn hella ethnic commodo sapiente cred. Banh mi food truck umami hoodie do vegan, excepteur wolf pitchfork deserunt minim exercitation. Mixtape vero consequat brunch sunt. Retro fap irony gluten-free. Irony pour-over american apparel forage. Put a bird on it kale chips nostrud flexitarian direct trade, biodiesel consectetur dreamcatcher stumptown brunch dolore.
        </div>
    </body>
</html>

Deze code staat ook online.

Het idee is dus om een wrapper div van een bepaalde grootte te hebben die horizontaal gecentreerd wordt, maar er moet wel aan weerszijden wat 'ademruimte' blijven bestaan.

Heb uiteraard tal van wijzigingen uitgeprobeerd en rondgezocht of er meer over dit probleem te vinden was, maar ik loop nu op een dood spoor. In mijn ogen zou de code gewoon moeten deugen, maar dat doet het kennelijk niet.

Zou het bijzonder op prijs stellen als iemand hier een oplossing voor weet en me kan vertellen waarom die meta-viewport-tag roet in het eten gooit

edit: Misschien heb ik het antwoord al. De viewport van de iPad is niet breder dan een X aantal pixels, daarom moet ik de site óf smaller maken, óf die tag verwijderen zodat 'ie de viewport aanpast aan de breedte van de site. Klopt dit?

[ Voor 8% gewijzigd door mcdronkz op 03-03-2012 01:27 ]

zaterdag 3 maart 2012 11:58

Acties: