[DIV,IMG] Probleem met positioneren en lagen

[Monkeydancer]

Geachte tweakers,

Op dit moment ben ik bezig met een html pagina. Ik ben nu een onderdeel aan het bouwen voor banners. Ik heb 3 dingen gedefinieerd in html:

2 plaatjes met een fade in en fade out effect
Een doorzichtige div
met daarbovenop text.

code:

<div>
    [img]"plaatje1"[/img]
    [img]"plaatje2.jpg"[/img]
       <div id="div vlakje wat doorzichtig is met een kleur"></div>
    <div id="topbanner"><span id="topbannertext1">Lekker <strong class="yellow">welkom</strong></span><span id="topbannertext2">bij tweakers.net</span></div>

</div>

Mijn bedoeling is om met lagen te werken. Van boven naar onder: text>doorzichtigevlak>foto2>foto1.

4 lagen dus. Daarvoor gebruik ik dus css:

code:

<style type="text/css">
    //body { background: #efe; }
    #banner1 { position: absolute; filter:alpha(opacity=100); -moz-opacity: 1; z-index: 2;}
    #banner2 { position: absolute; filter:alpha(opacity=0); -moz-opacity: 0.2; z-index: 1;}
    #topbanner { position: absolute; width: 220px; height: 70px; padding: 15px; z-index: 4;}
    #topbannertrans { position: absolute; width: 300px; height: 100px; background-color:   
                #10688E; padding: 15px; -moz-opacity: 0.6; filter:alpha(opacity=60); z-index: 3;}
    body > #topbannertrans { height: 70px; width: 279px;}
                #topbannertext1 { display: block; color: white; font-family: verdana; font-size: 13pt; font-                weight: normal; }
    #topbannertext2 { color: white; font-family: verdana; font-size: 15pt; }
    strong.yellow { font-family: verdana; color: yellow; font-weight: normal; }
    </style>

Dit werkt dus, maar dit wil ik dus niet. Ik wil mijn flow in de pagina behouden, door gebruik te maken van relative positioning. absolute werkt wel, maar als ik dus top: 10px aangeef, dan pakt hij 10px vanaf de venster en niet vanaf de parent element. Is er een manier, waarbij ik dus geen gebruik hoef te maken van relative positioning, maar toch elementen over elkaar heen gelaagd krijg?

Alvast bedankt voor de aandacht en moeite

[ Voor 9% gewijzigd door Monkeydancer op 03-02-2006 13:24 ]

[André]

Zet een container met position: absolute; om je items heen zodat ze vanaf daar positioneren.

[RM-rf]

Monkeydancer schreef op vrijdag 03 februari 2006 @ 11:54:

Dit werkt dus, maar dit wil ik dus niet. Ik wil mijn flow in de pagina behouden, door gebruik te maken van relative positioning. absolute werkt wel, maar als ik dus top: 10px aangeef, dan pakt hij 10px vanaf de venster en niet vanaf de parent element. Is er een manier, waarbij ik dus geen gebruik hoef te maken van relative positioning, maar toch elementen over elkaar heen gelaagd krijg?

'position: absolute' betekent een absolute positionering tov het parent element dat 'layout' heeft (een element met een gedfinieerde positioning, dus een element 'psoition: relative: geven, betektn dat daarbinnen absoluut gepositioneerde elementen, die positie krijgen relatief tov de linkerbovenhoek van het relatief gepositioneerde element)

zodra je dus de patenr-div een positioning geeft, ofwel 'relative' ofwel 'absolute' zullen de daarin liggende child-elementen gepositioneerd wordn tov dat parentelement.

[Monkeydancer]

Bedankt voor de feedback. Ik heb in principe al gebruik gemaakt van een container rondom de 4 elementen. Het probleem wat nu speelt is dus:

Ik wil niet gebruik maken van absoluut positioning. Als ik dat doe, dan loopt mijn flow niet meer goed op mijn webpagina. De 4 elementen die ik omschreven heb, overlappen met elkaar, als ik gebruik maak van absolute positioning en z-index. Dat is logisch en werkt ook correct. Maar de positionering is minder fijn.

Het grote probleem is dus, dat elementen die onder de banner staan (DIV met nieuwsitems bijv, relatief gepositioneerd), niet meer weten welke element parent is. Daardoor springen deze elementen dus alle kanten op, doordat ik dus gebruik gemaakt heb van absolute positioning voor de banner (2 plaatjes, een div en tekst allemaal absoluut). Daarvoor moet ik dus weer negatieve waarden gebruiken in de css.

Je hebt dus 3 onderdelen die elkaar overlappen en ze zijn allemaal absoluut gepositioneerd.

Ik probeer een manier te vinden, waarbij ik dus plaatjes en elementen elkaar kan laten overlappen, met relatief positioning. kan het wel of kan het niet?

[Boelie-Boelie]

En als je die plaatjes de background van die divs maakt?