CSS Transparenz Problem

Johanni

Mitglied
Gute Tag,
Ich habe folgendes Problem. Ich moechte einen div container leicht transparent machen, der Inhalt soll jedoch nicht transparent sein. Eigentlich habe ich es schon fast geschafft, allerdings wollen beide container nicht uebereinander liegen. Der footertext sitzt dort wo er sein soll (zentriert) aber der footer (der transparente Kasten) ist linksbuendig.
Im head habe ich folgendes deklariert:

Code:
<style type="text/css">
div.footer
  {
  width:900px;
  height:30px;
  background-color:#000000;
  /* for IE */
  filter:alpha(opacity=60);
  /* CSS3 standard */
  opacity:0.6;
  position: absolute;
  margin:auto;
  }
div.footertext
  {
  width:900px;
  height:30px;
  position:relative;
  }
</style>

der bodie sieht wie folgt aus

Code:
<body>
<div align=center valign=top>
<div class="footer">
</div>
<div class="footertext">
<table width="900" height="30" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
     <td width="900" align="left" valign="middle">
     <font class="footer">Dies soll der Footer sein und der Text in ihm</font>    
     </td>
    </tr>
   </table> 
</div>
</div>
</body>

wie man sieht moechte ich bei den divs vermeiden mit margins zu arbeiten da ich ja im body alles als centered deklariert habe.

Hat jemand eine Idee?

Vielen Dank
Gruss
 
Habe es auch mit der Z-Achse probiert falls dieser Denkanstoss hilft aber ich komme nicht dahinter... Wenn ich die divs im Body nicht sofort schliesse und sie "umklammer" dann ist der Text auch transparent aber der Balken ist am richtigen Fleck...
Bitte?Irgendwer?
 
Also das Position absolut lässt es nach links schieben, ...
schau mal, probier das, müsste eigentlich gehn, ... einfach untereinander und dann relativ zur Position nach oben verschieben:

HTML:
div.footer
  {
  width:900px;
  height:30px;
  background-color:#000000;
  /* for IE */
  filter:alpha(opacity=60);
  /* CSS3 standard */
  opacity:0.6;
  margin:auto;
}

div.footertext
  {
  width:900px;
  height:30px;
  position:relative;
  top: -30px;
  margin: auto;
}
 
Zurück