Text in Spaltendarstellung…

[Joe Public]

Hallo,

ich habe versucht s.h. http://www.physik.uni-ulm.de/theo/selfhtml/tdci.htm über das Attribut "Columns" einen zweispaltigen Textfluss hin zu bekommen, da das durchaus hübsch aussehen kann und m.E. auch praktisch beim lesen ist.

Das Ergebnis ist aber das es kein Ergebnis gibt, es passiert einfach mal gar nichts……
Nutze Safari 6 unter Mac Mountain Lion, aber das sollte ja eigentlich nicht das Problem sein, oder? Habe es auch mit FF probiert anzuschauen, ist aber dasselbe……

Weis das jemand was dazu?

Viele Grüße

Joe

 

[hela]

Hallo,

sieh z.B. mal hier: CSS-3-Spaltenlayouts.

Mit den Stichworten "css3 columns" findest du noch weitere Quellen.

 

[Joe Public]

Hallo,

jep genau so hatte ich das umgesetzt.
Ein Div um den Text gezogen und dem Div im CSS die Attribute eingesetzt…… passiert aber nüscht.
Hatte das dann jetzt mal genau so gemacht wie bei Deinem Link (ich habe die Seite in % und em´s) also width 600px, da hat es mir dann das Layout zerhauen, das war dann aber auchschon alles an Änderung. ;o(

 

[hela]

... jep genau so hatte ich das umgesetzt...

... kann ich kaum glauben. Ich habe zwar keinen Mac, aber bei mir werden unter Windows (mit Ausnahme des IE7..9) beim Firefox14, Opera12, Safari5.1, Chrome21 und Iron19 Spalten gebildet.

 

[Joe Public]

Ok,
kannst Du ruhig glauben, bin eben gerade einen Schritt weiter gekommen… wenn man nämlich keine zusätzlichen Tags für Webkit und FF setzt kommt da unter den betroffenen Browsern rein gar nichts, ich nutze ja Safari (Webkit) und da durfte mich das dann auch nicht wundern ;o)

Also:
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
usw. dazu, dann läuft das da auch.

Jetzt habe ich allerdings das Problem, das die Spalten "Asymmetrisch" befüllt werden. Unter Indesign kenne ich das Phänomen und da nutze ich dann die Option "am Grundlinienraster ausrichten", aber ich bin mir ziemlich sicher unetr HTML/CSS gibt es so etwas nicht…… kenne zumindest nur "Line-Height" und das ändern da nix…

Weisst Du da etwas zu?

Dank & Gruss

 

[hela]

Sieh mal hier: http://jsfiddle.net/2Uzfg/1/
Was meinst du mit "asymmetrisch"?

 

[Joe Public]

Oh, schicke Seite, danke schön, muss ich mir bei Gelegenheit mal näher ansehen.

mit asymmetrisch meine ich das hier:


Wenn ich das Bild einbaue, wie ich es auf den meisten Seiten will, aber nicht immer, verschwindet der Effekt weitestgehend und sieht so aus:


Wobei ich mit dem Bild in die nächste Falle laufe, aber erst muss ich mal das mit dem Umbruch gelöst bekommen…… sonst dreh ich hier noch durch ;o)


Dank und Gruss

 

[hela]

Vermutlich verursachen die vertikalen MARGIN-Werte der P-Elemente solche Verschiebungen in den Spalten. Eventuell hast du Glück, wenn du die vertikalen MARGIN-Werte zwischen den Textabsätzen genau halb so hoch wie die Zeilenhöhe machst.
Wie hier: http://jsfiddle.net/2Uzfg/4/

 

[Joe Public]

Nö, hab ich jetzt auch versucht in allen Varianten……

aber ich raff grade auch nix mehr, meine Augen sind grau, meine Ohren sind müde……;o)

Hm… ich hau mich jetzt erst mal auf´s Ohr.

Dank Dir soweit, wirklich lieb von Dir, morgen nerv ich weiter ;o)

So long

 

[hela]

Moin moin,

ich habe den "Fehler" jetzt auch gesehen. Opera, Chrome und Iron (Safari bei mir kurioserweise nicht) beginnen die erste und die zweite Spalte versetzt, wenn die Kindelemente im Spaltencontainer einen MARGIN-TOP-Wert haben.
Also den TOP-Wert auf Null setzen, so wie hier: http://jsfiddle.net/2Uzfg/5/

#spalten p {
  margin: 0 0 0.9em;
}