9 berichten aan het bekijken - 1 tot 9 (van in totaal 9)
  • Q:
    Bijdrager
    mits
    4 maart 2009 om 15:25

    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
    4 maart 2009 om 15:31

    Heb je hier iets aan?

    Bijdrager
    iJoost
    4 maart 2009 om 15:32

    http://www.w3.org/Style/Examples/007/center

    Bijdrager
    Zeekomkommer
    4 maart 2009 om 15:34

    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
    4 maart 2009 om 15:38

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

    Bijdrager
    wout3r
    4 maart 2009 om 16:32

    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
    4 maart 2009 om 16:39

    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
    4 maart 2009 om 17:00

    geen hoogte meegeven aan je divs:)

    Bijdrager
    wout3r
    7 maart 2009 om 17:16

    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.