[XHTML/CSS] Achtergrondafbeeldingen onderaan zetten

[Tanuki]

Ik heb de volgende test pagina:

http://x/temp/

Hierop kun je dus een lap tekst zien die in 2 divs staat.

Het probleem is dat de 2 achtergrond afbeeldingen zich eigenlijk op 2 manieren moeten kunnen gedragen:
- Als de lap tekst niet hoger is dan de browser zelf, dan moeten de achtergrond plaatjes helemaal onderaan de browser (links en rechts) komen.
- Als de lap tekst wel hoger is dan de browser zelf, dan moeten de achtergrond plaatjes aan de onderkant van de lap tekst zelf komen.

Dat laatste doet 'ie goed. Als ik resize dan gaan de plaatjes vanzelf naar beneden. Maar als ik maximaliseer (en de lap tekst dus maar heel klein is) blijven de plaatjes bovenaan staan.

Ik heb eigenlijk geen idee hoe ik dan kan zeggen: Hey, doe die eens naar onder.

Ik heb al min-height: 100%; geprobeerd, maar dat snapt 'ie niet echt.

Kan iemand mij helpen?

[DaTiezl]

zie hier:

http://www.webmasterworld.com/forum83/6525.htm

de post van KK5st

[mithras]

Ik heb sowieso het idee dat je IE only ontwikkeld Ga eerst eens kijken naar een juiste methode om dit te handhaven. Ik zou het niet als twee losse achtergronden in twee geneste divs doen, maar netjes als footer positioneren. En dat je vervolgens de elementen helemaal onderaan je canvas wil hebben is dan niet eens zo moeilijk

[Tanuki]

Ik heb het nu zo:

http://x/index_test.html

Dus:
<div id="wrapper">
<div id="main">spamtekst</div>
<div id="footer">footer</div>
</div>

Het enige probleem is nu nog dat de footer boven de main-div zit. De maindiv moet juist boven de footer zitten (want in de footer zitten die achtergrondplaatjes).

z-index lijkt niet te werken... Als ik de wrapper op 0 zet, footer op 1 en main op 2 dan blijft de footer alsnog voor de main-div.

[ Voor 29% gewijzigd door Tanuki op 09-08-2007 23:36 ]

[mithras]

Waarom z-index? Het is helemaal niet nodig. Die container (wat jij "wrapper" noemt) is prima te gebruiken.

HTML:

<div id="container">
  <div id="content">
    Lorem ipsum</div>
  <div id="footer">
    <img src="bla" class="left">
    <img src="bla2" class="right">
    </div>
</div>

Waarbij je de footer tegen de onderkant van het scherm kan plakken. Geen z-index of wat dan ook nodig. Als je je afvraagt hoe je een blok aan de onderkant plakt, daar kan je de search voor gebruiken.

[Tanuki]

mithras schreef op donderdag 09 augustus 2007 @ 15:57:
Waarom z-index? Het is helemaal niet nodig. Die container (wat jij "wrapper" noemt) is prima te gebruiken.

HTML:

<div id="container">
  <div id="content">
    Lorem ipsum</div>
  <div id="footer">
    <img src="bla" class="left">
    <img src="bla2" class="right">
    </div>
</div>

Waarbij je de footer tegen de onderkant van het scherm kan plakken. Geen z-index of wat dan ook nodig. Als je je afvraagt hoe je een blok aan de onderkant plakt, daar kan je de search voor gebruiken.

Als je goed kijkt op die pagina is die precies hetzelfde als jouw voorbeeld. Het probleem is dat die 2 plaatjes de content overlappen. De content moet juist boven die plaatjes komen.

[mithras]

l0c4lh0st schreef op donderdag 09 augustus 2007 @ 16:04:
[...]

Het probleem is dat die 2 plaatjes de content overlappen. De content moet juist boven die plaatjes komen.

mithras schreef op donderdag 09 augustus 2007 @ 15:57:
Waarom z-index? Het is helemaal niet nodig.
[...]
Geen z-index of wat dan ook nodig.

[Tanuki]

mithras schreef op donderdag 09 augustus 2007 @ 16:13:
[...]


[...]

Volgens mij begrijp je me verkeerd...