Inhaltsreihenfolge verändern

[Jeena Paradies]

Hallo,

Irgendwie stehe ich auf dem Schlauch, wie kann ich ein solches Layout umsetzen:

So dass im Quellcode die Inhalte nach der Reihenfolte 1 2 3 auftauchen? Wenn ja bitte ich um sachdienliche Hinweise ;-)

Grüße
Jeena Paradies

[Suucki]

http://aktuell.de.selfhtml.org/artikel/design/reihenfolge/index.htm

[Jeena Paradies]

Hallo,

http://aktuell.de.selfhtml.org/artikel/design/reihenfolge/index.htm

Von dort komme ich gerade, auch eine Antwort konnte ich dort auf meine nicht finden ;-).

Grüße
Jeena Paradies

[Ole]

hi Jeena

z.B. mit 3 divs

Die "1" bekommt ein margin-left und margin right, in der breite der anderen beiden
Die "2" wird absolut links-oben positioniert
Die "3" wird absolut rechts-oben positioniert

nur mal so quick & dirty, von schön war nie die rede ;)

so long
Ole
(8-)>

[Jeena Paradies]

Hallo,

Die "1" bekommt ein margin-left und margin right, in der breite der anderen beiden
Die "2" wird absolut links-oben positioniert
Die "3" wird absolut rechts-oben positioniert
nur mal so quick & dirty, von schön war nie die rede ;)

Hehe, jo, so würde es zwar gehen, aber das ist wirklich sehr dirty. Eigentlich hoffte ich, dass bei zu wenig platz die zwei Seitenleisten irgendwie nach unten "hüpfen" könnten.

Grüße
Jeena Paradies

[Ole]

Mahlzeit :)

Hehe, jo, so würde es zwar gehen, aber das ist wirklich sehr dirty. Eigentlich hoffte ich, dass bei zu wenig platz die zwei Seitenleisten irgendwie nach unten "hüpfen" könnten.

Ohne absolute Positionierung wirst du imho nicht hinkommen, wenn du die Reihenfolge der Objekte genau so haben willst. Ein "nach unten hüpfen" wirst du imho leider auch nicht so ohne weiteres[*] hinbekommen

so long
Ole
(8-)>

[*] ich denke das es durchaus mit einer ordentlichen portion javascript möglich ist, halte es aber nicht umbedingt für erstrebenswert.

[wahsaga]

hi Jeena,

zunächst mal wäre natürlich Schuers Feature-Artikel: Die wichtige Reihenfolge von Webinhalten empfehlen - sofern du ihn nicht schon kennst.

Irgendwie stehe ich auf dem Schlauch, wie kann ich ein solches Layout umsetzen:

So dass im Quellcode die Inhalte nach der Reihenfolte 1 2 3 auftauchen?

Da würde ich vielleicht Bereich 1 nach rechts floaten, und mittels margin-right so weit auf Abstand halten, dass Bereich 3 daneben absolut positioniert noch Platz findet. Fragt sich nur, wie das ganze dann aussieht, wenn da nicht mehr genügend Platz für dieses Float ist - dann käme 2 wohl unter 1 zu stehen.

Und dein Beispielbild macht auch nicht ganz klar, ob du lediglich Wert auf diese Nebeneinanderplatzierung legst - oder auch noch auf einen "Spalteneffekt". Falls letzteres, dann müsstest du wohl sehen, ob und wie du das noch mit Faux Columns kombiniert bekommst.
(Und ob und welche Breiten flexibel/statisch sein sollen, wäre wohl auch noch zu klären.)

gruß,
wahsaga

[Jeena Paradies]

Hallo,

Da würde ich vielleicht Bereich 1 nach rechts floaten, und mittels margin-right so weit auf Abstand halten, dass Bereich 3 daneben absolut positioniert noch Platz findet. Fragt sich nur, wie das ganze dann aussieht, wenn da nicht mehr genügend Platz für dieses Float ist - dann käme 2 wohl unter 1 zu stehen.

Ideal wäre es, wenn falls kein Platz da ist, erst 3 unten drunter "hüpft" und dann wenn es für 2 auch keinen Platz gibt auch dieses herunterhüpft links neben 3. Es klingt aber leider so als ob man ohne Absolute positionierung gar nicht zurechtkäme, das hatte ich befürchtet :-( ohne float wird da auch nix "herunterhüpfen".

Und dein Beispielbild macht auch nicht ganz klar, ob du lediglich Wert auf diese Nebeneinanderplatzierung legst - oder auch noch auf einen "Spalteneffekt". Falls letzteres, dann müsstest du wohl sehen, ob und wie du das noch mit Faux Columns kombiniert bekommst.

wichtig ist nur die Nebeneinanderplazierung, einen Spalteneffekt brauche ich nicht.

(Und ob und welche Breiten flexibel/statisch sein sollen, wäre wohl auch noch zu klären.)

2 und 3 haben feste Breiten.

Grüße
Jeena Paradies

[erika]

Hallo Jeena,

Kai Laborenz beschäftigt sich mit diesem Problem in seinem Buch
"CSS-Praxis" 3. Auflage Seite 188 ff.
Sein Layoutbeispiel basiert auf "skidoo II"- siehe dazu
http://webhost.bridgew.edu/etribou/layouts/

Grüsse aus Neubrandenburg,
erika

[erika]

Jeena, lies mal bitte in der Yahoo-CSS-Mailingliste den Beitrag von Michael Charlier vom 28.11.2005.

Michael Charlier verweist auf folgende Beiträge, die er auch kurz kommentiert.

http://www.tjkdesign.com/articles/liquid.asp#up.

http://www.positioniseverything.net/articles/onetruelayout/

http://www.meyerweb.com/
Eric Meyer spricht am 1.11.205 von einer "Layout Revolution" und unterbreitet am 9.11.05 einige Verbesserungsvorschläge.

Auch Michael Charlier ist indes nicht untätig geblieben........

Da gibt es einiges zu studieren und auszuprobieren!

Grüsse, erika