Schatten um meinen Container

[Jhonny]

Hallo Leute,

ich habe ein Problem mit einem Schatteneffekt meines Containers.

Ich wollte folgendes machen:

• Alle divs des Layouts (Navigation;Main) sollen im Container    zusammengefasst werden.
• Um den Container soll ein Schatteneffekt erzeugt werden, aber ohne Grafiken, da ich die Ecken mit den CSS 3.0 Befehlen für Firefox abgerundet habe. (Die HP muss auch nur in FF funktionieren)
• Ich dachte mir, das ich diesen Schatteneffekt mit verschachtelten divs erzeugen kann. Also einen div vor dem Container den man dann so verschiebt das er einen Schatteneffekt erzeugt.

Problem:

Ich kann den div, der den Schatten erzeugen soll nicht verschieben ohne den container mit zu verschieben. So kann ich also keinen Schatteneffekt erzeugen.

Frage:

Wie kann ich den Schatten-div verschieben, während der Container seine Feste Position bebehält. Auch die Größe des Schatten-divs sollte veränderbar sein ohne die größe des containers zu beeinflussen.

Code CSS:

  
.schatten {  
  
position: relative;  
height: 400px;  
width: 95%;  
background-color: #999999;  
border: 1px solid #FFFFFF;  
-moz-border-radius-topleft: 30px;  
-moz-border-radius-topright: 30px;  
-moz-border-radius-bottomleft: 30px;  
-moz-border-radius-bottomright: 30px;  
  
}  
  
#content {  
  
height: 500px;  
width: 90%;  
margin-top: 5%;  
margin-left: 7%;  
position: relative;  
  
}  
  
#navi {  
  
background-color: #666666;  
width: 15%;  
height: 99%;  
float: left;  
padding-bottom: 10px;  
-moz-border-radius-topleft: 30px;  
-moz-border-radius-bottomleft: 30px;  
  
}  
  
#main {  
  
background-color: #FFFFFF;  
font-family: Verdana, Arial, Helvetica, sans-serif;  
width: 80%;  
height: 99%;  
float: left;  
padding: 5px;  
-moz-border-radius-topright: 30px;  
-moz-border-radius-bottomright: 30px;  
  
}  

Code XHTML:

  
<div class="schatten">  
  <div id="content">  
   <div id="navi">  
    <p>  
     <ul>  
      <br />  
      <li><span class="aktiv"><b>Home</b></span></li>  
      <li><a href="#"><b>test</b></a></li>  
      <li><a href="#"><b>test</b></a></li>  
      <li><a href="#"><b>test</b></a></li>  
      <li><a href="#"><b>test</b></a></li>  
     </ul>  
    </p>  
   </div>  
   <div id="main">  
    <h1>Test<br />Test</h1>  
    <br />  
    <br />  
   </div>  
  </div>  
 </div>  
 <div id="fuss">  
   <br />  
   <p><b>&copy; Jhonny</b></p>  
  </div>  

Ich hoffe mal ihr könnt mir helfen ...

Danke schon im vorraus  !!!

MFG

Jhonny

[Beat]

• Um den Container soll ein Schatteneffekt erzeugt werden, aber ohne Grafiken, da ich die Ecken mit den CSS 3.0 Befehlen für Firefox abgerundet habe. (Die HP muss auch nur in FF funktionieren)

Dann sei doch konsequent und nimm -moz-box-shadow

mfg Beat