DIV Hintergrund transparent

[Karsten1982]

Hallo zusammen...

Werd einfach net daraus schlau...

habe folgenden html-teil:

<div id="center">
    <div id="navi_left">blaaa</div>
    <div id="content">blaaa</div>
</div>

CSS:

#center {
 width: 800px;
 background-attachment: fixed;
 background-image: url(images/center.gif);
 background-repeat: repeat-x;
 text-align: center;
}

#navi_left {
        background-color: transparent;
 width: 150px;
 height: 350px;
 color: #000000;
 font-size: 12pt;
 font-family: sans-serif;
 text-align: left;
 float: left;
}

#content {
        background-color: transparent;
 width: 620px;
 min-height: 350px;
 color: #000000;
 font-size: 12pt;
 font-family: sans-serif;
 text-align: left;
 float: left;
}

...

Da is aber nix transparent, sodass man die hintergrundgrafik des "center" net sieht... Was mach ich falsch???

Grüße Karsten

[Detlef G.]

Hallo Karsten

Da is aber nix transparent, sodass man die hintergrundgrafik des "center" net sieht... Was mach ich falsch???

Du nimmst den gesamten Inhalt von #center mittels float aus dem Elementfluss. Dadurch hat #center keine Höhe und zeigt dir auch das Hintergrundbild nicht.

Gib #center mal einen Rahmen, dann siehst du es.

Du musst etweder das Float innerhalb von #center aber nach #navi_left und #content wieder aufheben.
Dazu empfielt sich auch die Lektüre von Mehrspaltige CSS-basierte Layouts.

Eine andere Möglichkeit besteht in Block Formatting Contexts (hasLayout für den IE) für #center.

Auf Wiederlesen
Detlef