9 berichten aan het bekijken - 1 tot 9 (van in totaal 9)
  • Q:
    Bijdrager
    mits

    Website centreren, zowel verticaal als horizontaal. Hoe?

    Beste OMT-ers

    Het lukt me maar niet om de site die ik momenteel aan het maken ben te centreren zoals ik wil. Ik wil het zo hebben als de afbeelding hieronder. Ik wil dus hebben dat de NAV-divs en CONTENT-divs in het midden van het scherm komen bij elke resolutie.
    Ik hoop dat iemand me hiermee kan helpen, ook CSS en HTML toegeoegd

    [URL=http://img9.imageshack.us/my.php?image=flowchart.gif][/URL]

    De CSS
    [code:1:b3900d189e]div#content_1 {
    position: absolute;
    width: 600px;
    height: 25px;
    background-image:url(boven2.png);
    left: 211px;
    top: 16px;
    }

    div#content_2 {
    position: absolute;
    width: 599px;
    height: 300px;
    background:#000000;
    left: 211px;
    top: 41px;
    }

    div#content_3 {
    position: absolute;
    width: 600px;
    height: 25px;
    background-image:url(onder2.png);
    left: 211px;
    top: 341px;
    }

    div#nav_1 {
    position: relative;
    width: 170px;
    height: 25px;
    background-image:url(boven1.png);

    }

    div#nav_2 {
    position: relative;
    width: 167px;
    height: 300px;
    background:#000000;

    }

    div#nav_3 {
    position: relative;
    width: 170px;
    height: 25px;
    background-image:url(onder1.png);

    }[/code:1:b3900d189e]

    De HTML
    [code:1:b3900d189e]
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>

    </head>

    <body>

    <div id="nav_1"></div>
    <div id="nav_2"></div>
    <div id="nav_3"></div>
    <div id="content_1"></div>
    <div id="content_2"></div>
    <div id="content_3"></div>

    </body>
    </html>

    [/code:1:b3900d189e]

    Moderator
    Night

    Heb je hier iets aan?

    Bijdrager
    iJoost
    Bijdrager
    Zeekomkommer

    Bij deze site heb ik ongeveer gedaan wat jij denk ik wilt: http://www.hoteldeplataan.nl
    Pluis de stylesheet maar eens uit. In dit geval is de content ook nog schaalbaar, misschien kan het bij jouw website dus wel makkelijker.

    Bijdrager
    mits

    Alvast bedankt voor de vele antwoorden!
    Ik ga ermee aan de slag en zodra het niet lukt weet ik jullie te vinden ;)!

    Bijdrager
    wout3r

    Wat je kan proberen is (een beetje lelijk maar wel effectief) het volgende:

    [code:1:d0ffbbc199]div#container {
    position: absolute;
    width: 600px;
    height: 400px;
    top: 50%;
    left: 50%;
    margin: -200px 0 0 300px;
    }
    [/code:1:d0ffbbc199]

    De container komt dan volledig om alle div’s heen te liggen..
    Waarbij je dus met de margin van de bovenkant de helft van de hoogte er weer af haalt en bij de margin-left de helft van de linker kant.
    Ik heb het niet geprobeerd, maar hiermee zou je een end mee moeten komen.

    Bijdrager
    mits

    Dankje voor Zeekomkommer!
    Ik heb het gefixt aan de hand van hoe jij het ongeveer gedaan hebt!
    Driemaal dank!

    Wout3r:

    De code van jou werkt niet…

    Enig idee nog hoe ik content kan ‘ laten meebewegen ‘ als ik het venster kleiner maak?

    Bijdrager
    chilli dude

    geen hoogte meegeven aan je divs:)

    Bijdrager
    wout3r

    Ik heb hem nu getest, en hij werkt prima bij mij. Hierbij nogmaals een volledige code.

    [code:1:f18e02ebc1]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <style type="text/css">

    #container {
    position: absolute;
    width: 400px;
    height: 300px;
    top: 50%;
    left: 50%;
    margin: -150px 0 0 -200px;
    border: 1px solid black;
    }

    </style>
    </head>

    <body>

    <div id="container">
    In het midden!
    </div>

    </body>
    </html>[/code:1:f18e02ebc1]

9 berichten aan het bekijken - 1 tot 9 (van in totaal 9)

Je moet ingelogd zijn om een reactie op dit onderwerp te kunnen geven.