Positionierung top und bottom innerhalb eines div-Elements

[Viennamade]

Hallo!

Ich habe ein div. Innerhalb dieses div sollen 2 weitere Platz finden, eines ganz oben, das andere ganz unten. Ich habe es so probiert:

<div style="border:1px blue solid;height:300px;width:200px;">
  <div style="position:relative;border:1px green solid;top:0px;">geh nach oben!</div>
  <div style="position:relative;border:1px green solid;bottom:0px;">geh nach unten!</div>
</div>

Wie macht man das korrekt?

Besten Dank!
Viennamade

[Axel Richter]

Hallo,

Ich habe ein div. Innerhalb dieses div sollen 2 weitere Platz finden, eines ganz oben, das andere ganz unten.
Wie macht man das korrekt?

Korrekt macht man das, meiner Meinung nach, indem man es lässt. Mein Motto: Löse _nie_, ohne wirklich wichtigen Grund, Elemente aus dem normalen Elementfluss. Findest Du einen wirklich wichtigen Grund dafür, dann denk nochmal intensiv drüber nach ;-)).

So, wie Du es sehen willst, wird es eventuell so gehen:

<div style="position:relative;border:1px blue solid;height:300px;width:200px;">
  <div style="position:absolute;border:1px green solid;top:0px;">geh nach oben!</div>
  <div style="position:absolute;border:1px green solid;bottom:0px;">geh nach unten!</div>
</div>

Erklärung: Bei position:relative orientieren sich Angaben zu top, left, bottom, right am umgebenden Element unter Beachtung des normalen Elementflusses. Nur bei position:absolute orientieren sich diese Angaben absolut am nächsten umgebenden Element, welches nicht normal fließt. Das ist der Grund für das position:relative im umgebenden DIV. Ohne dies wäre das nächste umgebenden Element, welches nicht normal fließt, der BODY.

viele Grüße

Axel

[Viennamade]

Hallo Axel!

Danke für die Antwort, Deine Lösung funktioniert und ich verstehe sie und: nein, sie hilft nicht weiter :-)
Deine Ausführungen zum Problem haben mich verunsichert und ich möchte Dich fragen, wie würdest Du diesen Bildschirm lösen:

_________________________________
 Verweis1 |                                |
 Verweis2 |                                |
 Verweis3 |  Datentabelle mit 3 Spalten    |
 Verweis4 |                                |
          |            und                 |
          |                                |
  _______ |                                |
 |       ||            ca.                 |
 |       ||                                |
 | Bild  ||                                |
 |       ||         15 Zeilen              |
 |       ||                                |
 |       ||                                |
 |_______||________________________________|

Das Layout "muß" so aussehen (Grafiker). Das Bild soll untenbündig mit der Tabelle sein, auf die Einheit Bild & Verweisliste bezog sich meine Frage. Die Tabelle ist eine "echte" Datentabelle.

Leicht wäre es ja, die 1. Tabellenspalte für Bild und Verweisliste zu verwenden, aber wegen der Tabellenlayout-Phobie dachte ich eben an die bottom/top-Lösung.
Hinweis: Die Tabelle ist derart Inhaltsreich, daß sie jedenfalls größer als die Einheit Verweisliste & Bild ist.

Ist es besser, das Bild & die Verweisliste als Tabellenspalte zu machen, oder besser mit div/bottom/top zu arbeiten?

Besten Dank & Grüße
Viennamade

Ich habe ein div. Innerhalb dieses div sollen 2 weitere Platz finden, eines ganz oben, das andere ganz unten.
Wie macht man das korrekt?
Korrekt macht man das, meiner Meinung nach, indem man es lässt. Mein Motto: Löse _nie_, ohne wirklich wichtigen Grund, Elemente aus dem normalen Elementfluss. Findest Du einen wirklich wichtigen Grund dafür, dann denk nochmal intensiv drüber nach ;-)).

So, wie Du es sehen willst, wird es eventuell so gehen:

<div style="position:relative;border:1px blue solid;height:300px;width:200px;">
  <div style="position:absolute;border:1px green solid;top:0px;">geh nach oben!</div>
  <div style="position:absolute;border:1px green solid;bottom:0px;">geh nach unten!</div>
</div>

Erklärung: Bei position:relative orientieren sich Angaben zu top, left, bottom, right am umgebenden Element unter Beachtung des normalen Elementflusses. Nur bei position:absolute orientieren sich diese Angaben absolut am nächsten umgebenden Element, welches nicht normal fließt. Das ist der Grund für das position:relative im umgebenden DIV. Ohne dies wäre das nächste umgebenden Element, welches nicht normal fließt, der BODY.

viele Grüße

Axel

[Ingo Turski]

Hi,

Das Layout "muß" so aussehen (Grafiker). Das Bild soll untenbündig mit der Tabelle sein, auf die Einheit Bild & Verweisliste bezog sich meine Frage. Die Tabelle ist eine "echte" Datentabelle.

Dann erstelle ein DIV position:absolute um die Tabelle und das Bild, welches Du hierin ebenfalls absolut unten links positionierst. Der Tabelle selbst gibst Du lediglich ein passendes margin-left mit, so daß sich das DIV der Tabelle anpassen sollte (ungetestet, da ich auch äußerst selten absolute Positionierungen verwende). Das Menü dann position:absolute; top:0; left:0; zu positionieren, sollte auch zu keinen Problemen führen.

freundliche Grüße
Ingo

[Viennamade]

Hallo Axel & Ingo!

_________________________________
Verweis1 |                                |
Verweis2 |                                |
Verweis3 |  Datentabelle mit 3 Spalten    |
  _______ |            und                 |
|       ||            ca.                 |
| Bild  ||                                |
|       ||         15 Zeilen              |
|_______||________________________________|

Dann erstelle ein DIV position:absolute um die Tabelle und das Bild, welches Du hierin ebenfalls absolut unten links positionierst.

Ingo, das mit dem position:absolute hat nicht geholfen - dafür kannst Du nichts, denn ich habe verheimlicht, daß unter den oben dargestellten Elementen noch ein horizontales bottom-menu kommt, und das könnte ich ja nicht mehr positionieren ...

Aber, ich glaube eine akzeptable Lösung gefunden zu haben:
1. Ein relativ positioniertes div um die ganze Chose rundherum.
2. In diesem Div das Bild als background-image mit bottom-left (daß ist der Clou)
3. Innerhalb des Divs ein absolut positioniertes div, welches die Verweisliste aufnimmmt.
4. Die Tabelle mit margin-left auf Abstand halten.
Funktioniert jedenfalls im Opera 7.21, Mozilla 1.5, NN 7.? und im IE6.0.

Danke Euch beiden!
Viennamade

[Ingo Turski]

Hi,

2. In diesem Div das Bild als background-image mit bottom-left (daß ist der Clou)

sehr gute Idee. Diese etwas weiter gedacht, kannst Du Dir auch jegliche Positionierung (bis auf die des Hintergrundbildes) sparen. Einfach das Menü float:left, die Tabelle und das bottom-menü margin-left und das bottom-menü evtl. noch clear:left, sollte aber auch ohne gehen.

freundliche Grüße
Ingo

[Viennamade]

Hallo Ingo!

_________________________________
Verweis1 |                                |
Verweis2 |                                |
Verweis3 |  Datentabelle mit 3 Spalten    |
_______ |            und                 |
|       ||            ca.                 |
| Bild  ||                                |
|       ||         15 Zeilen              |
|_______||________________________________|

2. In diesem Div das Bild als background-image mit bottom-left (daß ist der Clou)
   sehr gute Idee. Diese etwas weiter gedacht, kannst Du Dir auch jegliche Positionierung (bis auf die des Hintergrundbildes) sparen. Einfach das Menü float:left, die Tabelle und das bottom-menü margin-left und das bottom-menü evtl. noch clear:left, sollte aber auch ohne gehen.

Danke für Deinen Beitrag, den ich umgesetzt habe. Nicht ganz so wie Du gesagt hast (vielleicht ist das ja das Problem):
Dem Menü links oben habe ich ein float:left gegeben und in der Folge auch ein width (exakt die gleiche Breite wie das Bild unterhalb).
Im Gegensatz zu Deiner Ausführung gab ich der Tabelle _kein_ margin-left, ich denke die braucht das nicht, denn sie reiht sich ohnehin rechts vom Menü (und damit auch rechts vom Bild) ein.
Das schaut jetzt gut aus, folgende Einschränkung im Opera 7.21 und IE 6.0: Verringert man mit der Maus die Breite des Viewports, dann rutscht bei diesen beiden Browsern die Tabelle unter das Menü links oben und schwebt somit über dem Bild. Nicht schön. Beim NN 7.0 und Mozilla 1.5 hingegen bleibt die Tabelle stehen wo sie ist.
Mir selber gefällt das ja gut mit dem Runterrutschen der Tabelle, dem Auftraggeber hingegen sicher nicht, der will immer das Bild in seiner Schönheit sehen.

Weiß jemand wie ich dem Opera und insbesondere dem IE das Verhalten vom Mozilla & NN beibringen kann?

Besten Dank
Viennamade

[Ingo Turski]

Hi,

Mir selber gefällt das ja gut mit dem Runterrutschen der Tabelle, dem Auftraggeber hingegen sicher nicht, der will immer das Bild in seiner Schönheit sehen.

tja, und genau das hättest Du mit margin-left verhindert... Zwar kann der Inhaltsbereich weiterhin unter das Menü rutschen, wenn die Fensterbreite zu klein wird, aber nicht das Bild überlagern. Wobei ich ein solches Verhalten der Browser ziemlich unsinnig finde, da in diesem Fall durch das runterrutschen überhaupt kein Platz gewonnen wird und dann sowieso ein Scollbalken erzeugt wird.

freundliche Grüße
Ingo

[Viennamade]

Hallo Ingo!

Mir selber gefällt das ja gut mit dem Runterrutschen der Tabelle, dem Auftraggeber hingegen sicher nicht, der will immer das Bild in seiner Schönheit sehen.
tja, und genau das hättest Du mit margin-left verhindert...

Ich weigere mich ja nicht das margin-left einzusetzen:-)
Funktioniert wunderbar im Opera 7.21 und im IE 6.0. Der Mozilla hingegen rechnet das margin-left der Tabelle vom rechten Rand der Menüliste (<ul>) weg ... also ist ein Riesenspalt zwischen Menü/Bild und Tabelle :-(

Beste Grüße & Danke
Viennamade

[Viennamade]

Hallo Ingo!

Mir selber gefällt das ja gut mit dem Runterrutschen der Tabelle, dem Auftraggeber hingegen sicher nicht, der will immer das Bild in seiner Schönheit sehen.
tja, und genau das hättest Du mit margin-left verhindert...
Ich weigere mich ja nicht das margin-left einzusetzen:-)
Funktioniert wunderbar im Opera 7.21 und im IE 6.0. Der Mozilla hingegen rechnet das margin-left der Tabelle vom rechten Rand der Menüliste (<ul>) weg ... also ist ein Riesenspalt zwischen Menü/Bild und Tabelle :-(

Ich glaube ich habs! Ich habe jetzt das margin-left für die Tabelle drinnen und der daraus entstehenden Abstand zwischen Menü+Bild und Tabelle ist weg, seitdem ich der Tabelle ein display:block verpaßt habe!
(Jetzt gibt's ein neues Problem, nämlich daß NN und Mozilla die bottom-borders der Tabellen-Zellen in der letzten Spalte nicht bis zum rechten Zellenrand durchzeichnet, aber ich denke das gehört nicht mehr in diesen Thread.)

Juhu!
Danke!
Viennamade

[Ingo Turski]

Hi,

Ich glaube ich habs! Ich habe jetzt das margin-left für die Tabelle drinnen und der daraus entstehenden Abstand zwischen Menü+Bild und Tabelle ist weg, seitdem ich der Tabelle ein display:block verpaßt habe!

tja, Tabellen sind auch irgendwie Zwitter in dieser Beziehung.

(Jetzt gibt's ein neues Problem, nämlich daß NN und Mozilla die bottom-borders der Tabellen-Zellen in der letzten Spalte nicht bis zum rechten Zellenrand durchzeichnet, aber ich denke das gehört nicht mehr in diesen Thread.)

Warum nicht hier? Zumal Du den Seitenaufbau hier schon erklärt hast.
Kann es sein, daß Du leere Tabellenzellen drin hast? Dann könnte ein   helfen.

freundliche Grüße
Ingo

[Viennamade]

Hallo!

Jetzt gibt's ein neues Problem, nämlich daß NN und Mozilla die bottom-borders der Tabellen-Zellen in der letzten Spalte nicht bis zum rechten Zellenrand durchzeichnet, aber ich denke das gehört nicht mehr in diesen Thread.
Warum nicht hier?

Eben!
Denn eine Lösung hat sich eben gefunden :-)
Für die Tabelle gibts ein colgroup-Element, die dazugehörigen col-Elemente haben eine width (CSS), wie die Tabelle selbst.
Die beschriebenen Lücken der horizontalen Gitternetzlinien treten bei Mozilla & Netscape nicht auf wenn diese Formel aufgeht:
Summe border-widths der vertikalen Gitternetzlinien + Summe der col-widths = table-width

Also, meine Tabelle hat 3 Spalten, folglich 2 vertikale Gitternetzlinien mit je 1px. Die Summe der col-widths ist 659px, daher: 2px + 659px = 661px und das ist die CSS-Breite der Tabelle. So genau nehmens die beiden genannten Browswer meiner Erfahrung nach nur bei Tabellen mit display:block.

Ach wie schön die Seite jetzt aussieht ;-)
Danke nochmals für die Unterstützung und

Beste Grüße
Viennamade

[Axel Richter]

Hallo,

Deine Ausführungen zum Problem haben mich verunsichert und ich möchte Dich fragen, wie würdest Du diesen Bildschirm lösen:

Ich würde ihn eben nicht lösen;-)). Allerdings verdiene ich mein Geld nicht damit sowas zu lösen.

_________________________________
 Verweis1 |                                |
 Verweis2 |                                |
 Verweis3 |  Datentabelle mit 3 Spalten    |
 Verweis4 |                                |
          |            und                 |
          |                                |
  _______ |                                |
 |       ||            ca.                 |
 |       ||                                |
 | Bild  ||                                |
 |       ||         15 Zeilen              |
 |       ||                                |
 |       ||                                |
 |_______||________________________________|

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Layout</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
</head>
<body style="position:relative; border:1px blue solid;">
  <ul style="float:left; width:100px; padding-left:20px; margin:0;">
   <li>Verweis</li>
   <li>Verweis</li>
   <li>Verweis</li>
   <li>Verweis</li>
  </ul>
  <table border="1" style="float:left; width:600px;">
   <tr>
    <th>Feld1</th>
    <th>Feld2</th>
    <th>Feld3</th>
   </tr>
   <tr>
    <td>Zelle1</td>
    <td>Zelle2</td>
    <td>Zelle3</td>
   </tr>
   <tr>
    <td>Zelle1</td>
    <td>Zelle2</td>
    <td>Zelle3</td>
   </tr>
   <tr>
    <td>Zelle1</td>
    <td>Zelle2</td>
    <td>Zelle3</td>
   </tr>
   <tr>
    <td>Zelle1</td>
    <td>Zelle2</td>
    <td>Zelle3</td>
   </tr>
   <tr>
    <td>Zelle1</td>
    <td>Zelle2</td>
    <td>Zelle3</td>
   </tr>
   <tr>
    <td>Zelle1</td>
    <td>Zelle2</td>
    <td>Zelle3</td>
   </tr>
   <tr>
    <td>Zelle1</td>
    <td>Zelle2</td>
    <td>Zelle3</td>
   </tr>
   <tr>
    <td>Zelle1</td>
    <td>Zelle2</td>
    <td>Zelle3</td>
   </tr>
   <tr>
    <td>Zelle1</td>
    <td>Zelle2</td>
    <td>Zelle3</td>
   </tr>
   <tr>
    <td>Zelle1</td>
    <td>Zelle2</td>
    <td>Zelle3</td>
   </tr>
  </table>
  <p style="clear:left; margin:0; padding:0;"><img src="bilder/home.gif" style="position:absolute; border:1px green solid; bottom:0px; width:100px; height:150px;" alt="Bild"></p>
</body>
</html>

Die Positionierung des Bildes ist nicht optimal. Es steht, wenn wenig Platz ist, über anderen Elementen. Das würde mich dazu bringen doch eine Gesamttabelle zu verwenden.

viele Grüße

Axel

[Viennamade]

Hallo Axel!

_________________________________
 Verweis1 |                                |
 Verweis2 |                                |
 Verweis3 |  Datentabelle mit 3 Spalten    |
  _______ |            und                 |
 |       ||            ca.                 |
 | Bild  ||                                |
 |       ||         15 Zeilen              |
 |_______||________________________________|

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>

...

<head>
</html>
Die Positionierung des Bildes ist nicht optimal. Es steht, wenn wenig Platz ist, über anderen Elementen. Das würde mich dazu bringen doch eine Gesamttabelle zu verwenden.

Herzlichen Dank für Dein Beispiel. Ganz platt hat mich das "<body style="position:relative;" gemacht ... ;-)
Jo, das Bild ... wird wohl eine Gesamttabelle werden.
Ich versuch mich jetzt noch an Ingos Vorschlag.

Beste Grüße
Viennamade