nicht angemeldet
Text floaten über Spalten
0 
JürgenB
0
Text floaten über Spalten
Matthias Apsel
Gunnar BittersmannHello,
kann man mit HTML5 eigentlich direkt einen Text automatisch floaten über mehrere Spalten (DIVs) mit festgelegter Höhe? Also wenn DIV_1 voll, automatisch in DIV_2 weiterschreiben, usw.
Mit JavaScript hatte ich das schon mal am Wickel, kann es aber leider nicht wiederfinden in meiner Sammelkiste.
Irgendwie ging das mit Vergleich von scrollHeight und clientHeigt.
Bevor ich jetzt nochmal anfange, das zusammenzustoppeln, die Frage nach den Möglichkeiten von HTML5
Liebe Grüße aus dem schönen Oberharz
Tom vom Berg
-
Hallo Tom,
hast du schon mal column-count und column-gap ausprobiert?
Gruß, Jürgen
-
Hello,
Hallo Tom,
hast du schon mal column-count und column-gap ausprobiert?
Sehr guter Tipp! Danke.
http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_column-gap
Selbst text-align:justify; funktioniert da noch.
Jetzt muss ich nur mal sehen, welche Browser das noch nicht konnten und wie wichtig die noch sind für die kleine Online-Zeitung.
Liebe Grüße aus dem schönen Oberharz
Tom vom Berg
-
Hallo Tom,
bei mir sieht das so aus:
@media screen and (min-width:50em) { .mc { -moz-column-count:2; -moz-column-gap:1.5em; -webkit-column-count:2; -webkit-column-gap:1.5em; column-count:2; column-gap:1.5em; } }Browser, die das nicht verstehen, zeigen den Inhalt einspaltig an.
Gruß, Jürgen
-
Hello Jürgen,
bei mir sieht das so aus:
@media screen and (min-width:50em) {
.mc { -moz-column-count:2; -moz-column-gap:1.5em;
-webkit-column-count:2; -webkit-column-gap:1.5em;
column-count:2; column-gap:1.5em; }
}> > Browser, die das nicht verstehen, zeigen den Inhalt einspaltig an. Ich hab nur noch ein paar Probleme mit Bildern in den Spalten. Die Breite klappt, aber wiesi h die Höhe ergibt, bzw. sich in den Fluss einbrkngt, kapier ich noch nicht. Liebe Grüße aus dem schönen Oberharz Tom vom Berg  -- ☻\_ /▌ / \ Nur selber lernen macht schlau [Die ultimative Seite für Selbermacher](http://getscript.de/)
-
-
Om nah hoo pez nyeetz, Tom!
hast du schon mal column-count und column-gap ausprobiert?
Sehr guter Tipp! Danke.
http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_column-gap
Selbst text-align:justify; funktioniert da noch.
Spalten gibts auch bei uns wiki. Sogar recht einfach zu finden: Startseite → CSS-Eigenschaften → Spalten: column-…
Protipp: Blocksatz nur mit Silbentrennung (hyphens, gibts auch im wiki)
Matthias
-
@@Matthias Apsel:
nuqneH
Protipp: Blocksatz nur mit Silbentrennung (hyphens, gibts auch im wiki)
Heißt: Nur mit Modernizr (o.ä. feature detection). Und Abfrage, ob auch die Textsprache angegeben wurde.
Oder besser auf Blocksatz ganz verzichten. Web! = Print.
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
Om nah hoo pez nyeetz, Gunnar Bittersmann!
Und Abfrage, ob auch die Textsprache angegeben wurde.
Braucht man imho nicht. Wenn das lang-Attribut fehlt, arbeitet hyphens nicht. Zumindest im FF.
Matthias
--
Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Liter und Literaturpreis.
-
@@Matthias Apsel:
nuqneH
Und Abfrage, ob auch die Textsprache angegeben wurde.
Braucht man imho nicht. Wenn das lang-Attribut fehlt, arbeitet hyphens nicht. Zumindest im FF.
Eben!
Wenn die Sprache nicht angegeben ist und hyphens nicht arbeitet, sollte kein Blocksatz verwendet werden. (Zumindest nicht für Deutsch.)
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
-
-
-
-
-
-
Hello,
wir kann ich das besser zusammenfassen?
Muss ich wirklic zweimal "@media screen" schreiben?
Kann ich nicht auch direkt auf min-width prüfen?
Wo find ich 'was über diese Möglichkeiten?div.content { padding:20px; } div.content p:first-child { margin-top:0; } @media screen and (min-width:40em) { div.content { -moz-column-count:2; -moz-column-gap:1.0em; -webkit-column-count:2; -webkit-column-gap:1.0em; column-count:2; column-gap:1.0em; } } @media screen and (min-width:60em) { div.content { -moz-column-count:3; -moz-column-gap:1.0em; -webkit-column-count:3; -webkit-column-gap:1.0em; column-count:3; column-gap:1.0em; } }Liebe Grüße aus dem schönen Oberharz
Tom vom Berg