Durchsichtiges DIV-Layer mit vollfarbenem Inhalt ohne Alpha

[Defcon1]

Hi miteinander,

ich würde gerne folgendes machen und schaffe es irgendwie nicht:

Ich habe eine Webseite mit einem vollflächigen Bild als Hintergrund. Um jetzt ein Menü zu machen,
würde ich gerne eine Box erstellen, durch welche das Hintergrund-Bild durchscheint (Opacity-Eigenschaft).
Als Layer oben drauf dann das Menü (Text), welcher aber ohne Alpha-Effekt sein soll. Habe das bei
meebo.com gesehen.

Das habe ich, aber leider scheint der Hintergrund auch auf den Text und das Image durch:

  
<div id="container">  
   <div style="z-index:1; width: 320px; position:absolute; background-color:blue; filter: alpha(opacity=60); opacity: 0.6;-moz-opacity: 0.6;-khtml-opacity: 0.6;">  
      <div style="z-index:2; height: 320px"></div>  
   </div>  
   <div style="z-index:3; width:320px;"><br/><br/><br/>HELLO WORLD<img src="images/cancel.gif" /></div>  
</div>  

[ChrisB]

Hi,

würde ich gerne eine Box erstellen, durch welche das Hintergrund-Bild durchscheint (Opacity-Eigenschaft).
Als Layer oben drauf dann das Menü (Text), welcher aber ohne Alpha-Effekt sein soll.

Dass das mit opacity nicht geht, weil das sich auf ein Element samt aller seiner Inhalte auswirkt, wird hier regelmaeesig erwaehnt.

Gebe dem Element eine PNG-Grafik mit Aplhatransparenz als Hintergrundbild.

MfG ChrisB

[Defcon1]

Hi ChrisB,

ich habe mir mit Firebug die entsprechenden Passagen bei meebo.com
angeschaut. Kann im CSS keinerlei PNGs zu den class/id Einträgen finden.

Grüße,
Defcon1

Hi,

würde ich gerne eine Box erstellen, durch welche das Hintergrund-Bild durchscheint (Opacity-Eigenschaft).
Als Layer oben drauf dann das Menü (Text), welcher aber ohne Alpha-Effekt sein soll.

Dass das mit opacity nicht geht, weil das sich auf ein Element samt aller seiner Inhalte auswirkt, wird hier regelmaeesig erwaehnt.

Gebe dem Element eine PNG-Grafik mit Aplhatransparenz als Hintergrundbild.

MfG ChrisB

[ChrisB]

Hi,

bitte zitiere sinnvoll, und nicht einfach alles.

ich habe mir mit Firebug die entsprechenden Passagen bei meebo.com
angeschaut.

Wo dort auf der Seite sieht man denn den von dir beschriebenen Effekt?

MfG ChrisB

[Defcon1]

Hi,

bitte zitiere sinnvoll, und nicht einfach alles.

ich habe mir mit Firebug die entsprechenden Passagen bei meebo.com
angeschaut.

Wo dort auf der Seite sieht man denn den von dir beschriebenen Effekt?

MfG ChrisB

Nachdem man sich angemeldet hat (bei mir ICQ), erscheint dann links auf
dem Hintergrund eine Infobox, "Du bist angemeldet als....". Wenn man dann
im oberen Menu "Einstellungen->Appearance" noch ein Wallpaper einstellt,
sieht man den Durchschein-Effekt besser.

Grüße,
Defcon1

[Cheatah]

Hi,

Nachdem man sich angemeldet hat (bei mir ICQ),

nenn mal bitte Account-Daten.

Cheatah

[molily]

Hallo Defcon1,

ich glaube nicht, dass es klug war, deine ICQ-Zugangsdaten (?) hier zu posten. Ich habe dein Posting daher gelöscht. Wenn jemand mit Meebo testen will, sollte er sich irgendein IM-Konto anlegen. Eigentlich solltest du keinem Fremden deine Zugangsdaten geben...

Mathias

[Cheatah]

Hi,

ich glaube nicht, dass es klug war, deine ICQ-Zugangsdaten (?) hier zu posten.

nein, das war es tatsächlich nicht. Ich meinte ein Account, das wir zum Testen benutzen können.

Wenn jemand mit Meebo testen will, sollte er sich irgendein IM-Konto anlegen.

Wenn Du, Defcon1, möchtest, dass andere für Dich mit Meebo testen, solltest Du dafür irgendein IM-Konto anlegen.

Cheatah

[Hopsel]

Hi Alle!

Wenn Du, Defcon1, möchtest, dass andere für Dich mit Meebo testen, solltest Du dafür irgendein IM-Konto anlegen.

Oder man verwendet http://www.bugmenot.com/view/meebo.com.

User:     susyna
Password: bububu

MfG H☼psel

[Defcon1]

Wenn Du, Defcon1, möchtest, dass andere für Dich mit Meebo testen, solltest Du dafür irgendein IM-Konto anlegen.
Oder man verwendet http://www.bugmenot.com/view/meebo.com.

Keine Sorge, so dumm bin ich nicht. Es ist ein Testaccount, eben
frisch angelegt.

User: 489668514
Pass: geheim123

[Dr.Colossos]

Hi,

ich hab's mir nicht angesehen, aber kann es nicht sein, dass es absolute positioniert ist.

Setz dein Menü (absolut positioniert) dort hin wo du's haben willst, aber ohne dass es Kind/Enkel/etc. vom transparenten Element ist.

Ich meine zu glauben dass es so gehen würde, insofern absolute Positionierung eine Option für dich ist.

Viel Erfolg

[Defcon1]

Hi nochmals,

ich habe die entsprechenden Stellen gefunden und kann es im Firebug
modifiziern:

Der Hintergrund wird mit "background-color:  rgb(97, 134, 188);" gesetzt,
es handelt sich dabei nicht um ein PNG.

Grüße,
Defcon1

Hi,

würde ich gerne eine Box erstellen, durch welche das Hintergrund-Bild durchscheint (Opacity-Eigenschaft).
Als Layer oben drauf dann das Menü (Text), welcher aber ohne Alpha-Effekt sein soll.

Dass das mit opacity nicht geht, weil das sich auf ein Element samt aller seiner Inhalte auswirkt, wird hier regelmaeesig erwaehnt.

Gebe dem Element eine PNG-Grafik mit Aplhatransparenz als Hintergrundbild.

MfG ChrisB

[Defcon1]

Dass das mit opacity nicht geht, weil das sich auf ein Element samt aller seiner Inhalte auswirkt, wird hier regelmaeesig erwaehnt.

Gebe dem Element eine PNG-Grafik mit Aplhatransparenz als Hintergrundbild.

Das Problem ist gelöst, Vielen Dank an Alle!

So funktioniert es:

  
<div id="container">  
 <div style="width:320px; position:absolute; z-index:0; background-color:blue; filter: alpha(opacity=60); opacity: 0.6;-moz-opacity: 0.6;-khtml-opacity: 0.6;">  
  <div style="height: 320px"></div>  
 </div>  
 <div style="position:absolute; z-index:1; width:320px;"><br/><br/><br/>HELLO WORLD<img src="images/cancel.gif" /></div>  
</div>  

Man muß dem darüber liegenden Layer eine absolute Position geben.

Grüße,
defcon1 ;)

[Cheatah]

Hi,

Das Problem ist gelöst, Vielen Dank an Alle!

durch Schaffung neuer Probleme werden Probleme nicht gelöst, sondern nur verlagert.

So funktioniert es:

Nein.

  

> <div id="container">  
>  <div style="width:320px; position:absolute; z-index:0; background-color:blue; filter: alpha(opacity=60); opacity: 0.6;-moz-opacity: 0.6;-khtml-opacity: 0.6;">  
>   <div style="height: 320px"></div>  
>  </div>  

Dieser Teil erfüllt offenkundig keinen mit HTML kompatiblen Zweck. Eliminiere ihn.

Cheatah

[Cheatah]

Hi,

Habe das bei meebo.com gesehen.

meebo.com ist als Referenz hierfür komplett unbrauchbar. Ich habe schon ziemlich viel schlechten Code genommen, aber derjenige, der das da verbrochen hat, gehört wegen Verletzungen der Genfer Konvention belangt. Ganze *sechzehn* teilweise ineinander verschachtelte <b>-Elemente ohne jeden Inhalt, dafür mit zwölf verschiedenen Klassen, von denen jede einzelne absolut ungeeignet benamst ist. Dazu eine unverschämte Menge an <div>-Elementen, von denen erschreckend viele leer sind oder nur dazu dienen, leere <div>-Elemente zu kapseln. Nicht in HTML existente Attribute, und zur Krönung bekommt das ganze noch eine ungültige ID.

Dieser Code fällt in die Definition seelischer Grausamkeit.

Cheatah

[Defcon1]

Hi,

Habe das bei meebo.com gesehen.

meebo.com ist als Referenz hierfür komplett unbrauchbar. Ich habe schon ziemlich viel schlechten Code genommen, aber derjenige, der das da verbrochen hat, gehört wegen Verletzungen der Genfer Konvention belangt. Ganze *sechzehn* teilweise ineinander verschachtelte <b>-Elemente ohne jeden Inhalt, dafür mit zwölf verschiedenen Klassen, von denen jede einzelne absolut ungeeignet benamst ist. Dazu eine unverschämte Menge an <div>-Elementen, von denen erschreckend viele leer sind oder nur dazu dienen, leere <div>-Elemente zu kapseln. Nicht in HTML existente Attribute, und zur Krönung bekommt das ganze noch eine ungültige ID.

Dieser Code fällt in die Definition seelischer Grausamkeit.

Cheatah

Sich da durchzuwühlen macht wirklich keinen Spaß. Es sei aber angemerkt,
das es mir nur um den einen Effekt ging, was ich jetzt ja auch habe, sogar
auf 2 möglichen Wegen.

Darum ein herzliches VIELEN DANK an alle! ;)

@Cheetah: Wegen den nicht existenten Attributen ... Meebo setzt viel AJAX-
Technologie ein, da gibt´s mittlerweile viele Frameworks die eigene Attribute
eingeführt haben (z.B. DoJo) und diese durch client-seitiges Parsen des DOM-Baums
wieder auswerten. Wird wohl in Zukunft noch schlimmer werden. :)

Grüße,
Defcon1