Überlagernde DIVs und Transparenz

[Snowman]

Hallo zusammen,

ich bin neu hier und auf der Suche nach Hilfe.

Ich steh da gerade vor einem recht speziellen Problem und weiß nichtmal, ob es da überhaupt eine Lösung gibt.
Folgende Ausgangssituation:
Ich habe ein Titelbild. (DIV A)
Darüber per CSS einen Rahmen (DIV B) gelegt, der das ganze etwas auflockert. Per CSS, damit ich das Titelbild auf einfachem Weg ändern kann.
Im unteren Bereich des Titelbildes ist das Menü mit den Menüpunkten(DIV C) angesiedelt. Davon mehrere nebeneinander.
Das sieht dann in etwa so aus:


Die Menübuttons hatten eine Hintergrundfarbe, die ich jetzt nicht mehr haben möchte, sondern lieber keinen Hintergrund, so dass das Hintergrundbild "durchscheint".
Soll dann so aussehen:


Nun liegt natürlich der Rahmen dazwischen. Weswegen das ganze jetzt so aussieht:


Im Quellcode sieht dass dann so aus:

<div id="DIV-A">
    <div id="DIV-B">
    </div>   
</div>
           
<ul id="DIV-C">
</ul>

Das Menü ist mit negativem Margin über das Titelbild gezogen.

Jemand ne Idee, wie ich das hinbekomme?
Ich könnte natürlich den Rahmen direkt in das Titelbild einfügen. Damit würde ich mir aber zusätzliche Arbeit in Form von Bildbearbeitung aufhalsen, wenn ich das Titelbild ändern will und bei jeder Menüänderung müsste ich auch den Rahmen anpassen.
Das Zweite kommt natürlich nicht oft vor, aber wenn es eine Möglichkeit gibt, dass per CSS zu lösen, wäre mir das deutlich lieber.

 

[Elroy]

Hallo.

Zeig doch mal deinen gesamten Code inklusive CSS. Wie sollen wir dir helfen können wenn du uns dein CSS vorenthälst.

Gruss
Elroy

 

[Snowman]

Die CSS ist 427 Zeilen lang. Ich denke nicht, dass ich das hier komplett posten soll, oder? Zumal da viel bei ist, was für dieses Problem belanglos ist.

Und das CSS für die zwei DIVs ist mehr als unspektakulär. Aber ok:

#DIV-A{
    width: 985px;
    height: 130px;
    background: url(../images/titlebackground_center.png)  no-repeat center;
    overflow: hidden;
    border-radius: 19px;
    margin: 0px 5px 0px 5px;
}

#DIV-B{
    width:972px;
    height: 118px;
    border: 2px solid #fff;
    margin: 4px 4px 4px 4px;
    border-radius: 16px;
}

Das Menü ist etwas komplizierter:

#menu {
    width: 900px;
    margin-top: -25px;         
    margin-left: 20px;       
    margin-right: 20px;       
    padding-bottom: 10px;
    list-style-type:none;
}

#menu li {float:left; padding:0; margin:0 1px 0 0; position:relative; width:115px; height:3em; z-index:100;}
#menu li dl {position:absolute; top:0; left:0; padding-bottom:0;}
#menu li a, #menu li a:visited {text-decoration:none;}
#menu li dd {display:none;}
#menu li a:hover {border:0;}
#menu li:hover dd, #menu li a:hover dd {display:block;}
#menu li:hover dl, #menu li a:hover dl {padding-bottom:10px;}
#menu table {border-collapse:collapse; padding:0; margin:-1px; font-size:1em;}
#menu dl {width: 115px; margin: 0; padding: 0; background: transparent;}
#menu dt {margin:0; padding: 0;}

#menu dd {margin:0; padding:0; color: #fff; font-size: 1em; text-align:left;}

#menu dt a, #menu dt a:visited {font-weight: bold; display:block; font-size: 0.9em; color: #fff; text-align:center; border:1px solid #001; border-width:0 1px 1px 1px; padding:0.25em 0 0.15em 0;}

#menu li:hover dt a, #menu a:hover dt a {font-weight: bold; color:#000; background:#ddd; border:1px solid #001; border-width:0 1px 1px 1px;}

#menu dd a, #menu dd a:visited {background:#2c5481; color:#fff; padding:0.5em 0; text-decoration:none; display:block; text-align:center; border-left:1px solid #001; border-right:1px solid #001;}

#menu dd a:hover {background: #ddd; color:#000; border-left:1px solid #001; border-right:1px solid #001;}

#menu b {display:block; overflow:hidden; height:1px;}

#menu b.p1 {background:#000; margin:0 5px;}
#menu b.p2 {border:2px solid #001; border-width:0 2px; margin:0 3px;}
#menu b.p3 {margin:0 2px; border:1px solid #001; border-width:0 1px;}
#menu b.p4 {height:2px; margin:0 1px; border:1px solid #001; border-width:0 1px;}
#menu b.p5 {background:#000; margin:0 5px;}
#menu b.p6 {background:#2c5481; margin:0 3px;}
#menu b.p7 {background:#2c5481; margin:0 2px;}
#menu b.p8 {height:2px; background:#2c5481; margin:0 1px;}

#menu li:hover b.p2, #menu a:hover b.p2 {background:#ddd;}
#menu li:hover b.p3, #menu a:hover b.p3 {background:#ddd;}
#menu li:hover b.p4, #menu a:hover b.p4 {background:#ddd;}

Habe ich hier her: http://www.cssplay.co.uk/menus/drop_definition3.html
Es geht dann vor allem um "#menu dt a", hinter dem DIV-B zu sehen ist.

Der genaue Quellcode für diese Stelle ist dann dieser hier (interessiert euch auch mein Footer?):

<div id="Header">
            <div id="DIV-A">
                <div id="DIV-B">
                </div>
            </div>   
           
            </div>

<ul id="menu">
<li>
<dl>
    <dt><b class="p1"></b><b class="p2"></b><b class="p3"></b><b class="p4"></b><a href="../pages/index.php">Willkommen</a></dt>
   
</dl>
</li>
</ul>

Ja, DIV-A und B sind wirklich leer. A ist ja nur ein Bild, B der Rahmen.