CSS Pain - Position absolute

carnz · 14 Juni 2007

[FONT=verdana, arial, helvetica]Tach auch,

schaut euch das hier mal an:
nifty

Was ich versuche:
Das grüne div ist immer größer als die anderen beiden.
Das blaue soll unter dem roten so das der Pfeil über steht.
Ich hätte jetzt gerne, dass das blaue div 1oo% hat und so breit wie das grüne ist, aber leider passiert das was im zweiten Beispiel zu sehen ist.

Kann mir da einer helfen?

Thx.[/FONT]

pmmueller · 14 Juni 2007

1. position:absolute
Wenn du eine Box absolut positionierst, wird sie aus dem Fluss der Elemente herausgehoben. Einfach ausgedrückt: die blaue Box sieht die grüne nicht, und deswegen wird sie so breit wie es geht.

position:absolute bezieht sich auf das nächste positionierte umgebende Element, und wenn wie bei dir keins positioniert ist, dann halt auf <html> (weswegen sie bis zum Ende des Browserfenster reicht).

Um die blaue Box so breit wie die grüne zu machen, muss du die grüne positionieren. Das geht am besten mit position:relative (siehe CSS für #outer weiter unten).

2. float
Was willst du mit dem float erreichen? Lass es einfach weg. Und wenn float, dann immer mit Angabe von width. Sonst kann alles mögliche passieren.

Hier ein Vorschlag:
-HTML

Code:

 <div class="outer">
      <div class="over">nifty item</div>
      <div class="under">nifty item →</div>
 </div>

- CSS

Code:

.outer {
  position: relative; /* der Trick */
  width: 200px;
  height: 200px; 
  border: 1px solid green; 
  margin: 100px 0px 0px 100px; 
}
.over {
  position: absolute;
  top:0;      
  height: 30px;
  border: 1px solid red;
}
.under {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; 
  height: 30px;
  border: 1px solid blue;
 }

Mit ein bisschen Finetuning sollte es so klappen ;)

Peter

carnz · 27 Juni 2007

besser spät als nie =)

Es hat funktioniert. Danke!

CSS Pain - Position absolute

carnz

Neues Mitglied

pmmueller

Neues Mitglied

carnz

Neues Mitglied

Neueste Beiträge