spezielles Seitenlayout

[Dietmar]

Hallo,

ist es möglich mit CSS, aus einem dreispaltigen Layout ein zweispaltiges Layout dadurch zu schaffen, indem man eine der äußeren Spalten unter die andere stellt?

Die Originaltestseite mit dreispaltigem Layout findet man unter:
http://www.kolping-hohenfels.de/demo/index.htm

Der Versuch eine zweispaltige zu konstruieren unter:
http://www.dietmar-feuerer.de/demo/index.htm

Ich habe schon <br class="clearall" /> [.clearall {clear: both;}] nach #beta zum Testen eingefügt. Dadurch änderte sich nichts.
Die Seiten sind alle valide.

Die Struktur des Mittelbereichs der Seite ist:
<div id="alpha">
</div>

<div id="beta">
</div>

<div id="gamma">
</div>

Der dazugehörige CSS-Code:
#alpha {
float:left;
width:150px;
margin-top:0px;
margin-bottom:0px;
}
#beta {
width:150px;
background-color:#FF0000;
margin-top:0px;
margin-bottom:0px;
}
#gamma {
float:right;
margin-left:180px;
margin-right:15px;
margin-top:5px;
margin-bottom:5px;
text-align:justify;
}

Vielen Dank und Gruß, Dietmar

[wahsaga]

hi,

ist es möglich mit CSS, aus einem dreispaltigen Layout ein zweispaltiges Layout dadurch zu schaffen, indem man eine der äußeren Spalten unter die andere stellt?

Die Originaltestseite mit dreispaltigem Layout findet man unter:
http://www.kolping-hohenfels.de/demo/index.htm

Bei diesem Aufbau mittels floating m.E. nicht.

Ich habe schon <br class="clearall" /> [.clearall {clear: both;}] nach #beta zum Testen eingefügt. Dadurch änderte sich nichts.

Wenn du das Floating für die dritte "Spalte" aufhebst, bringt sie das nicht unter die erste, sondern unter die beiden vorhergehenden.

Umgekehrt genauso, wenn du #1 nach rechts floaten würdest, #2 gar nicht floatest, und #3 wieder - auch dann darf #3 erst unter #1 und #2 beginnen.

Wenn absolute Positionierung keine Alternative darstellt - und das tut sie nicht, wenn du nicht die Höhe der Spalte, die "oben" sein soll, zweifelsfrei kennst - dann sehe ich mit aktuellem CSS keine Möglichkeit.

Evtl. von Interesse in diesem Zusammehang: Der Artikel Die wichtige Reihenfolge von Webinhalten

gruß,
wahsaga

[dietmar]

Hallo Wahsaga,

danke für deinen Link! Ich habe jetzt die Lösung.

Wenn absolute Positionierung keine Alternative darstellt -

Du siehst das richtig; zwar nicht für #alpha und #beta, aber für den Mittelbereich #gamma kann ich eine absolute Anfangsposition festlegen. Es klappt auch mit einer kleinen Einschränkung. Nach der Beschreibung hier im Tutorial (http://de.selfhtml.org/navigation/suche/index.htm?Suchanfrage=position)
bedeutet absolute = absolute Positionierung, gemessen am Rand des nächsthöheren Elternelements, das nicht die Normaleinstellung position:static hat.

Wo ist das genau? Mein übergeordnetes Elternelement, das alle anderen div's beinhaltet, ist #container. Dennoch muss ich den linken Abstand mit 385px festlegen, weil er von linken Bildschirmrand aus mißt. Das ist problematisch, falls ein Besucher am linken Bildschirmrand eine Sidebar offen hat, da sich dann alles nach rechts verschiebt. Kann ich das auch mit dem linken Rand von #container definieren?

Gruß Dietmar

[wahsaga]

hi,

bedeutet absolute = absolute Positionierung, gemessen am Rand des nächsthöheren Elternelements, das nicht die Normaleinstellung position:static hat.

Wo ist das genau?

F: Wo ist drei Meter neben dem Hydranten?
A: Drei Meter neben dem Hydranten.

Kann ich das auch mit dem linken Rand von #container definieren?

Ja, so wie im oben von dir Zitierten beschrieben: Sorge dafür, dass die Position des Containers nicht mehr static ist.

gruß,
wahsaga

[MudGuard]

Hi,

Du siehst das richtig; zwar nicht für #alpha und #beta, aber für den Mittelbereich #gamma kann ich eine absolute Anfangsposition festlegen. Es klappt auch mit einer kleinen Einschränkung. Nach der Beschreibung hier im Tutorial (http://de.selfhtml.org/navigation/suche/index.htm?Suchanfrage=position)
bedeutet absolute = absolute Positionierung, gemessen am Rand des nächsthöheren Elternelements, das nicht die Normaleinstellung position:static hat.

Ich dachte, ich hätte diesen Fehler schon mal gemeldet - war aber wohl nicht so, darum hab ich's grad nochmal getan.
Ersetze "Elternelement" durch "Vorfahrenelement" (weil ein Element höchstens ein Elternelement hat)

cu,
Andreas

[Detlef G.]

Hallo Andreas

Ich dachte, ich hätte diesen Fehler schon mal gemeldet - war aber wohl nicht so, darum hab ich's grad nochmal getan.

Aber warum unter "Komponente: CGI/PERL"?

Auf Wiederlesen
Detlef

[MudGuard]

Hi,

Ich dachte, ich hätte diesen Fehler schon mal gemeldet - war aber wohl nicht so, darum hab ich's grad nochmal getan.
Aber warum unter "Komponente: CGI/PERL"?

Da haben mir vermutlich das Scrollrad der Maus und ein falsch gesetzter Fokus einen Streich gespielt ...

cu,
Andreas