DIV-lagen: Content scrollt over de header heen

Status
Niet open voor verdere reacties.

Ed121212

Gebruiker
Lid geworden
1 mrt 2007
Berichten
32
Hallo,

Ik heb 3 wrappers (containers) als horizontale balken onder elkaar gestapeld.
Wrapper 1 en wrapper 2 (met header en navigatiebalk) wil ik vast positioneren bovenaan de pagina.
Wrapper 3 (met tekst) moet daaronder scrollbaar zijn.
De code die ik hiervoor nu heb ziet er als volgt uit:

#wrapper-1{
position: fixed;
top:0px;
}
#wrapper-2{
position: fixed;
top:80px;
}
#wrapper-3{
position: relative;
top:116px; /* 80 + 36 px*/
}

Resultaat / probleem hiervan is dat de content van wrapper3 'over de header heen scrollt'.
Kan iemand mij uitleggen hoe ik dit oplos ?? :rolleyes:
 
hallo :thumb:

z-index mee geven

#wrapper-1{
position: fixed;
top:0px;
z-index:1;
}
#wrapper-2{
position: fixed;
top:80px;
z-index:2;
}
#wrapper-3{
position: relative;
z-index:0;
top:116px; /* 80 + 36 px*/
}
groetjes michelscot :cool:
 
Hoi Michel,

Goeie tip:thumb:, had ik ff niet aan gedacht.

M'n probleem is daarmee voor een deel opgelost: de content die in de header in DIV's staat blijft nu netjes bovenop. Voor de header heb ik echter ook een background-image gebruikt, en daar scrollt de inhoud van wrapper-3 nog steeds overheen.

Ik neem aan dat ik geen z-index kan toepassen op een achtergrondafbeelding (want dan is het geen 'background-image' meer.

Alternatieve oplossing is om de (getegelde) achtergrondafbeelding uit de achtergrond te halen en in een DIV te plaatsen, eveneens met een z-index. Maar dan loopt de header niet meer schermbreed door (wordt versmald tot breedte van de wrapper). Dat euvel zou op te lossen zijn door ook de achtergrondafbeelding te laten staan, maar dan kan ik links en rechts een lelijke (niet-naadloze) overgang krijgen tussen de afbeelding (tegels) op de voorgrond en afbeelding op de achtergrond.

Kan ik op een andere manier hard definieren dat wrapper-3 niet over wrapper-1 scrollt?
Noot: Ik meng liever geen AbsolutePositioning DIV's door Relative DIV's.
 
hallo :thumb:

maak een div voor je foto in wrapper-1
CSS
wrapper-1Img{
position:fixed;
background-image:url(../banner.gif);
background-repeat:no-repeat;
}
HTML
<div id="wrapper-1">
<div id="wrapper-1Img"><img src="banner.gif" /></div>
</div>

groetjes michelscot:cool:
 
Bedankt voor je reactie. Denk dat ik nu de mogelijkheden (en onmogelijkheden) wel op een rijtje heb.

Iets soortgelijks als je voorstelt had ik al. Ik kom voorzichtigjes tot de conclusie dat het 'probleem' zit in het gebruik van een header-afbeelding met transparantie. (Gebruik van transparantie had ik bij nader inzien nog niet genoemd.)

Ik kom tot de volgende 'oplossingen':
1) Simpelst: header gewoon mee laten scrollen, met CSS: position:relative. Dus header niet fixeren (met position:fixed).
Voordeel hiervan: Content van wrapper eronder kan niet over de header scrollen, want de header scrollt immers mee.
Nadeel hiervan: Horizontale navigatiebalk (in header) scrollt ook van beeld af*.

* Je kan natuurlijk de navbar loskoppelen van de header, en die navbar wel fixeren (met position:fixed) maar dat kan een onnatuurlijk beeld geven ('deel van de header scrollt wel van beeld af en een ander deel niet').
2) Content van wrapper onder de header in een Absolute Positioning DIV (AP-DIV) zetten en die op een vaste positie onder de header plaatsen.
Nadeel hiervan is dat een AP-DIV geen verticale autostretch heeft, dus niet meerekt met de hoeveelheid content in de AP-DIV.
Mijn ontwerp leent zich niet zo goed voor deze oplossing, want ik heb gekozen voor een flexibele lay-out en de Relatieve DIV's van de header horizontaal gecentreerd door gebruik te maken van een negative margin (wat niet toepasbaar is op een AP-DIV).

3) Een niet-transparante afbeelding in de header plaatsen. Dus transparante afbeelding in de header vermijden. En geef de header een z-index met hogere waarde mee dan de wrapper eronder, zodat bij scrollen de wrapper onzichtbaar achter de header-afbeelding verdwijnt.

Verder is het nog mogelijk alle afbeeldingen (header) te maken in Fireworks of Illustrator, en deze als template te exporteren naar Dreamweaver.

In mijn geval kies ik toch maar voor oplossing 3: jpeg zonder transparantie in header. Met semi-transparant randje links en rechts.

Mijn ontwerp bevat bovenaan als schermbrede achtergrondafbeelding een balk met getegelde afbeelding. In de transparante header had ik daar bovenop wat losse afbeeldingen geplakt.
Toepassing van oplossing 3: Door aan de linker- en rechterrand van de jpeg in de header een semi-transparant strookje te maken, hoop ik een scherpe overgang tussen de tegels van de jpeg (header) en dezelfde tegels van de achtergrondafbeelding (in body) te voorkomen.
 
Hoi Ed121212,
Misschien nog iets: een variant op het gezichtsbedrog van oplossing 3.
  1. Als je de achtergrondtegels een {background-position: 50% 0;} en een {background-attachment: fixed;} geeft, zit het midden van de tegels altijd op dezelfde plaats, en scrollen de tegels niet mee omhoog.
  2. Als de pagina gecentreerd is (ga ik even van uit), dan kan je één keer de semi-transparante header erboven hangen, en daarvan een screenshotje maken.
  3. Dat screenshot sla je vervolgens op als niet-transparante png (geen kwaliteitsverlies zoals bij jpg's).
  4. Tenslotte vervang je de transparante header-afbeelding door de nu gemaakte niet-transparante versie met de background-all-in.
  5. Nu kan alles er onderdoor (sc)rollen. :)
Als het goed is, sluit de header-afbeelding naadloos of vrijwel naadloos *) aan op de tegels ernaast.

Voorbeeld;
  • Met semi-transparante header: no-scrolling-header-1.htm
  • Met niet- transparante header: no-scrolling-header-2.htm
  • Optisch is er in de header geen verschil bij een switch tussen 1 en 2.
  • Ook bij verandering van resolutie of window-formaat blijft dat zo. :)
PS: ik word wel nieuwsgierig! Heb je een dummy-pagina online, die we kunnen zien?

Met vriendelijke groet,
CSShunter
___________
*) Door afrondingsverschillen bij bepaling van de middenpositie kan er soms 1px verschil zijn, afhankelijk van de exacte beschikbare schermbreedte. Met slim gebruik van de positie van de achtergrond-tegels en/of een beetje smokkelen in de afbeelding is dat zo nodig wel te verhelpen. En waarschijnlijk heb je er helemaal geen last van als de tegel en de header ofwel allebei een even aantal px breed zijn, ofwel allebei een oneven aantal px. Dan kan er geen 1/2 px verschil zijn die in de browser-berekening de verkeerde kant op afgerond kan worden.
 
Laatst bewerkt:
Hallo CSShunter,

Bedankt voor je support. Je tip voor het centreren van de achtergrondafbeelding neem ik mee.:thumb:

Online pagina heb ik nog niet... Zou graag een pb'tje sturen om laatste drempel* van m'n template weg te werken. Heb onlangs een cursusje DW afgerond, sta er nu alleen voor en kan wel wat hulp gebruiken van Helpmij. (Ondersteuning bevalt tot dusver goed!) Paar weken terug al donatie gedaan maar kom er zojuist achter dat ik voor pb "lid" moet worden. Zojuist aangemeld... met lidmaatschap kan ik ook m'n website online zetten bij Helpmij...


Zou graag m'n eerste website eens online hebben.

* Als ik header in CSS fixeer wordt pagina in browser wel goed getoond, maar in wysiwyg DesignView van Dreamweaver verschuiven de onderste wrappers naar rechts (zucht).
 
... in wysiwyg DesignView van Dreamweaver verschuiven de onderste wrappers naar rechts (zucht).
Ik zucht met je mee: die "wysiwyg" betekent alleen "wysiwyg in de DW DesignView" ;). - Niet te vertrouwen dat ding!

Het vervelende van de DW-constellatie is daarbij, dat je een gemaakte pagina nooit direct in de browser kunt zien, maar dat dit via de ingebouwde DW-server loopt (of je moet 'm eerst exporteren naar een andere lokale plek).
Nadeel zit bij de prijs inbegrepen. :confused:

Met Notepad++ of KompoZer heb ik lang niet zoveel toeters en bellen als DW, maar ik zie wel meteen m'n pagina zoals ie echt is. :D
 
Laatst bewerkt:
Hallo,

Het probleem waarmee ik dit onderwerp startte is inmiddels wel verholpen (waarvoor mijn dank aan jullie bijdragen). Dus ik wou dit onderwerp afronden. Om het archief van Helpmij ordelijk te houden start ik voor een nieuw onderwerp* wel een nieuwe vraag.

* Ik wil nog wel even doorvragen over gebruik van Notepadd++.
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan