Positionierung dynamisch

Computer: Software & Programmierung HTML & CSS
#1

Lieber Experte, in einemBereich kennst Du Dich besser aus wie ich,
css.
:wink:
Also ich kenne mich mit mysql und php aus. Mit css hapert es, leider.
Ich habe eine Tabelle und eine Div.Box.
Die Tabelle kommt aus der Db und ist demnach dynamisch in der Zeilenanzahl.
Nun möchte ich die Box unter der tabelle mit einem Abstand von 200 px positionieren.

Der Versuch:

 
 
 
 
 
  table.tabelle
  {
  border: 5px solid red;
  position:absolute;
  top:100px;
  left:120px;
  color:green;
  padding:10px;
  }
  td.zelle
  {
  padding:5px;
  border:1px solid blue;
  }
 
 div.hauptbody
 {
 border:1px solid green;
 width:400px;
 height:auto;
  }  
  div.divbox
  {
  margin:12px;
  border:5px dotted blue;
  width:200px;
  height:auto;
  position:relative;
  top:250px ;
  left:100px;
  }
 
 
 
 

 
 
    Hallo Welt
    Hallo Welt
    Hallo Welt
    Hallo Welt
    Hallo Welt
    Hallo Welt
    Hallo Welt
   
    Hallo Welt
    Hallo Welt
    Hallo Welt
    Hallo Welt
    Hallo Welt
    Hallo Welt
    Hallo Welt
 
 
    Hallo Welt
    Hallo Welt
    Hallo Welt
    Hallo Welt
    Hallo Welt
    Hallo Welt
    Hallo Welt
 
 
    Hallo Welt
    Hallo Welt
    Hallo Welt
    Hallo Welt
    Hallo Welt
    Hallo Welt
    Hallo Welt
 
  
    Hallo Welt
    Hallo Welt
    Hallo Welt
    Hallo Welt
    Hallo Welt
    Hallo Welt
    Hallo Welt
 
 
 

 
  Hallo Welt

  Hallo Welt

  Hallo Welt

  Hallo Welt

 
 

 

Die Tabellenpostion ist fest. Nun habe ich gelsen, dass relative die Position beschreibt, relativ zur „normalen“ Position im Dokument.
Also müsste doch ein position:relaitive; top:200px; mir genau das gewünschte bringen.
Normal wäre die Box unter der Tabelle, bündig. Relative um 200px versetzt. Aber das ist ein Satz mit x. Any Idea? Danke im vorraus für Hinweise.
Oiver

#2
  1. Versuch:

 
 
 
  fff
 
    div.table
  {
  border: 2px solid black;
  position:absolute;
  top:100px;
  left:120px;
  color:green;
  padding:10px;
  }
  table.tabelle
  {
  border: 5px solid red;
  position:absolute;
  top:100px;
  left:120px;
  color:green;
  padding:10px;
   margin:100px;
  }
  td.zelle
  {
  padding:5px;
  border:1px solid blue;
  }
 
 div.hauptbody
 {
 border:1px solid green;
 width:400px;
 height:auto;
  }  
  div.divbox
  {   
  margin:100px;
  margin:12px;
  border:5px dotted blue;
  width:200px;
  }
 
 
 
 
  
 
 
    Hallo Welt
    Hallo Welt
    Hallo Welt
    Hallo Welt
    Hallo Welt
    Hallo Welt
    Hallo Welt
   
    Hallo Welt
    Hallo Welt
    Hallo Welt
    Hallo Welt
    Hallo Welt
    Hallo Welt
    Hallo Welt
 
 
    Hallo Welt
    Hallo Welt
    Hallo Welt
    Hallo Welt
    Hallo Welt
    Hallo Welt
    Hallo Welt
 
 
    Hallo Welt
    Hallo Welt
    Hallo Welt
    Hallo Welt
    Hallo Welt
    Hallo Welt
    Hallo Welt
 
  
    Hallo Welt
    Hallo Welt
    Hallo Welt
    Hallo Welt
    Hallo Welt
    Hallo Welt
    Hallo Welt
 
 
 
  
 
  Hallo Welt

  Hallo Welt

  Hallo Welt

  Hallo Welt

 
 
 

#3

Hai, Oliver,

Lieber Experte, in einemBereich kennst Du Dich besser aus wie
ich,

„besser als ich“…

…aber das ist relativ unerheblich - apropros „relativ“: laß die Positionierung aller divs und der Tabelle auf relative und vergib dann die gewünschten Abstände mittels margin-top.

Wenn Du die Tabelle absolut positionierst, wird sie aus dem normalen Positionierungsverlauf herausgenommen und auch die nachfolgenden Elemente richten sich nicht nach der Tabelle aus.

Gruß
Sibylle

#4

Hallo ,

Die Tabellenpostion ist fest. Nun habe ich gelsen, dass
relative die Position beschreibt, relativ zur „normalen“
Position im Dokument.

Nein , relative , ist relative zum nächtsten Eltern Element was absolute Positioniert ist .

Das heisst, jede absolute box , beinhaltet dann eine relative position zu sich selbst .

box absolute (100x,200y)

  • box relative (10x,10y)

box relative liegt also auf dem View (beachte scrolling) bei top:110x,left 210y

#5

Hallo,
habs gelöst. Das Zauberwort hieß margin-top!
Danke!