Positionierung von <div>s

[Max-L.]

Hi,

Ich bin derzeit am Ausprobieren alte HTML und Table basierte Layouts in CSS-gestylte Layouts umzuwandeln.

Dabei gehe ich Schritt fuer Schritt vor und versuche meine alten Tabellen rueckwaerts gerichtet durch div's zu ersetzen und ueberfluessigen Code loszuwerden.

Jetzt moechte ich meinen Content bereich gerne bearbeiten und stosse auf folgendes Problem:

Es gibt eine links text und rechts nen Foto.

Ich habe zuerst eine div deklariert fuer den ganzen content bereich

<div class="Main">
  <div class="Text">blablabla</div>
  <div class="Foto"><img [...]></div>
</div>

Und in meinem Stylesheet folgendes gemacht:

div.main {width=410px}

div.Text {
 position:absolute;
 top:0px;
 left:0px;

margin-left:10px;
 margin-right:10px;
 border-left:10px solid #CCCCCC;
 padding-left:10px;

width:231px;

}

div.Foto {

position:absolute;
 top:0px;
 left:266px;

margin-right:10px;
 width:144px;

text-valign:center;

}

Allerdings erscheint jetzt der Inhalt von .Text und .Foto links oben in der Ecke, d.h. div.main wird nicht als Elternelement erkannt, an dem sich .Text und .Foto ausrichten sollen.
Wie kann man aber diese Ausrichtung erzwingen, bzw. definieren?

Ich wuerde mich ueber jede Hilfe freuen,

MfG

Max

[wahsaga]

hi,

Es gibt eine links text und rechts nen Foto.

dann nutze float dafür - absolute positionierung ist hier überflüssig, eher sogar gefährlich.

gruss,
wahsaga

[Max-L.]

Hi,

Oh.. hab meinen Fehler, danke.

Mit float klappts. Musste nur die Weiten korrigieren.

Max

[Max-L.]

Hi,

dann nutze float dafür - absolute positionierung ist hier überflüssig, eher sogar gefährlich.

Ich habe mein Problem zwar jetzt geloest, aber nun interessiert mich doch, warum es mit der Positionierung nicht geklappt hat.

Weshalb wurde das <div> Element nicht ales Elternelement erkannt?

MfG

Max

[wahsaga]

hi,

Weshalb wurde das <div> Element nicht ales Elternelement erkannt?

dein main-div _ist_ das elternelement, daran gibt es gar nicht zu rütteln.

absolute positionierung verhält sich aber immer relativ bezüglich des nächst-höheren elementes, dessen positionierung vom default-wert static abweicht. wenn kein solches vorhanden ist (wie in deinem beispiel), dann bezieht sie sich auf den viewport.

gruss,
wahsaga

[chlori]

Hallo

<div class="Foto"><img [...]></div>

Warum nicht <img class="Foto" [...]> ? Für was das div?

Auch beim Text könntest du die Divs weglassen und durch <p> ersetzen, also etwa so

.Main p {
  blah
  }

div.main {width=410px}

div.main {width:410px;}

• kein "=", sondern ":"
• ";" ist optional

Gruss
chlori