[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]