[css] div schuift uit beeld bij verticaal centreren - Softwareontwikkeling

maandag 5 april 2004 01:25

Acties:

Topicstarter

De situatie is als volgt:

Ik heb 2 divs. Éen achtergrondlaag en één voor de voorgrond (die kleiner is, dus de achtergrondlaag is eromheen zichtbaar). Deze lagen wil ik zowel horizontaal als verticaal in het beeld centreren. Met behulp van CSS absolute positionering en margins lukt dat prima. Maar als ik het scherm verklein in hoogte, zodat die minder is dan de hoogte van de lagen, dan schuift de bovenkant van de lagen buiten beeld. Dat wil ik niet.

Wat is de bedoeling: de voorgrond moet minimaal een toppositie van 0px behouden, zodat ie niet verdwijnt aan de bovenkant, maar als het ware blijft hangen bij het (kleiner) resizen. De achtergrondlaag mag wel gedeeltelijk verdwijnen.

Link naar code

Ik heb gepoogd dit probleem op te lossen door:
- body op 100% te zetten, display: table-cell en vertical-alignment:middle;
- de DIVs in een laag te zetten met dezelfde genoemde eigenschappen;
- een table eromheen te zetten die voor de centrering zorgt;

Maar niets lost het positioneringsprobleem op. De table kan niet gecombineerd worden met absolute positionering van DIVs (die wel nodig is omdat ze over elkaar heen staan).
Volgens mij moet het toch mogelijk zijn met behulp van een moederlaag, waarin beide lagen horizontaal en verticaal gecentreerd worden, maar ook een bovengrens krijgen omdat de moederlaag ze als het ware tegenhoudt.

Dus mijn vraag is: kan dit? En zo nee, wat is dan het meest voor de hand liggende alternatief? Het dient om een website te centreren zoals dat "vroeger" altijd ging met frames... Volgens mij moet het gewoon kunnen, maar vooralsnog krijg ik niet echt grip op het gedrag van die DIVs.

“Advertising says to people, 'Here's what we've got. Here's what it will do for you. Here's how to get it.'”

maandag 5 april 2004 01:28

Acties:

disjfa

Zet je div erin ipv absoluut erbuiten. Position absolute kan je het best zo veel mogenlijk weglaten omdat het 90% van de tijd beter kan en makkelijker is om het weg te laten.

Dus je div erin zetten en dan wat gaan spelen met wat margins etc. Stuk netter en stuk makkenlijker.

disjfa - disj·fa (meneer)
disjfa.nl

maandag 5 april 2004 11:03

Acties:

whitey-d

Topicstarter

bedoel je het plaatsen van de voorgrond DIV in de achtergrond DIV? Dan is het probleem volgens mij nog niet opgelost, je hebt inderdaad wel gelijk dat het dan netter is, dus ik pas het alvast even aan...

“Advertising says to people, 'Here's what we've got. Here's what it will do for you. Here's how to get it.'”

maandag 5 april 2004 11:30

Acties:

T-MOB

De methode die je gebruikt om te centreren zorgt ervoor dat er delen uit beeld verdwijnen als het scherm te klein is. Een div horizontaal en vertikaal centreren met IE-5.X support kan als volgt:

code:

<html>
<head>
<style>
body {
text-align: center; /* IE5 needs this */
min-height: 400px; /*IE won't understand */
height: 100%;
margin: 0; padding: 0;
}

#container {
text-align: left; /* Let's get the flow back to normal from IE5 */
position: relative;
width: 600px;
margin: -200px auto;
top: 50%;
}

#content { /* the two-div solution is to overcome box-model differences */
height: 400px;
background: red;
}


#spacer { /* to fake IE-min-height */
position: absolute;
top: 0;
left: 0px;
width: 0px;
height: 400px;

}
</style>
</head>
<body>

<div id="container"><div id="content">content</div></div>

<div id="spacer"></div>

</body>

Regeren is vooruitschuiven

maandag 5 april 2004 12:17

Acties:

whitey-d

Topicstarter

Bedankt voor de reacties, ik heb mijn code weer even omgegooid:

code:

<style type="text/css">

div#container {
    text-align: center; /* Let's get the flow back to normal from IE5 */
    position: relative;
    width: 600px;
    margin: -200px auto;
    top: 50%;
    background-color:#FF6633;
}
div#boxModelFix { /* the two-div solution is to overcome box-model differences */
      width:400px;
      height:400px;
}
div#content {
    height:300px;
    width:400px;
    margin-top:50px;
    background: red;
}
div#spacer { /* to fake IE-min-height */
    position: absolute;
    top: 0;
    left: 0px;
    width: 0px;
    height: 400px;
}
body {
    text-align: center; /* IE5 needs this */
    min-height: 400px; /*IE won't understand */
    height: 100%;
    margin: 0; padding: 0;
}

</style>

En DIVs:

code:

<div id="container"><div id="boxModelFix">
  <div id="content">test</div>
</div></div>
<div id="spacer"></div>

IE zou zich nu dus moeten houden aan de minimale paginahoogte of niet? Dat gebeurt namelijk nog steeds niet, zowel 6 als 5.5

En Netscape 7, Mozilla maken er helemaal een rommeltje van.. Misschien dat ik het voorbeeld niet goed heb verwerkt in mijn versie, maar ik kan nog niks raars ontdekken

“Advertising says to people, 'Here's what we've got. Here's what it will do for you. Here's how to get it.'”

maandag 5 april 2004 12:19

Acties:

T-MOB

Ik zag het al ja... ff niet goed getest. Probeer hem nu ff goed te krijgen...

Regeren is vooruitschuiven

maandag 5 april 2004 13:14

Acties:

T-MOB

Ik vrees dat het onmogelijk wordt met support voor IE5.
Met dit testje zou je een pagina kunnen maken die goed rendert in IE6 en Mozilla. IE5 houdt de problemen met verticaal centreren. Netscape heb ik niet getest, mar ik gok dat ie het ook goed doet.

(testje was btw voor andere doeleinden gemaakt dus zit er een header en footer bij).

Regeren is vooruitschuiven

maandag 5 april 2004 14:03

Acties:

whitey-d

Topicstarter

ok, dan ga ik die eens ombouwen, misschien is er toch een header DIV nodig van 0px hoog

“Advertising says to people, 'Here's what we've got. Here's what it will do for you. Here's how to get it.'”

Pagina: 1

Reageer