Problem mit position relative

Not logged inCSS-Forum

Forum

CSS-Online

Help

Search

Login

CSS-Shop

Impressum

Datenschutz

Topic Hauptforen / CSS-Forum / Problem mit position relative - klappt nicht

By ChiLLinG Date 2011-02-04 11:14

Hi All,

ich bin noch relativ neu was css angeht aber nach nun 2 Tagen verzweifeln hoffe ich auf Eure Hilfe.

Folgendes:

In meiner HTML Datei habe ich folgenden Code:

Code:


div id="bgd"
div id="pageHeader"
div id="oben_links"
/div
/div
/div

Und die CSS Datei sieht so aus:

Code:


body {
  margin:0px;
  padding:0px;
  font-family:Arial, Helvetica, sans-serif;
  font-size:12px;
  color:#191919;
  font-weight:normal;
  background-color: #333333;

  }

#bgd {
  margin:0px auto;
  padding:0px;
  width:1024x;
  min-height:767px;
  text-align:left;
  overflow:hidden;
  background-color: #333333;
  background-image: url(bgd.jpg);
  background-repeat: no-repeat;
  background-position: center top;
  }
  
#pageHeader {
  width:1024px;
  height:172px;
  margin:0px;
  padding:0px;
  float:left;
  position:relative;
}

#oben_links {
  padding: 0px;
  margin: 0px 0px 0px 50px;
  float:left;
  position:relative;

  background:#ffffff;
  border: 1px solid #ffffff;
  width:154px;
  height:56px;
  opacity:0.8;
  filter:alpha(opacity=80);
  -moz-opacity:0.8;
}

Die #bgd erzeugt ein zentriertes Hintergrundbild. Die #obenlinks soll eine halbtransparente weiße Box erzeugen die vom linken Rand des zentrierten Bildes 50px entfernt ist. Aus mir nicht erklärlichen Gründen ist die halbtransparente weiße Box aber am ganz linken Bildschirmrand, bzw. 50px davon entfernt. Wie krieg ich das hin, dass sich die halbtransparente weiße Box an dem zentrierten Bild ausrichtet (relativ zu dem zentriertem Bild) und nicht am relativ zum linken Bildschirmrand?

Vielen Dank für den einen oder anderen Tip!!!

cheers

Topic Hauptforen / CSS-Forum / Problem mit position relative - klappt nicht