float floatet nicht richtig.../Tipp für CSS Layout gesucht

[Elya]

Hallo Forum,
Mein CSS-Layout soll etwas so aussehen:
__________________________
|    |                     |
|div |         div title   |
|navi|_____________________|
|    |                     |
|    |                     |
|    |       div content   |
|    |                     |
|__________________________|

Zuerst habe ich das so gemacht:
#title {
float:right;
height:100px;
width:78%;}

#left {
width:18%;
height:330px;
float:left;
margin:0;}

#content {
width:70%;
float:left;
margin-left:3%;}

Das sah in den meisten Browsern ganz OK aus und war supervariabel, leider etwas zu variabel, denn je nach Vorhandensein eines Scrollbalkens veränderte sich die Breite der Seite und damit _alle_ Elemente, auch die des Navicontainers, und im Contentbereich veränderten sich die Umbrüche etc. Ich denke, das Verhalten ist bei Prozentangaben soweit korrekt; ich habe deshalb eine andere Lösung gesucht und mal den Tipp von Christian Seiler http://forum.de.selfhtml.org/archiv/2003/7/52197/#m287743 adaptiert:

/* Titelleiste mit Bild */
#title {
float:right;
height:100px;
margin-left:210px;}

#left {
width:200px;
float:left;}

#content {
float:right;
margin-left:210px;}

Jetzt steht #title und #navi korrekt, aber der #content zwar horizontal korrekt mit 210px margin, vertikal aber unterhalb von #navi. Und zwar unabhängig davon, ob #title existiert oder nicht oder in welcher Reihenfolge ich die beiden rechten Container im html-Code plaziere. Warum floatet #title korrekt, #content aber nicht?

Ich frage mich außerdem, ob mein Scrollbalken-Problem damit gelöst wäre. Zumindest bei der Navi, #content bleibt ja variabel (und soll es auch bleiben)

Sorry, kann z.Zt. keinen Link zum Problem posten. Ach ja: validiert ist es natürlich, html und css.

Die diversen Links zu Meyerweb usw. hab ich gelesen, finde aber gerade mein Problem dort nicht.

Habt Ihr einen Tipp für mich? Ich hoffe, ich hab mich einigermaßen verständlich artikuliert.

Schöne Grüße aus Köln-Ehrenfeld,

Elya

[Christian Seiler]

Hallo Elya,

Mein CSS-Layout soll etwas so aussehen:
__________________________
|    |                     |
|div |         div title   |
|navi|_____________________|
|    |                     |
|    |                     |
|    |       div content   |
|    |                     |
|__________________________|

Wenn Du möchtest, dass #navi eine feste Breite hat und der Rest variabel ist, dann hast Du ein Problem, wenn Du #title vor #navi deklarierst.

Lösbar wäre es so:

#navi {
  float: left;
  width: 200px;
}

#title {
  margin-left: 210px;
}

#content {
  margin-left: 210px;
}

<div id="navi">...</div>
<div id="title">...</div>
<div id="content">...</div>

Wenn Du dagegen #title vor #navi definieren möchtest, dann kannst Du nur mit Prozentwerten arbeiten; denn die float-Eigenschaft (egal, ob left oder right) funktioniert nur dann, wenn dem Element auch eine Breite zugewiesen worden ist.

Alternativ könntest Du natürlich absolut positionieren:

#title {
  position: absolute;
  left: 210px;
  right: 10px;
  top: 10px;
  height: 100px;
}

#navi {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 190px;
  height: 330px;
}

#content {
  position: absolute;
  left: 210px;
  top: 120px;
  right: 10px;
}

Mit absoluter Positionierung kannst Du die Elemente in beliebiger Reihenfolge anordnen. Allerdings kann es dann bei kleinen Fenstern zu unschönen überlappungseffekten kommen.

Viele Grüße,
Christian

[Elya]

Hallo Christian,
erstmal danke für die Antwort.

Wenn Du möchtest, dass #navi eine feste Breite hat und der Rest variabel ist, dann hast Du ein Problem, wenn Du #title vor #navi deklarierst.

<div id="navi">...</div>
<div id="title">...</div>
<div id="content">...</div>

Ggenau so habe ich es probiert und der Effekt war der gleiche.

denn die float-Eigenschaft (egal, ob left oder right) funktioniert nur dann, wenn dem Element auch eine Breite zugewiesen worden ist.

Dieser Hinweis bringt mich auf jeden Fall schon mal weiter und ich verstehe jetzt warum es so nicht klappen kann.

Alternativ könntest Du natürlich absolut positionieren:

...aber das wollte ich ja nun gerade nicht.

Ich probiere mal weiter mit den Breitenangaben herum.

Schöne Grüße aus Köln-Ehrenfeld,

Elya

[Christian Seiler]

Hallo Elya,

<div id="navi">...</div>
<div id="title">...</div>
<div id="content">...</div>
Ggenau so habe ich es probiert und der Effekt war der gleiche.

Ich habe hier mal eine Testseite geschrieben. Bei mir verändert sich der Navigationskontainer definitiv nicht. (Opera 7.11, Mozilla 1.3.1, Konqueror 3.1.2)

Hier: http://www.christian-seiler.de/temp/test-css-3box-1.html

Viele Grüße,
Christian

[Jeena Paradies]

Hallo,

Hier: http://www.christian-seiler.de/temp/test-css-3box-1.html

Mit dem Link verstehe ich endlich, wie man ohne Tabellen arbeiten kann. Ich denke ich werde es in meinem nächsten Projekt endlich ohne Tabellen als Layoutmittel schaffen. Irgendwie hab ich das bis jetzt nie kapiert, danke.
Jeena Paradies

[Christian Seiler]

Hallo Jeena,

Mit dem Link verstehe ich endlich, wie man ohne Tabellen arbeiten kann. Ich denke ich werde es in meinem nächsten Projekt endlich ohne Tabellen als Layoutmittel schaffen. Irgendwie hab ich das bis jetzt nie kapiert, danke.

Dann kann ich Dir ja gleich noch einen Link geben: http://css.fractatulum.net/.

Viele Grüße,
Christian

[Elya]

Hallo Christian,
das war ja einfach! Ich hatte bei meinen rechten Divs einfach zu viel des floatens getan, hab mir jetzt auch mal eine Musterseite aufgebaut ohne den ganzen sonstigen verwirrenden Schnickschnack und es klappt! Muß jetzt nur noch den Schnickschnack wieder einbauen... ;-)

Vielen Dank nochmal.

Schöne Grüße aus Köln-Ehrenfeld,

Elya

[Elya]

und noch was:
das Ausgangsproblem, daß die rechten/variablen divs sich beim Erscheinen eines Scrollbalken verändern und den Content verschieben, ist damit auch gelöst!

Schöne Grüße aus Köln-Ehrenfeld,

Elya