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

    html / css – verticaal centreren – witte marge top

    Hallo,

    Ik ben bezig met een website, maar stuit op een probleem. Ik heb een code gebruikt waar mijn div id ‘container’ horizontaal en verticaal wordt gecentreerd.
    Nou wanneer ik mijn browser fullscreen open, wordt alles netjes gecentreerd. Hetzelfde wanneer ik het wat verklein.
    Alleen het probleem waar ik op stuit (zie plaatjes) is dat mijn bovenkant wegvalt. Je ziet dus net niet de border van mijn div.
    De onderkant is wel te zien.

    Hoe krijg ik mijn website zo werkende, dat men bij verkleinende browser toch mijn bovenkant te zien krijgt?

    Mijn css code voor het centreren:
    [code:1:ac01018373]#container{
    position: absolute;
    top: 50%;
    left: 50%;
    height: 700px;
    width: 900px;
    margin: -350px 0 0 -450px;
    border: 1px solid #000;
    z-index:1;
    } [/code:1:ac01018373]

    Alvast bedankt.

    Bijdrager
    kleini

    Ik ben absoluut geen specialist, maar mijn eerste reactie zou zijn om vanboven een divje met hoogte van een paar pixels toe te voegen…

    Bijdrager
    Hans.

    [code:1:4b8e303466]#container{
    position: absolute;
    left: 50%;
    height: 700px;
    width: 900px;
    margin: 0px 0 0 -450px;
    border: 1px solid #000;
    z-index:1;
    }[/code:1:4b8e303466]

    Wat nog beter is maar misschien niet werkt met jouw design:

    [code:1:4b8e303466]#container{
    position: relative;
    height: 700px;
    width: 900px;
    margin: 0 auto;
    border: 1px solid #000;
    z-index:1;
    }[/code:1:4b8e303466]

    Of zelfs:

    [code:1:4b8e303466]body
    {
    width:900px;
    position:relative;
    margin:0 auto;
    }[/code:1:4b8e303466]
    (dan moet je de container positioning wel weghalen)

    EDIT: 1 probleempje: dan is hij niet horizontaal gecentreerd.

    Bijdrager
    Lifelogger

    Dat komt door die min marge! Je zegt als het ware dat hij dat aantal pixels van boven mag missen. Snap dat je het nodig hebt om verticaal uit te lijnen, maar zou toch overwegen dit weg te laten en niet verticaal uit te lijnen.

    Bijdrager
    Lifelogger

    EDIT: 1 probleempje: dan is hij niet horizontaal gecentreerd.

    Even “text-align: center” toevoegen en dan lijnt hij wel horizontaal uit. :-)”

    Bijdrager
    Hans.

    Wow dom, ik bedoelde verticaal, en die text-align:center is inderdaad nodig om internet explorer mee te krijgen.

    Bijdrager
    Soedjono84

    Ok, bedankt voor jullie reacties.

    Da Chicken, jouw manier is mij bekend. Alleen zoek ik toch iets dat mijn design verticaal centreert. Ik vind het lelijk wanneer je design bijvoorbeeld een hoogte heeft van 600px, dat er dan een grote witte ruimte onder mijn design valt.

    Maar als er verder geen mogelijkheden meer zijn.. :(

    Bijdrager
    kaydie

    Kijk hier even naar…
    Mogelijk een oplossing, als je geen bezwaar hebt tegen een beetje javascript…

    Bijdrager
    KingAchille

    Dat zoek ik ook. Een gewone simpele HTML code dat een afbeelding zowel in het midden horizontaal als verticaal zet.
    (het gaat hier over een pagina met één afbeelding en dan moetje op die afbeelding klikken om door te gaan bla bla bla…, Maar het mooiste is wel dat die ene afbeelding altijd in het midden staat…)
    Iemand een tip?
    Mvg,

    Bijdrager
    n8n

    @TS: Dat kan enkel met CSS maar dan laat je IE6 wel automatisch vallen, omdat deze geen ‘min-height: #px;’ ondersteund, ikzelf gebruik liever geen .js voor zulke probleempjes.

    Bijdrager
    Soedjono84

    De oplossing bij een (flash)applicatie van 600 bij 900 pixels:

    [code:1:19ce83ba9f]<style type="text/css">
    * {margin: 0; padding:0;}
    /* mac hide */
    html, body {height:100%; width:100%;}
    /* emd hide */
    body {
    background-image:url(images/background.jpg);
    background-position:center;
    text-align:center;
    min-height:600px;
    min-width:900px;
    }
    #outer {
    height:100%;
    width:100%;
    display:table;
    vertical-align:middle;
    }
    #container {
    text-align:center;
    position:relative;
    vertical-align:middle;
    display:table-cell;
    height:600px;
    }
    #inner {
    width:900px;
    height:600px;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    }
    </style>

    <!–[if lt IE 8]>
    <style type="text/css">
    #container{top:50%}
    #inner{top:-50%; position:relative;}
    </style>
    <![endif]–>

    <!–[if IE 7]>
    <style type="text/css">
    #outer{
    position:relative;

    }
    </style>
    <![endif]–>

    [/code:1:19ce83ba9f]

    [code:1:19ce83ba9f]
    <body>
    <div id="outer">
    <div id="container">
    <div id="inner">
    ….flashjavascript code….
    </div></div></div>
    </body>
    </html>

    [/code:1:19ce83ba9f]

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

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