filter: Alpha (opacity = 10); Vererbung stoppen

[kaffee-bohne]

Hallo.

Ich bin in CSS ansich recht neu. Versuche mich gerade in einem tabellenfreiem Layout. Bisher hat alles gut geklappt stehe aber nun vor einem Probelm und finde keine Antwort im Netz...

Also ich habe eine Grafik im Hintergrund. Auf Ihr liegen nun weitere div's wenn man das mal so ausdrücken darf.

So habe ich es in der HTMl aufgebaut.

<div id="container">

<div id="main">
<div id="logo"></div>

<div id="spalte_1">
<div id="rightblocks1"> <!--[blockposition name=right]--> </div>
<div id="rightblocks2" ><img src="../images/logo.gif" alt="" height="65" width="105" border="0" /></div>
<div id="rightblocks3" align="center">Home  Impressum  Kontakt  Jobs  Login<!--[blockposition name=meta]--></div>
<!-- spalte_1 DIV ends--></div>

<div id="content"> <!--[$maincontent]--></div>
<div id="spalte_2">

<div id="anzeige"> <!--[blockposition name=anzeige]--></div>
<div id="anzeige2"> <!--[blockposition name=anzeige2]--></div>
<div id="leftblocks"> <!--[blockposition name=left]--></div>
<!-- spalte_2 DIV ends--></div>

<!-- main DIV ends--></div>

<!-- container DIV ends --></div>

------------------------------------------------------
und das ist meine CSS

#container {
background: url(../images/start.jpg) no-repeat;
}

#main {
width: 995px;
height: auto;
}

#content {
width: 795px;
height: 511px;
}

#spalte_1{
float: right;
width: 200px;
background-color: #bbbd6b;
border-left-width: #97991c 1px;
filter: Alpha (opacity = 10);
 }

#rightblocks1{
clear: both;
width: 200px;
height: 385px;
font-size: 12px;
background: url(../images/slogan.gif) no-repeat right;

}

#rightblocks2{
width: 151px;
height: 91px;
font-size: 12px;
padding-left: 49px;
padding-top: 36px;
background-color: #fff;

}

#rightblocks3{
width: 200px;
height: 7px;
color: #2b2b2b;
font-size: 9px;
padding-top: 80px;
background-color: #fff;
}

#spalte_2{
float:left;
width: 795px;
height: 87px;
position: relative;
background-color:#fff;
filter: Alpha(opacity = 70);
padding-top: 10px;

}

#leftblocks{
width: 149px;
height: 50px;
font-size: 12px;
background-color:#999;
}

#anzeige{
float: right;
width: 466px;
height: 50px;
font-size: 12px;
background-color:#999;
}

#anzeige2{
float: right;
width: 149px;
height: 50px;
font-size: 12px;
background-color:#999;
margin-right: 15px;

}
------------------------------------------------------

Das problem liegt bei #spalte_1

Der filter : Alpha klappt hier genau so wie es soll, nur leider vererbt er sich auf rightblock1 2 & 3 und genau das soll er nicht machen.
Wie kann ich das unterbinden, wo ist mein Fehler?

Greetz
kaffee-bohne

[wahsaga]

hi,

Das problem liegt bei #spalte_1

Der filter : Alpha klappt hier genau so wie es soll, nur leider vererbt er sich auf rightblock1 2 & 3 und genau das soll er nicht machen.

Nein, Vererbung in dem Sinne, wie der Begriff in CSS gebraucht wird, ist keine im Spiel.

opacity und der alpha-filter wirken sich auf den _kompletten Inhalt_ eines Elementes aus.

Wie kann ich das unterbinden

Gar nicht, s.o.
Du kannst höchstens andere Wege gehen, Workarounds versuchen.
Bspw. zwei Elemente übereinander platzieren, und dann nur dem unteren Transparenz verpassen.

gruß,
wahsaga

[kaffee-bohne]

Du kannst höchstens andere Wege gehen, Workarounds versuchen.
Bspw. zwei Elemente übereinander platzieren, und dann nur dem unteren Transparenz verpassen.

OK ich bin nun mal nen Newbie... was meinst du denn für andere Wege?
Ich habe ausprobiert ob ich die rightblock auf position:relative setze und den nen z-index von 10 zu weise. Dann liegen die doch darüber, oder nicht. Aber es gibt keine Veränderrung....

[wahsaga]

hi,

OK ich bin nun mal nen Newbie... was meinst du denn für andere Wege?
Ich habe ausprobiert ob ich die rightblock auf position:relative setze und den nen z-index von 10 zu weise. Dann liegen die doch darüber, oder nicht. Aber es gibt keine Veränderrung....

Wenn die Elemente immer noch im HTML ineinander verschachtelt sind, und du dem äusseren Transparenz zuweist - nein, dann ändert sich natürlich nichts daran.
Du musst schon das Element, welches nicht transparent werden soll, aus dem, welchem du die Transparenz verpasst, herausnehmen.

gruß,
wahsaga

[kaffee-bohne]

Hi

Wenn ich die spalte1 sofort wieder schließe, wie ist es mir denn dann möglich, dass spalte 1 und rightblocks1 genau über einander liegen und rightblock 2 & 3 dann darunter???

[wahsaga]

hi,

Wenn ich die spalte1 sofort wieder schließe, wie ist es mir denn dann möglich, dass spalte 1 und rightblocks1 genau über einander liegen und rightblock 2 & 3 dann darunter???

Wenn du feste Höhen verwendest, dann kannst du das nachfolgende Element bspw. mit einem negativen margin-top nach oben "ziehen".
Nachfolgende Elemente bleiben dann ganz normal im Fluss.

Weiss nicht, ob das auf dein Vorhaben passt - dazu hast du zu wenig beschrieben, was du eigentlich erreichen willst.

gruß,
wahsaga