Hallo

Op mijn pagina heb ik bovenaan een div met logo en menu, die ingesteld staat op position:fixed ( dat werkt )
Het is zo dat deze div deels transparent is. De inhoud van de website schuift er dus zichtbaar onder.
Is er een mogelijkheid om te voorkomen dat de inhoud dat doet ? Kan deze stoppen aan de balk ?

Met vriendelijke groeten
Wesley

Wesley,

Heb je en link?

Hieronder een simplistische voorstelling van mijn code.
Aan de hand hiervan ziet u dat de nummering onder het groene deel loopt.
Bedoeling is dat de groene balk steeds bovenaan staan en dat de inhoud er niet onder loopt.

Code:

<div style="background:green; opacity:0.5; position:fixed; top:0; height:50px; width:100%;">MENU</div>

- 1 -<br />- 2 -<br />- 3 -<br />- 4 -<br />- 5 -<br />- 6 -<br />- 7 -<br />- 8 -<br />- 9 -<br />- 10 -<br />- 11 -<br />- 12 -<br />- 13 -<br />- 14 -<br />- 15 -<br />- 16 -<br />- 17 -<br />- 18 -<br />- 19 -<br />- 20 -<br />- 21 -<br />- 22 -<br />- 23 -<br />- 24 -<br />- 25 -<br />- 26 -<br />- 27 -<br />- 28 -<br />- 29 -<br />- 30 -<br />- 31 -<br />- 32 -<br />- 33 -<br />- 34 -<br />- 35 -<br />- 36 -<br />- 37 -<br />- 38 -<br />- 39 -<br />- 40 -<br />- 41 -<br />- 42 -<br />- 43 -<br />- 44 -<br />- 45 -<br />- 46 -<br />- 47 -<br />- 48 -<br />- 49 -<br />- 50 -<br />- 51 -<br />- 52 -<br />- 53 -<br />- 54 -<br />- 55 -<br />- 56 -<br />- 57 -<br />- 58 -<br />- 59 -<br />- 60 -<br />- 61 -<br />- 62 -<br />- 63 -<br />- 64 -<br />- 65 -<br />- 66 -<br />- 67 -<br />- 68 -<br />- 69 -<br />- 70 -<br />- 71 -<br />- 72 -<br />- 73 -<br />- 74 -<br />- 75 -<br />- 76 -<br />- 77 -<br />- 78 -<br />- 79 -<br />- 80 -<br />- 81 -<br />- 82 -<br />- 83 -<br />- 84 -<br />- 85 -<br />- 86 -<br />- 87 -<br />- 88 -<br />- 89 -<br />- 90 -<br />- 91 -<br />- 92 -<br />- 93 -<br />- 94 -<br />- 95 -<br />- 96 -<br />- 97 -<br />- 98 -<br />- 99 -<br />- 100 -

Als ik jou goed begrijp haal dan

opacity:0.5

weg uit je code

Zo heb ik het op een vorige website opgelost, daar heb ik een witte achtergrond.
De hoofding bovenaan heb ik toen gewoon een witte achtergrond gegeven, opgelost.
Dat kan nu echter niet ... de div van de hoofding zou deels transparant moeten zijn ...

Origineel gepost door Remco T

Als ik jou goed begrijp haal dan

opacity:0.5

weg uit je code

Dat komt door de opacity. Is dat ook de bedoeling?

Dat is inderdaad de bedoeling. Op de website zit er een grote afbeelding op de achtergrond. Deze loopt onder de hoofding gewoon door. Om het leesbaarder te maken heb ik een zwarte hoofding ( groen in het voorbeeld ) - Door die opacity zal mijn tekst wat beter te lezen zijn.
Maar ik wens niet dat de inhoud van mijn pagina onder mijn hoofding zichtbaar is ... hopelijk is mijn uitleg duidelijk.

Origineel gepost door Z.Karip

Dat komt door de opacity. Is dat ook de bedoeling?

Origineel gepost door WesleyVN

hopelijk is mijn uitleg duidelijk.

Nee niet echt. Je wilt het transparant, maar de onderliggende laag niet zichtbaar? Dat is toch tegenstrijdig?
De transparantie zorgt ervoor dat de onderliggende laag zichtbaar is.
Kun je niet een JSFiddle maken om het uit te leggen?

Dat is precies waar ik mee zit, een tegenstrijdigheid ...
Ik wil de onderliggende afbeelding ( verwerkt in BODY ) zichtbaar, maar niet de content zelf ...

EDIT : de content moet verdwijnen wanneer de DIV van de menu langs onderen aangeraakt wordt ...

Origineel gepost door Wilbert E.

Nee niet echt. Je wilt het transparant, maar de onderliggende laag niet zichtbaar? Dat is toch tegenstrijdig?
De transparantie zorgt ervoor dat de onderliggende laag zichtbaar is.
Kun je niet een JSFiddle maken om het uit te leggen?

Wesley,

Probeer dit:

Maak een nieuwe div aan onder de header met onderstaande class:


.onderheader {
width: 100%;
height: auto;
top: 70px;
bottom: 50px;
z-index: 5;
overflow: auto;
position: absolute;
}

waarom post je geen link ? via een url shortener ?
praat veel makkelijker

Origineel gepost door WesleyVN

Dat is precies waar ik mee zit, een tegenstrijdigheid ...
Ik wil de onderliggende afbeelding ( verwerkt in BODY ) zichtbaar, maar niet de content zelf ...

EDIT : de content moet verdwijnen wanneer de DIV van de menu langs onderen aangeraakt wordt ...

Volgens mij snap ik het:

Er zijn drie lagen:
De achterste laag is de body met de afbeelding.
De tweede laag is de content
De derde laag is het menu.

Als je scrolt wil jij dat de body (met de afbeelding) onder het menu zichtbaar is maar de content laag niet.
Ik kan zo niet iets bedenken hoe je dit op kunt lossen met puur css.

is de background image toevallig ook fixed? hak deze dan in 2 delen... één deel voor de fixed div, de rest voor de body.

Zal ik in het vervolg proberen te doen.
Is voor iedereen wat gemakkelijker dan ;)

Origineel gepost door Remco T

waarom post je geen link ? via een url shortener ?
praat veel makkelijker

Dit was wat ik zocht, bedankt ! Ook bedankt aan alle anderen voor de input !

Top en bottom kon ik niet via CSS instellen omdat de website responsive is.
Dit heb ik aan de hand van jQuery ingesteld. Aangeroepen bij een RESIZE.
Lijkt me goed te werken op dit manier ! Weer een zorg minder.

Origineel gepost door Z.Karip

Wesley,

Probeer dit:

Maak een nieuwe div aan onder de header met onderstaande class:


.onderheader {
width: 100%;
height: auto;
top: 70px;
bottom: 50px;
z-index: 5;
overflow: auto;
position: absolute;
}