[CSS] transparantie zetten op background-color van div

[Woudloper]

Ik heb nog niet eerder echt met transparantie zitten spelen, maar nu dan toch.

Op deze pagina heb ik een voorbeeld neergezet waar ik nu mee bezig ben.

Wat ik nu wil is dat de div #topnav wel de kleur oranje krijgt als achtergrond, maar dat deze dan staat in bijvoorbeeld 70% transparancy zodat je gedeeltelijk de afbeelding op de achtergrond erdoorheen kan zien.

Nu heb ik zelf bijvoorbeeld het volgende gedaan:

Cascading Stylesheet:

#topnav {
 border-top     : 1px solid #ddd;
 background     : #EB9500;
 padding        : 3px 20px 3px 30px;
 filter         : alpha(opacity=70);
 -moz-opacity   : 0.7;
}

Zelf dacht ik dat ik er hiermee moest wezen, maar om de één of andere reden blijft hij gewoon 0% transparantie toepassen en toont de kleur: #EB9500 hard als achtergrondkleur van de div. Ook heb ik alleen de transparantie filters gezet op de a elementen en de background van de #topnav laten staan, maar helaas dat had ook niet het gewenste effect.

Weet iemand van jullie hoe ik dit wel met behulp van div (en geen tabellen) kan oplossen?

[ Voor 4% gewijzigd door Woudloper op 18-09-2005 22:57 ]

[André]

Als je er een position:absolute in zet werkt het prima. Dus zet om de knoppen een container-element met position:relative (zodat alles wel goed gepositioneerd blijft ) en het werkt.

[BetuweKees]

moet je voor moz trouwens niet gewoon de css3 property voor transperancy gebruiken? ik meen me te herinneren laatst gelezen te hebben dat die -moz- elementen vanaf 1.5 niet meer ondersteund worden en css3 gebruikt dient te worden..

Cascading Stylesheet:

opacity: 0.7;

zou dan dus de juist code zijn.. zie ook http://www.w3.org/TR/css3-color/#transparency

[crisp]

BetuweKees schreef op 08 October 2003 @ 15:03:
moet je voor moz trouwens niet gewoon de css3 property voor transperancy gebruiken? ik meen me te herinneren laatst gelezen te hebben dat die -moz- elementen vanaf 1.5 niet meer ondersteund worden en css3 gebruikt dient te worden..

Cascading Stylesheet:

opacity: 0.7;

zou dan dus de juist code zijn.. zie ook http://www.w3.org/TR/css3-color/#transparency

voor backwards-compatibility zou ik het dan beide doen, niet iedereen heeft al Moz 1.5, en Moz 1.5 zou de -moz- elementen gewoon moeten negeren dan

[Woudloper]

Andre :: Ik heb getracht het één en ander aan te passen en zie hier het resultaat.

Deze lijkt in zijn geheel niet meer op de versie zoals in de startpost staat vermeld. Als je het mij vraagt komt dit doordat er nu een relative container omheen zit. Daarbij is het zo dat ik zelfs met de door jouw genoemde oplossing de afbeelding niet door de tranparancy heenzie, zelfs niet als ik deze vergroot/verklein.

Misschien nog andere tips, want het kost mij al een tijdje hoofdbrekers...

[ Voor 3% gewijzigd door Woudloper op 18-09-2005 22:58 ]

[BtM909]

Woudloper schreef op 08 October 2003 @ 15:45:
Andre :: Ik heb getracht het één en ander aan te passen en zie hier het resultaat.

Misschien nog andere tips, want het kost mij al een tijdje hoofdbrekers...

Heb je toevallig een zipje met alles erin? Handmatig downloaden, lijkt ervoor te zorgen dat ik nog wat dingen mis.
_{ik weet alleen niet of het aan mij ligt}

[Woudloper]

BtM909 schreef op 08 October 2003 @ 15:57:
Heb je toevallig een zipje met alles erin? Handmatig downloaden, lijkt ervoor te zorgen dat ik nog wat dingen mis.

here you are. Dit is dus het zipje met alle twee de versies erin, de originele en de bijgewerkte met de suggesties van Andre...

[ Voor 4% gewijzigd door Woudloper op 18-09-2005 22:58 ]

[André]

Maar bij mij staan de knoppen onder het plaatje? Wat wil je nu precies dan, dat de achtergrond van de knoppen iets van het plaatje erachter door laten schijnen? Dan zullen de knoppen eerst op het plaatje moeten staan.

[BtM909]

André schreef op 08 October 2003 @ 16:14:
Maar bij mij staan de knoppen onder het plaatje? Wat wil je nu precies dan, dat de achtergrond van de knoppen iets van het plaatje erachter door laten schijnen? Dan zullen de knoppen eerst op het plaatje moeten staan.

Volgens mij staan de knoppen wel op het plaatje. Voeg maar een paar <br />'s toe achter de <h1>.

Woudloper: Als ik een nieuwe div toevoeg, dan werkt het wel gewoon Ik ga ff kijken wat voor speciale dingen jij doet met die span('s) erna

[Woudloper]

Klopt de knoppen staan gewoon op het plaatje, zie deze versie maar, daar heb ik de background van de #topnav even op transparent; gezet en dan zie je het plaatje wel gewoon...

[ Voor 7% gewijzigd door Woudloper op 18-09-2005 22:58 ]

[BtM909]

Woudloper schreef op 08 oktober 2003 @ 16:37:
Klopt de knoppen staan gewoon op het plaatje, zie deze versie maar, daar heb ik de background van de #topnav even op transparent; gezet en dan zie je het plaatje wel gewoon...

Maar dat wil je toch Transparantie op de knoppen?

[Woudloper]

Gedeeltelijk, ik wil dat er over het plaatje deels zichtbaar is met een oranje laagje eroverheen. Als je dan over de knop heen gaat is de gehele transparantie weg (hover)... Ik heb het gevoel dat ik niet helemaal goed uitleg wat ik wil bereiken... Maar ehm, snap je wat ik bedoel

[André]

Nu snap ik je, ik ga even klooien.

[Verwijderd]

Ik zal wel ruzie met de W3C krijgen, maar goed (in MSIE5/6 werkt het): http://home.wanadoo.nl/~sm56pci/got/819206/opacity3.html

[ Voor 10% gewijzigd door Verwijderd op 08-10-2003 17:06 ]

[André]

HTML:

<html>
  <head>
    <title>
      Test
    </title>
    <style>
      #header {
        background: url('gfx/bckgrnd.jpg') no-repeat #EB9500;
        height: 170px;
      }
      
      #topnav {
        border-top: 1px solid #ddd;
        height: 20px;
      }

      #topnav a {
        position: absolute;
        background: #EB9500;
        color: #111;
        filter: alpha(opacity=70);
        -moz-opacity: 0.7;
        border-right: 1px solid #ddd;
        padding: 3px 8px;
      }

      #topnav a:hover {
        position: absolute;
        filter: alpha(opacity=100);
        -moz-opacity: 1;
        color: #eee;
        background: #444;
        border-right: 1px solid #ddd;
      }

      .container {
        position: relative;
        width: 118px;
        display: inline;
      }

    </style>
  </head>
  <body>

    <div id="header">
      <div id="topnav">
        <div class="container"><a href="#">Menuoptie 1</a></div>
        <div class="container"><a href="#">Menuoptie 2</a></div>
        <div class="container"><a href="#">Menuoptie 3</a></div>
        <div class="container"><a href="#">Menuoptie 4</a></div>
      </div>
    </div>

  </body>
</html>

Zo werkt het, nu moet je dit even inpassen in je eigen code.

[ Voor 16% gewijzigd door André op 08-10-2003 17:41 ]

[Woudloper]

André :: bedankt voor de suggestie, dat heeft mij al een groot stuk op weg geholpen, zie hier het resultaat.

Nu nog één vraag, weet jij (of iemand anders) hoe ik ervoor kan zorgen dat de ruimte rechts van de 4 menuopties helemaal tot rechts kan worden uitgevuld (net zoals ik het voorbeeld in de startpost) met dezelfde transparantie oranje kleur zoals de menuopties nu hebben?

[ Voor 4% gewijzigd door Woudloper op 18-09-2005 22:59 ]

[Woudloper]

Toevoeging op bovenstaande :: Ik heb nog even zitten spelen. De width van de uitvul div heb ik nu 100% width gemaakt, maar doordat de div absolute is wordt de browserbreedte als width meegenomen en niet de overgebleven ruimte in de #header div. Is dit gewoon niet op te lossen met CSS en moet ik de breedte gaan bepalen met behulp van javascript Nee toch??

edit:
K.., verkeerde knopje.. Het had edit moeten zijn en niet quote, dus hem er maar ff een folowup van gemaakt.... Gewoonte waarschijnlijk. Reageer meer dan dat ik met mijn eigen topics bezig ben...

[ Voor 53% gewijzigd door Woudloper op 08-10-2003 23:42 ]

[paragon]

Woudloper schreef op 08 oktober 2003 @ 21:26:
André :: bedankt voor de suggestie, dat heeft mij al een groot stuk op weg geholpen, zie hier het resultaat.

Nu nog één vraag, weet jij (of iemand anders) hoe ik ervoor kan zorgen dat de ruimte rechts van de 4 menuopties helemaal tot rechts kan worden uitgevuld (net zoals ik het voorbeeld in de startpost) met dezelfde transparantie oranje kleur zoals de menuopties nu hebben?

Ik zie hier in mozilla helemaal geen transparantie, gebruik nog wel 1.4

[Woudloper]

paragon :: vreemd, want ik heb nu toch de opocity volgens Mozilla goed gezet dacht ik. Ik kan het nu niet testen met Mozilla, dus kan het zelf ook niet zien.

Verder heb ik hieronder een voorbeeld van hoe ik het uiteindelijke resultaat graag zou willen hebben:



Dit om verwarringen zoals hierboven (door BtM909 en André) te voorkomen. Mijn vraag van hierboven staat helaas nog steeds en kan daar maar geen geschikte oplossing voor vinden...

[ Voor 5% gewijzigd door Woudloper op 18-09-2005 22:59 ]

[flashin]

Wil je per se met opacity werken? als je gewoon het plaatje wat je al gebruikt ff bewerkt, gaat het toch een stuk makkelijker? of heb je een random header met meer dan 500 plaatjes? :x

Of heb ik het topic niet goed gelezen..

[Woudloper]

flashin :: Dat was niet de bedoeling aangezien (zoals jij al zegt) ik wil kunnen werken met variabele afbeeldingen/plaatjes.

Verder is het zo dat de pagina header, content en footer een vaste margin hebben aan de linkerkant/rechterkant. Met andere woorden de pagina is schaalbaar voor verschillende resoluties (met als kleinste 800 x 600).

[BtM909]

Moz 1.4 geeft:

[Woudloper]

BtM909: Dat probleem heb ik inmiddels gevonden, maar nog niet opgelost. Zoals je in het voorbeeld hierboven kan zien wil ik namelijk een div/cell naast het laatste menu-item zetten en dat deze de overige ruimte tot aan het eind van de #header opvult. Hiervoor heb ik de properties van de menu-links gekopieerd, maar ben ik de container div vergeten te plaatsen. Als het goed is, is dat de oorzaak van het probleem in Mozilla....

[Woudloper]

Laaste Reatie:

Nog even zitten spelen met mijn vraagstuk en ja het probleem zat zoals ik hierboven beschreef in het niet gebruiken van een container voor de uitvuldiv. Ik heb daar nu een eigen relative container div voor gemaakt en zie hier het resultaat.

Waar ik even niet bij nagedacht had, was dat de afbeeldingen welke ik gebruik een standaard breedte hebben van 760px. Dit kan ik dus gebruiken om de breedte te bepalen van de laatste div. Wel moet ik dit nu elke keer waneer er een menu-item bijkomt aanpassen, maar dat zal niet heel erg vaak gebeuren en is meer een eenmalige actie. Dank jullie voor de hulp...

[ Voor 3% gewijzigd door Woudloper op 18-09-2005 23:00 ]

[paragon]

haha grappig ik was eigenlijk ook met zoiets bezig. Alleen nog in Moz getest btw.

[ Voor 4% gewijzigd door paragon op 10-10-2003 15:58 ]

[Woudloper]

Toch nog even een vervolg op mijn eerdere posting (waarin ik schreef dat het mijn laatste reactie was).

Ik ben nog even verder aan het testen geweest en moet zeggen dat het er onder IE6 nu uit ziet zoals het eruit moet zien, echter blijf ik onder Mozilla (versie 1.4.) een klein probleem houden.

Het probleem is dat:

1. de border-right's niet de gehele hoogte (v.d. div #topnav) hebben;
2. Bij de :hover (muis over link) wordt de:
   • border-right korter(ofwel hoogte van de A-tag veranderd)
   • is de background niet de volledige hoogte van de div #topnav

Binnen IE heb ik deze problemen helemaal niet. Weet iemand wat dit probleem is!? Zelf dacht ik dat het met de hoogte van de A tag te maken had, maar na aanpassing in de CSS geeft het niet het gewenste resultaat.

[ Voor 7% gewijzigd door Woudloper op 18-09-2005 23:00 ]

[André]

En heb je firebird al geprobeerd? Daar ziet het er ook zo uit. De rechter 'blaat' kolom staat te laag, en de knoppen zijn niet hoog genoeg. Misschien moet je het boxmodel veranderen?

[slm]

In moz zie ik de opacity niet volledig herstellen na een mouseover. Waarschijnlijk komt dit omdat moz de opacity relatief stelt aan de opacity van de container. Dit is op te lossen door de opacity van de hover op 1.5 of 2 te zetten.

border-rights/background: in hover actie de height:21px zetten lost probleem a en b op in moz.

(NB: vind het overigens niet echt mooi die opacity knopjes maar ja dat is mijn persoonlijke mening^^)

[Woudloper]

André::
En heb je firebird al geprobeerd? Daar ziet het er ook zo uit. De rechter 'blaat' kolom staat te laag,

Klopt, dat was het meest grote probleem wat ik had. Ik kan maar niet een manier vinden op het werkend te krijgen. De suggesties die slm doet heb ik inmiddels ook doorgevoerd (lokaal), maar dat mag niet baten. Om de één of andere reden blijft het probleem bestaan...

en de knoppen zijn niet hoog genoeg. Misschien moet je het boxmodel veranderen?

Ik dacht dat ik al de box-model fix had toegevoegd in de CSS code, maar dat mocht niet baten. Maar ehm, hoe bedoel jij dat ik misschien het boxmodel moet veranderen??? De rechterkolom is nog wel te fixen en dat is denk ik niet het moeilijkste. Desnoods voeg ik even de box-model hack toe...

Cascading Stylesheet:

* {
  box-sizing      : border-box;
  -moz-box-sizing : border-box;
}    

[ Voor 30% gewijzigd door Woudloper op 13-10-2003 16:17 . Reden: kleine toevoeging... ]

[Woudloper]

Na contact te hebben gehad met André ben ik tot een oplossing voor het probleem gekomen. Eigenlijk is het na goed lezen ook door slm gekomen aangezien hij de suggestie had gedaan om de -moz-opacity op 2 te zetten. André had namelijk de suggestie gedaan om de -moz-opacity in zijn geheel te verwijderen, want dan trad het probleem (hierboven vermeldt onder a/b) onder Firebird niet meer op. Ik heb de -moz-opacity op 2 gezet en dat had hetzelfde resultaat.

Verder had ik nog problemen met het feit dat de :hover ervoor zorgde dat hoogte van de menu-button kleiner werd.

klik voor vergroting

Dit is opgelost door een paar css eigenschappen te verwijderen, maar bovenal door de padding van de #topnav a aan te passen.

[ Voor 6% gewijzigd door Woudloper op 18-09-2005 23:01 ]

[André]

Dan kun je zien hoe verschrikkelijk verschillend browsers bepaalde elementen renderen. En dan moet zo'n vage oplossing alles verhelpen. Maar goed, het werkt wel nu.