[CSS] transparent neemt hele site mee

[Verwijderd]

hey tweakers,

Ik wil graag op mijn website de achtergrond (bijvoorbeeld) opacity 0.5 maken, maar de maincontent en de sidebar gewoon normaal laten. Maar, als ik in de css de background 0.5 maak, dan neemt de gehele site mee, dus de sidebar, de main content, zelfs de fotoos in de posts worden transparent gemaakt.

Als ik vervolgens dan de sidebar wrapper en de main content wrapper weer opacity 1.0 geeft, blijft hij transparent. Het gaat om deze website *snip* en het is gemaakt met wordpress en theme Platform.

En dit is volgens mij het stukje code dat erbij komt kijken.

code:

/* @ Site Layout */

    #site {opacity:0.95;
        position:relative; width: 980px; margin: 0 auto; margin-top: 65px; margin-bottom: 100px;
        box-shadow: 0px 0px 10px #ccc;
        moz-box-shadow: 0px 0px 10px #ccc;
    }   
    #wrapper {padding-bottom: 50px; }
    .content { background-color: #ffffff; width: 980px;  margin: 0px auto 0; }
    
    /* @ Layout Floating */
        #column-wrap, #container{ box-shadow: 0px 0px 10px #ccc;
        moz-box-shadow: 0px 0px 10px #ccc;
        border: 0px solid #ccc; float: left; margin-top: 10px;}
        
        #sidebar-wrap{box-shadow: 0px 0px 0px #ccc;
        moz-box-shadow: 0px 0px 0px #ccc;
        width: 320px; margin-left: 0px; margin-right: 0px;float:right; border-right: 0px solid #ccc}

ik hoop dat jullie mij kunnen helpen,

Philip

[ Voor 0% gewijzigd door RobIII op 24-08-2011 14:03 ]

[RobIII]

Als je nou eens stopt met je site te spammen en netjes testcases online gaat zetten zoals ik je eerder zei.

Verder: we verwachten hier eigen inzet en initiatief; we zien dus graag wat je zélf geprobeerd/gezocht/gevonden etc. hebt (zie onze Quickstart). We zitten hier niet om handjes te houden (zie ook Kan iemand even...?)

Op je vraag: zie hieronder Dat had ik er nog bij willen editten maar ik ben te laat

En tot slot: lees ook Wij tweakers doen elkaar permanent de groeten even

[ Voor 75% gewijzigd door RobIII op 24-08-2011 14:06 ]

[OkkE]

Omdat opacity invloed heeft op het hele element inclusief zijn text-nodes en child elementen.

Wanneer alleen de background-color half transparant moet worden, is dat in alle normale browsers met rgba(255,255,255,0.5) te doen. Voor IE kun je denk ik het beste een PNG gebruiken, gebruikers van IE6 hebben gewoon pech.

[ Voor 3% gewijzigd door OkkE op 24-08-2011 14:04 ]

[Verwijderd]

Hey Robll, ik vind dat je een beetje loopt te zeiken, natuurlijk heb ik zelf geprobeerd en lopen googlen etc, maar dat heeft dus niet gewerkt. Ik snap dat mijn website hier neerzetten overkomt als spam, maar ik wilde de mensen gewoon laten zien waar ik het over heb, ik zal volgende keer wel gewoon een screenshot neerzetten.
en hoezo loop je iemand een tik op de vingers te geven als hij gewoon netjes mensen wilt groeten? beetje vreemd.

Okke, bedankt voor je antwoord, ik had dat inderdaad al gelezen. maar weet je misschien of daar een alternatief voor is? ik dacht dan aan iets radicaals denken zoals de main wrapper en de sidebar gewoon geheel apart coderen

[RobIII]

Verwijderd schreef op woensdag 24 augustus 2011 @ 14:51:
natuurlijk heb ik zelf geprobeerd en lopen googlen etc, maar dat heeft dus niet gewerkt

Dat geloof ik meteen, maar ik lees/zie er niets van terug in de topicstart en dat is nou net waar onze Quickstart voor dient waar ik je inmiddels meermalen op gewezen heb.
Waarom we daar zo om "zeuren" is simpel: we komen zometeen allemaal met oplossingen op de proppen die je al geprobeerd hebt. Daar verdoen wij onze tijd dan mee en jij de jouwe. Dat demonstreer je zelf prachtig:

Verwijderd schreef op woensdag 24 augustus 2011 @ 14:51:
Okke, bedankt voor je antwoord, ik had dat inderdaad al gelezen. maar weet je misschien of daar een alternatief voor is?

Had je dat vermeldt in je TS had OkkE niet voor niets gereageerd en hadden mensen meteen geweten dat je graag een alternatief wil/wou.

Verwijderd schreef op woensdag 24 augustus 2011 @ 14:51:
Ik snap dat mijn website hier neerzetten overkomt als spam, maar ...

Dus: niet doen. Niets maar Gewoon met een paar regels HTML een testcase maken.

Verwijderd schreef op woensdag 24 augustus 2011 @ 14:51:
ik wilde de mensen gewoon laten zien waar ik het over heb, ik zal volgende keer wel gewoon een screenshot neerzetten.

Again: neen; in dit geval voldoet een screenshot toevallig maar we verlangen hier een testcase. Dat is zodat we de gebruikte HTML/CSS kunnen zien. Zonder relevante(!) code/testcase hebben we (meestal) aan aan screenshot ook niets.

Verwijderd schreef op woensdag 24 augustus 2011 @ 14:51:
en hoezo loop je iemand een tik op de vingers te geven als hij gewoon netjes mensen wilt groeten?

Ik tik je niet op de vingers, ik geef alleen even een linkje...

Verwijderd schreef op woensdag 24 augustus 2011 @ 14:51:
Okke, bedankt voor je antwoord, ik had dat inderdaad al gelezen. maar weet je misschien of daar een alternatief voor is? ik dacht dan aan iets radicaals denken zoals de main wrapper en de sidebar gewoon geheel apart coderen

Dat kan, maar waarom zou je dat doen? OkkE's suggestie is velen malen beter.

Overigens: had je mijn edit (mbt tot pagespeed/YSlow) ook nog gelezen? Ik denk dat transparency 1 van de minste problemen is die je hebt

[ Voor 13% gewijzigd door RobIII op 24-08-2011 15:06 ]

[OkkE]

Verwijderd schreef op woensdag 24 augustus 2011 @ 14:51:
Okke, bedankt voor je antwoord, ik had dat inderdaad al gelezen. maar weet je misschien of daar een alternatief voor is? ik dacht dan aan iets radicaals denken zoals de main wrapper en de sidebar gewoon geheel apart coderen

Waarom voldoet mijn oplossing niet? Het doet, in mijn ogen, precies wat je zoekt.

Een alternatief is er, ik raad het alleen af. Door al je content buiten het element met opacity te zetten, voorkom je dat alles ook half transparant wordt. Maar dat is een omslachtigere manier dan gewoon je background-color via rgba (en PNG voor IE) te doen.

[Verwijderd]

robll, bedankt voor de tip over de pagespeed/YSlow, ik zie inderdaad dat hij er slecht aan toe is haha, ik zal daar later eens naar kijken.

OkkE, ik zie je oplossing, maar het wil helaas niet werken. Ik zet 'm in de # site {background-color: rgba (255,255,255,0.5);} maar hij wil het niet doen. Overigens, als ik daar gewoon background-color: #000 dat hij ook niets. Als ik daar opacity: 0.5; pakt ie 'm weer wel, heel vaag. Dit zou goed kunnen komen door de theme die ik gebruik, die heeft namelijk allemaal gekke functies. Ook voor de background color. Of ik heb de code verkeerd geplaatst. Ik ben er mee bezig!

[RobIII]

Verwijderd schreef op woensdag 24 augustus 2011 @ 21:54:
OkkE, ik zie je oplossing, maar het wil helaas niet werken. Ik zet 'm in de # site {background-color: rgba (255,255,255,0.5);} maar hij wil het niet doen. Overigens, als ik daar gewoon background-color: #000 dat hij ook niets. Als ik daar opacity: 0.5; pakt ie 'm weer wel, heel vaag. Dit zou goed kunnen komen door de theme die ik gebruik, die heeft namelijk allemaal gekke functies. Ook voor de background color. Of ik heb de code verkeerd geplaatst. Ik ben er mee bezig!

Niet om 't een of ander maar je bent nu met een honkbalknuppel in een porceleinwinkel op klopjacht op een vervelende mug. In 't donker.

Als ik jou was zou ik eerst eens wat tijd nemen een (paar) tutorial(s) CSS/HTML/WordPress door te nemen want dit schiet niet op zo.

[Verwijderd]

Robll, sorry dat mijn vragen niet het standaard voldoen van dit forum. Ik wist namelijk helemaal niet dat beginners niet welkom zijn op het forum. Excuus voor mijn naiviteit

[RobIII]

Dat is helemaal niet waar; het is echter wél handig als je weet waar je mee bezig bent. Zo begin ik ook geen restaurant als ik alleen maar een ei kan bakken. Je hoeft geen 5-sterren chef te zijn, maar het is wel handig als je weet wat het verschil tussen bakken en stoven is Het praat wat makkelijker als je bepaalde basiskennis hebt

Daarbij verwachten we, wat ik je meermaals heb verteld, eigen inzet. Op de manier waarop je nu telkens post mogen wij 't werk doen dat jij ons voorschotelt. De meesten van ons zijn niet te beroerd je in de juiste richting te wijzen of zelfs een stapje verder te gaan maar op 't moment dat we 't moeten gaan voorkauwen wordt het anders; de meesten van ons worden daar voor betaald Je moet je dan ook even afvragen of 't wel helemaal eerlijk is zo. Je kunt dan 2 dingen doen: je neemt even de basics door of je besteed 't uit aan een andere partij (of dat nou je achterneefje is of een dure gerenommeerde webtoko is aan jou).

En als je nou eens de moeite nam een testcase neer te zetten, zoals ik je ook al vaker heb verteld, dan praat 't voor iedereen makkelijker. Jij kunt makkelijk je probleem demonstreren, wij kunnen naar (relevante!) code staren zonder door de bomen 't overzicht te verliezen, jij kunt makkelijk aanpassingen maken en dat dan uiteindelijk toepassen op de daadwerkelijke site en zien of 't daar (ook) werkt. Werkt 't niet dan ga je terug naar je testcase en ga je deze verder uitbouwen richting daadwerkelijke site om zo uit te sluiten of 't aan X, Y of Z ligt.

Zo'n testcase is peanuts:

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Testcase</title>
        <style type="text/css">
            .wrapper {
                width: 200px;
                height: 200px;
                padding: 20px;
                border: 1px solid red;
                float: left;
                margin: 10px;
            }
            
            .block {
                background-color: green;
                width: 100%;
                height: 100%;
                text-color: #000;
                font-weight: bold;
            }
            
            #a {
                background-color: rgba(0,0,255,0.5);
            }

            #b {
                background-color: rgb(0,0,255);
                opacity: 0.5;
            }
        </style>
    </head>
    <body>
        <div id="a" class="wrapper">
            <div class="block">Lorum ipsum dolor sit amet</div>
        </div>
        <div id="b" class="wrapper">
            <div class="block">Lorum ipsum dolor sit amet</div>
        </div>
    </body>
</html>

Paar regels code en je kunt aan de slag.

[ Voor 52% gewijzigd door RobIII op 24-08-2011 22:39 ]

[Schonhose]

OkkE schreef op woensdag 24 augustus 2011 @ 14:04:
Omdat opacity invloed heeft op het hele element inclusief zijn text-nodes en child elementen.

Wanneer alleen de background-color half transparant moet worden, is dat in alle normale browsers met rgba(255,255,255,0.5) te doen. Voor IE kun je denk ik het beste een PNG gebruiken, gebruikers van IE6 hebben gewoon pech.

Ik ben overigens bekend met het rgba statement, maar ik vraag me wel af wat het voordeel is om zowel voor de moderne browsers een rgba statement te gebruiken en voor IE een transparante PNG.

Mijn voorkeur gaat uit naar slechts 1 van deze statements en dan kies ik, omdat het ook door IE ondersteund wordt, voor de PNG. De gedachte hierachter is simpel: stel je wil in een later stadium de opacity, de achtergrond kleur of beide vervangen. Met een css waarbij zowel de PNG als het rgba statement zitten moet je op twee plekken aanpassingen maken. Naar mijn idee is het met alleen de PNG statement veel makkelijker, je kunt de PNG vervangen met de nieuwe versie en presto: het werkt op zowel IE als op alle moderne browsers.

Verwijderd schreef op woensdag 24 augustus 2011 @ 21:54:
k zet 'm in de # site {background-color: rgba (255,255,255,0.5);} maar hij wil het niet doen. Overigens, als ik daar gewoon background-color: #000 dat hij ook niets. Als ik daar opacity: 0.5; pakt ie 'm weer wel, heel vaag. Dit zou goed kunnen komen door de theme die ik gebruik, die heeft namelijk allemaal gekke functies. Ook voor de background color. Of ik heb de code verkeerd geplaatst. Ik ben er mee bezig!

Je haalt hier sowieso twee dingen door elkaar. Het statement opacity heeft an sich niets te maken met het statement background-color. Die werken onafhankelijk van elkaar, je kunt heel best een div hebben zonder achtergrondkleur maar met een opacity (of je er wat aan hebt is een tweede). Wanneer je zegt dat het rgba statement niets doet geloof ik je meteen, in combinatie met background-color gaat het ook niet werken.

Probeer eens background: rgba(255, 255, 255, 0.5);. En misschien wat overbodige informatie: de functie rgba is opgebouwd uit een combinatie van de RGB waarden en de Alpha transparancy. Dus de eerste drie parameters zijn de RGB waarden, waarmee je de kleuren kunt veranderen. Een RGB van (255, 255, 255) is trouwens wit. De laatste parameter is de alpha transparancy die loopt van 0-1 en dus eigenlijk het percentage transparancy aangeeft.

[OkkE]

Schonhose schreef op vrijdag 26 augustus 2011 @ 08:57:
Ik ben overigens bekend met het rgba statement, maar ik vraag me wel af wat het voordeel is om zowel voor de moderne browsers een rgba statement te gebruiken en voor IE een transparante PNG.

Mijn voorkeur gaat uit naar slechts 1 van deze statements en dan kies ik, omdat het ook door IE ondersteund wordt, voor de PNG. De gedachte hierachter is simpel: stel je wil in een later stadium de opacity, de achtergrond kleur of beide vervangen. Met een css waarbij zowel de PNG als het rgba statement zitten moet je op twee plekken aanpassingen maken. Naar mijn idee is het met alleen de PNG statement veel makkelijker, je kunt de PNG vervangen met de nieuwe versie en presto: het werkt op zowel IE als op alle moderne browsers.

Kwestie van smaak misschien. Ik vind het niet netjes om moderne browsers te "straffen" omdat IE geen rgba() ondersteund.

Voor mobile is het belangrijker dan voor desktop uiteraard, maar waarom een extra http-request en, in verhouding, veel meer data naar een browser sturen wanneer dat niet nodig is?

Wanneer je zegt dat het rgba statement niets doet geloof ik je meteen, in combinatie met background-color gaat het ook niet werken.

Huh? Bij mij werkt background-color: rgba(255,255,255,0.2); prima (niet in oude IE's uiteraard).

[Schonhose]

OkkE schreef op vrijdag 26 augustus 2011 @ 09:45:
[...]
Voor mobile is het belangrijker dan voor desktop uiteraard, maar waarom een extra http-request en, in verhouding, veel meer data naar een browser sturen wanneer dat niet nodig is?

Ja, ok dat zou de enige reden kunnen zijn inderdaad. Maar dan nog, een transparante PNG van een paar pixel is ook niet zo heel groot.

OkkE schreef op vrijdag 26 augustus 2011 @ 09:45:
[...]

Huh? Bij mij werkt background-color: rgba(255,255,255,0.2); prima (niet in oude IE's uiteraard).

Bij mijn weten (en dat kan zeker gelimiteerd zijn) was het statement background: rgba(255,255,255,0.2);. IIk heb het even uitgetest en het werkt inderdaad wel. Gelimiteerde kennis van mijn kant dus..


Indien bij de TS het niet werkt zijn er twee mogelijkheden: 1) de css wordt overrulled of 2) het statement is niet goed.

Gezien het feit dat 1 niet aan de orde is omdat hij wel de achtergrond een kleurtje kon geven ga ik er vanuit dat overrulling geen issue is. In combinatie met mijn (foutieve) gedachte dat rgba() alleen werkt met background: concludeerde ik dat het statement fout moest zijn.

[mcDavid]

Schonhose schreef op vrijdag 26 augustus 2011 @ 08:57:
[...]


Ik ben overigens bekend met het rgba statement, maar ik vraag me wel af wat het voordeel is om zowel voor de moderne browsers een rgba statement te gebruiken en voor IE een transparante PNG.

Mijn voorkeur gaat uit naar slechts 1 van deze statements en dan kies ik, omdat het ook door IE ondersteund wordt, voor de PNG. De gedachte hierachter is simpel: stel je wil in een later stadium de opacity, de achtergrond kleur of beide vervangen. Met een css waarbij zowel de PNG als het rgba statement zitten moet je op twee plekken aanpassingen maken. Naar mijn idee is het met alleen de PNG statement veel makkelijker, je kunt de PNG vervangen met de nieuwe versie en presto: het werkt op zowel IE als op alle moderne browsers.

Het scheelt een HTTP-request en het rendert sneller. Irronisch genoeg heeft vooral IE veel moeite met het renderen van herhalende plaatjes, maar ook andere browsers hebben het makkelijker als je gewoon een kleur opgeeft.
Meestal zet ik ze allebei onder elkaar:

Cascading Stylesheet:

background: url('achtergrond.png');
background: rgba(x,x,x,x);

In principe overruled de rgba kleur omdat die als laatste genoemd staat, maar als een browser niet met rgba om kan gaan negeert'ie die regel en komt dan toch de png tegen.
Ook doe ik vaak in plaats van een png-plaatje gewoon een RGB of HTML kleur opgeven. Dan maar niet doorzichtig. Moeten mensen hun browser maar updaten.

[ Voor 5% gewijzigd door mcDavid op 28-08-2011 18:30 ]