Positionierung

[Julian Hofmann]

Hallo.

Irgendwie verzweifle ich langsam. Da soll man verschachtelte Tabellen immer mehr vermeiden, so richtig gelingt es mir aber nicht das ganze mit divs hinzubekommen.

Angenommen ich habe folgenden Code:
<div id="content"><img src="images/blau.jpg" width="145" height="444">
  <div id="headline"><h1>Testseite</h1></div>
  <div id="text">Lorem ipsum dolor sit amet...</div>
  <div id="navigation"> <a href="index.php" class="navi">Home</a></div>
</div>

...und die Darstellung sollte etwa wie folgt aussehen (horizontal in der Mitte des Bildschirms, ideal wäre sogar komplett mittig):

-content-------------------------------
   |             |  headline             |
   |             |-----------------------|
   |  blau.jpg   |  text                 |
   |             |                       |
   |             |-----------------------|
   |             |  navigation           |
   ---------------------------------------

Wie müsste ich da bitte die Angaben in CSS setzen?

Habe zur Zeit:
#content {
 width: 600px;
 padding: 0px;
 margin-top: 20px;
 margin-bottom: 20px;
 margin-right: auto;
 margin-left: auto;
 text-align:left;
 height : 444px;
}

#headline {
 position : absolute;
 width : 400px;
 height : 100px;
 margin-left : 170px;
 margin-top : 100px;
}

#text {
 position : absolute;
 width : 400px;
 height : 200px;
 margin-left : 170px;
 margin-top : 200px;
}

#navigation {
 position : absolute;
 width : 400px;
 height : 20px;
 margin-left : 170px;
 margin-top : 400px;
}

Oder gibt's irgendwo noch Seiten, auf den das gut erklärt wird? SelfHTML hat mich da nicht all zu sehr weitergebracht.
Oder weiß einer eine Seite, wo ich etwas im Quellcode rumschnüffeln könnte?

Vielen Dank im voraus.
Grüße aus Würzburg
Julian

[Stefan Einspender]

Hallo Julian,

Oder weiß einer eine Seite, wo ich etwas im Quellcode rumschnüffeln könnte?

http://xse.de/css-layout.html sind doch schon einige Seiten, die ein
CSS-Layout haben und/oder sich mit diesen Thema beschäftigen.

Auf die Schnelle ist mir übrigens aufgefallen, dass Du unbedingt noch
body { min-width: 600px; }
angeben solltest, sonst kann es bei zu schmalen Browserfenstern zu
unschönen Effekten kommen.

Viele Grüße,
Stefan

PS: Sollte niemand anders Deine Frage beantworten, werde ich mich
    heute abend der Sache nochmal widmen, im Moment geht es nicht.

[Kai Lahmann]

hi

-content-------------------------------
   |             |  headline             |
   |             |-----------------------|
   |  blau.jpg   |  text                 |
   |             |                       |
   |             |-----------------------|
   |             |  navigation           |
   ---------------------------------------

einfach das Bild mit float:left; und width:170px der Rest sollte dann von alleine passen. (evtl. noch eine height: an die 3 rechts). Dein position:absolute ist ab dieser Stelle übrigens überflüssig.

Grüße aus Bleckede

Kai

[Julian Hofmann]

Hallo Kai,

manchmal liegt die Lösung wohl doch näher als zunächst gedacht. Danke, klappt wunderbar.

Danke auch an Stefan. Werde mir bei Gelegenheit mal die Seiten anschauen.

Grüße aus Würzburg
Julian