[CSS] Opacity voor wrapper layer

[Verwijderd]

Hallo allemaal

ik heb een probleempje met mijn body en wrapper.

De body heeft een background-image dat wordt gerepeat. Dit geeft een funky patroontje. Maar op mijn wrapper wil ik dat patroontje niet zo prominent zien, dus dacht ik wat te gaan spelen met de doorzichtigheid.

Wat ik wil is op alles wat niet de wrapper is, een opacity van 100% en mijn patroontje zien.

Binnen de wrapper moet de achtergrond wel zichbaar zijn, maar niet op 100%. Ik denk (op de gok) dat 30% wel mooi is. Mijn eerste gedachte was gewoon de opacity van de wrapper op 30 gooien, maar dat maakte dus alles doorzichtig (wat ook logisch is natuurlijk, maar daar had ik weer niet aan gedacht )

Ik kan die overerving van de opacity niet uitzetten toch? Dat alleen een 'dun' laagje schemert, en de elementen daarboven gewoon 100 zijn? Enfin, nu heb ik een beetje zitten puzzelen, en dit probleem is lastiger dan het lijkt. Een voorgrond een opacity geven is geen probleem, maar een achtergrond wegdrukken, is dat mogelijk?

Wat ik nu heb, kun je hier bekijken. De css:

Cascading Stylesheet:

@charset "UTF-8";
/* CSS Document voor G1ant
    
/*eerst alles resetten*/

html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, form, blockquote, pre, fieldset, input {
    padding: 0;
    margin: 0; 
}

ul, ol { 
    list-style: none;
}

:focus {
    outline: 0;
}

body {
    font: 12px Verdana, Arial, Helvetica, sans-serif;
    line-height: 16px;
    color: #1F1F1F;
    background-color: #F0F0F0;
    background: url(../img/wrapper.gif);
}

a {
    text-decoration: none;
}

a img {
    border: none;
}

div#wrapper {
    margin-left:auto;
    margin-right:auto;
    width: 948px;
    border-left:1px solid #333333;
    border-right:1px solid #333333;
}

k heb al even zitten spelen met diverse layers tussen de background en de header, binnen de header enzovoorts, maar het is me nog niet gelukt.

*edit*
Ik zie trouwens dat in Firefox 3 de wrapper het maar half doet. Het gekke is, dat alles wel netjes binnen de margins valt, en de width van 948 aanhoudt, maar de achtergrondkleur en de borders links en rechts worden niet meegenomen
In IE doet ie dat wel volgens mij

[ Voor 9% gewijzigd door Verwijderd op 30-10-2008 13:20 ]

[martijnve]

De simpelste oplossing is de wrapper een deels transparante png als achtergrond te geven.
Voor ie6 heb je dan wel een hack nodig.

[Bozozo]

Quick fix:

HTML:

<style type="text/css">
div#wrapperBackground {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0.7; /* standards-compliant */
  filter:alpha(opacity=70); /* IE */
  background-color: black;
</style>
}

<div id="wrapper">
  <div id="wrapperBackground"></div>
  ... content ...
</div>

Misschien heb je nog position: relative op de wrapper nodig. Niet getest trouwens.

[Verwijderd]

Bozozo schreef op donderdag 30 oktober 2008 @ 13:20:
Quick fix:

HTML:

<!-- en dan hier een oplossing -->

Misschien heb je nog position: relative op de wrapper nodig. Niet getest trouwens.

Ik was hier al mee aan het experimenteren, maar dan heb ik toch een probleem als de content van mijn pagina groter wordt dan de viewport? Of schuift die absolute layer automatisch mee?

[Bozozo]

Die div krijgt als het goed is 100% van de afmetingen van zijn parent, dus de wrapper div.

[Verwijderd]

Bozozo schreef op donderdag 30 oktober 2008 @ 13:42:
Die div krijgt als het goed is 100% van de afmetingen van zijn parent, dus de wrapper div.

Zie hier het bizarre resultaat: http://www.klassikaprikmavera.nl/webshop

Dit is wel heel vreemd: Hij begint op de goede plek en stopt aan de onderkant op 100% van de viewport, en rechts pakt ie twee keer de marge?

[DeluxZ]

Ha, leuk dit probleem heb ik ook een tijdje geleden gehad.

CSS heeft de eigenschap met opacity om het te erven van de parent. Dus als je een wrapper hebt met opacity 30% nemen alle divjes die in de wrapper staan dit over Ik heb toen de volgende website gevonden om het te fixen.

http://www.stevenyork.com...w_to_have_opaque_children

[Geert.H]

Verwijderd schreef op donderdag 30 oktober 2008 @ 13:48:
[...]


Zie hier het bizarre resultaat: http://www.klassikaprikmavera.nl/webshop

Dit is wel heel vreemd: Hij begint op de goede plek en stopt aan de onderkant op 100% van de viewport, en rechts pakt ie twee keer de marge?

niet zo vreemd
1. Je moet de div wrapper een position:absolute of relative meegeven
2. Je moet de wrapper background niet om je hele content heen plaatsen, maar direct afsluiten. verkeerd gezien
3. Je moet helemaal onderaan een clear:both plaatsen omdat je floating elements ervoor zorgen dat de wrapper niet meestretched.
4. eventueel moet je ook nog je wrapper een height:100%; meegeven, maar weet niet zeker of dat ook nodig is.

Dat wordt dus:

code:

<div#wrapper>
   <div#wrapper-background></idv>
   <div#content>bla bla</div>
   <div style="clear:both;"></div>
</div>

- Kijk niet vreemd op als je ineens een achtergrond kleur hebt, die zit in je wrapper, moet je dus even weghalen.
- Verder moet je dan ook nog de elementen die in de wrapper staan (dat zijn:header, aanbieding, winkelwagentje en nieuws) ook een position:relative meegeven en een z-index die hoger is als de wrapper-background.

Succes ermee

[ Voor 15% gewijzigd door Geert.H op 30-10-2008 15:28 ]

[Verwijderd]

Geert.H schreef op donderdag 30 oktober 2008 @ 15:22:
[...]

niet zo vreemd
1. Je moet de div wrapper een position:absolute of relative meegeven
2. Je moet de wrapper background niet om je hele content heen plaatsen, maar direct afsluiten. verkeerd gezien
3. Je moet helemaal onderaan een clear:both plaatsen omdat je floating elements ervoor zorgen dat de wrapper niet meestretched.
4. eventueel moet je ook nog je wrapper een height:100%; meegeven, maar weet niet zeker of dat ook nodig is.

Dat wordt dus:

*snip*

- Kijk niet vreemd op als je ineens een achtergrond kleur hebt, die zit in je wrapper, moet je dus even weghalen.
- Verder moet je dan ook nog de elementen die in de wrapper staan (dat zijn:header, aanbieding, winkelwagentje en nieuws) ook een position:relative meegeven en een z-index die hoger is als de wrapper-background.

Succes ermee

In Firefox werkt het als een Zwitsers Polshorloge. In IE7 verandert er echter weinig...

Huidige code:

Cascading Stylesheet:

body {
    font: 12px Verdana, Arial, Helvetica, sans-serif;
    line-height: 16px;
    color: #1F1F1F;
    background-color: #F0F0F0;
    background: url(../img/wrapper.gif);
}

#wrapper {
    position: relative;
    margin-left:auto;
    margin-right:auto;
    width: 948px;
    border-left:1px solid #333333;
    border-right:1px solid #333333;
}

div#wrapperBackground {
  position: absolute;
  z-index: -5;
  width: 100%;
  height: 100%;
  opacity: 0.3; /* standards-compliant */
  filter:alpha(opacity=30); /* IE */
  -moz-opacity: 0.3; 
  background-color:#F9F9F9; 
}

#header {
    position: relative;
    z-index: 0;
    float: left;
    height: 205px;
    background:url(../img/header.jpg) 0 -15px;
    width: 100%;
}

/* valt binnen de header*/
#pdmenu {
    width:900px;
    height: 31px;
    margin-left: auto;
    margin-right: auto;
    background-color: none;
}

#aanbieding {
    position: relative;
    z-index: 0;
    float: left;
    margin-top: 5px;
    width: 400px; 
    height: 322px; 
    border-right: 1px solid #333333;
    border-top: 1px solid #333333;
    border-bottom: 1px solid #333333;
}

#aanbieding div:hover {
    background-position: 400px 0;
}

#winkelwagentje {
    position: relative;
    z-index: 0;

    float: right;
    margin-top: 5px;
    width: 300px;
    height: 300px;
    background-color:#F9F9F9;
    
    border-left: 1px solid #333333;
    border-top: 1px solid #333333;
    border-bottom: 1px solid #333333;
    
    overflow: auto;
    overflow: -moz-scrollbars-horizontal;
    overflow-x: hidden;
    overflow-y: auto;
    
    font-size: 9px;
}


#nieuws {
    position: relative;
    z-index: 0;

    clear: both;
    
    float: left;
    margin-top: 5px;
    width: 400px;
    height: auto;
    max-height: 400px;

    background-color:#F9F9F9;
    border-right: 1px solid #333333;
    border-top: 1px solid #333333;
    border-bottom: 1px solid #333333;
    
    
    overflow: auto;
    overflow: -moz-scrollbars-horizontal;
    overflow-x: hidden;
    overflow-y: auto;
}

HTML:

<body>

<div id="wrapper">  
<div id="wrapperBackground"></div>
    <div id="header">   
        <div id="pdmenu">
            blaa blaa menu
        </div>      
            
    </div>
        
    <div id="aanbieding">
        <h2>Aanbieding: De nieuwe TCR Advanced</h2>
        <div style="background-image:url(img/tcr_aanbieding.jpg); width:400px; height:300px;"/>
            
            <div id="aanbieding_tekst">
                blaa blaa specs van de fiets
            </div>
            bestel direct</a>  </div>
</div>
    
    <div id="winkelwagentje">   
        blaa blaa inhoud mandje
    </div>
    
    <div id="nieuws">   
blaa blaa mekker
    </div>
    
    <div style="clear:both;"></div>

</div>
</body>

[Bozozo]

Probeer een uitgeklede versie van je site te maken waarin je het probleem isoleert, en zet die online. Ik ga niet de moeite nemen om door een lap irrelevante code heen te spitten.

[Verwijderd]

Bozozo schreef op donderdag 30 oktober 2008 @ 16:02:
Probeer een uitgeklede versie van je site te maken waarin je het probleem isoleert, en zet die online. Ik ga niet de moeite nemen om door een lap irrelevante code heen te spitten.

Hoeft ook niet

Ik heb alles gewoon in een extra divje gedaan en nu doet ie het in FF3 en IE7. De oplossing was eenvoudig: in plaats van alle afzonderlijke elementen een een andere z-index te geven, was gewoon een extra containertje voldoende.

Heel erg bedankt voor het meedenken en de oplossing. Beetje gek dat ik dit gisteren niet voor elkaar kreeg, want ik was hier al mee aan het pielen geslagen.

[ Voor 12% gewijzigd door Verwijderd op 30-10-2008 16:08 ]