Fließtext zweispaltig darstellen?

tapferesschneiderlein · 08.03.2006, 11:20

Hallo,

ich möchte einen längeren Textabschnitt (seitenweise) zweispaltig darstellen lassen, finde aber keine CSS-Eigenschaft dafür.

Code:

<style>
.fliesztext {
    /* was muß hier hin? */
}
</style>

<div id="normal">
    Hier steht normaler, einspaltiger Text.
</div>

<div class="fliesztext">
    Hier steht ein laaaanger Text, der zweispaltig dargestellt werden soll. Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla ...
</div>

Hat jemand einen Tip, wie muß ich vorgehen?

XLB · 08.03.2006, 11:46

Schau dir mal "float" an ...

tapferesschneiderlein · 08.03.2006, 11:51

Ja, habe ich schon, weiß aber nicht, wie ich es hier einsetzen könnte. Dafür bräuchte ich ja ein zweites DIV-Element, an dem der Fließtext dann vorbeifließen könnte. Es gibt ja aber nur den einen Container ...

09.03.2006, 13:35

Das ist mit den momentanen CSS Eigenschaften nicht machbar.
Mit CSS 3 soll das möglich werden, aber bis dahin wird noch etwas Zeit vergehen. (Auch wenn Firefox 1.5 das Modul mitlerweile unterstützen soll, fehlt immer noch Support in anderen Browsers.).

Alternativ kannst du Javascript varianten verwenden, welche den text automatisch in 2 Spalten aufteilen.

Dich dürfte dieser Artikel interessieren:
http://www.alistapart.com/articles/css3multicolumn/

09.03.2006, 14:32

Hallo,

mit einem Trick könnte es klappen:

Code:

<DIV style="width:800px;">
<blockquote class="links">text 1.Hälfte</blockquote><blockquote class="rechts">2. Texthälfte</blockquote>
<style type="text/css">
.links{display:block;float:left;text-align:left;width:300px;}
.rechts{display:block;float:right;text-align:left;width:300px;}
</style>
</DIV>

tapferesschneiderlein · 09.03.2006, 16:32

Nee, das wird nix.
1. habe ich ja nur *einen* fortlaufenden Fließtext in *einem* DIV-Container,
2. würde bei obiger Methode erst die ganze erste Hälfte (A) -- wenn man überhaupt genau die Mitte träfe -- des Textes komplett links, die zweite Hälfte (B) komplett rechts dargestellt. Im Ausdruck also ungefähr so:

Code:

+-----------+-----------+
|           |           |
|   AAAAAA  |  BBBBBB   |
|   AAAA    |  BBBBBB   |
|   AAAAA   |  BBBB     |
|   AAAAAA  |  BBBBB    |
|   AAAAA   |  BBBBBB   |
|   AAAAAA  |  BBBB     |
|   AAAA    |           |
|   AAAAA   |  BBB      |
|   AAAAAA  |  BBBB     |
|   AAAAA   |  BBBBBB   |
|   AAAAAA  |  BBBBB    |
|   AAAAAA  |  BBBBBB   |
|           |           |
+-----------+-----------+

+-----------+-----------+
|           |           |
|   AAAAAA  |  BBBBBB   |
|   AAAA    |  BBBBBB   |
|   AAAAA   |  BBBB     |
|   AAAAAA  |  BBBBB    |
|   AAAAA   |  BBBBBB   |
|   AAAAAA  |  BBBB     |
|   AAAA    |  BBBBB    |
|   AAAAA   |  BBB      |
|   AAAAAA  |  BBBB     |
|   AAAAA   |  BBBBBB   |
|   AAAAAA  |  BBBBB    |
|   AAAAAA  |  BBBBBB   |
|           |           |
+-----------+-----------+

+-----------+-----------+
|           |           |
|   AAAAAA  |  BBBBBB   |
|   AAAA    |  BBBBBB   |
|   AAAAA   |  BBBB     |
|   AAAAAA  |  BBBBB    |
|   AAAAA   |  BBBBBB   |
|   AAAAAA  |  BBBB     |
|   AAAA    |           |
|   AAAAA   |  BBB      |
|   AAAAAA  |  BBBB     |
|   AAAAA   |  BBBBBB   |
|   AAAAAA  |  BBBBB    |
|   AAAAAA  |  BBBBBB   |
|           |           |
+-----------+-----------+

Ich brauche aber

Code:

+-----------+-----------+
|           |           |
|   AAAAAA  |  AAAAAAA  |
|   AAAA    |  AAAAAAA  |
|   AAAAA   |  AAAAAA   |
|   AAAAAA  |  AAAAAAA  |
|   AAAAA   |  AAAAAA   |
|   AAAAAA  |  AAAAAAA  |
|   AAAAAAA |  AAAAAAA  |
|   AAAAA   |  AAAAA    |
|   AAAAA   |  AAAAAAA  |
|   AAAAAA  |  AAAAAAA  |
|   AAAA AA |  AAAAAA   |
|   AAAA    |  AAAAAAA  |
|           |           |
+-----------+-----------+

+-----------+-----------+
|           |           |
|   AAAAAA  |  BBBBBB   |
|   AAAA    |  BBBBBB   |
|   AAAAA   |  BBBB     |
|   AAAAAA  |  BBBBB    |
|   AAAAA   |  BBBBBB   |
|   AAAAAA  |  BBBB     |
|   AAAA    |  BBBBB    |
|   AAAAA   |  BBB      |
|   AAAAAA  |  BBBB     |
|   AAAAA   |  BBBBBB   |
|   AAAAAA  |  BBBBB    |
|   AAAAAA  |  BBBBBB   |
|           |           |
+-----------+-----------+

+-----------+-----------+
|           |           |
|   BBBBBB  |  BBBBBB   |
|   BBBB    |  BBBBBB   |
|   BBBBB   |  BBBB     |
|   BBBBBB  |  BBBBB    |
|   BBBBB   |  BBBBBB   |
|   BBBBBB  |  BBBB     |
|   BBBB    |           |
|   BBBBB   |  BBB      |
|   BBBBBB  |  BBBB     |
|   BBBBB   |  BBBBBB   |
|   BBBBBB  |  BBBBB    |
|   BBBBBB  |  BBBBBB   |
|           |           |
+-----------+-----------+

M3g4Star · 09.03.2006, 16:54

Tja das kanns tmit php realisieren .. wenn eine gewisse länge erreicht ist muss zunächst eine neue Spalte angefangen werden und dann als nächstes ne neue Zeile !

Musstes halt mit umwegen machen ...

aber hoffe verstehst meine "tabellen" lösung ... ???

tapferesschneiderlein · 09.03.2006, 17:51

Da PHP auf dem Server nichts über die Seiten- und Schriftgröße des Browsers weiß, geht das auch nicht.

Aber xardies Tip habe ich probiert. Es geht. Firefox >= 1.5 interpretiert vor der Einführung von CSS3 z. B. folgendes korrekt:

Code:

<style>
.fliesztext {
    /* ***************** HIER ***************** */
    -moz-column-count: 2;
    -moz-column-gap: 2em;
    /* **************************************** */
}
</style>

<div id="normal">
    Hier steht normaler, einspaltiger Text.
</div>

<div class="fliesztext">
    Hier steht ein laaaanger Text, der zweispaltig dargestellt werden soll. Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla ...
</div>

09.03.2006, 22:23

wie gesagt, schau dir den link den ich gepostet habe nochmal ausführlicher an. dort steht etwas weiter unten auch was zu javascripts die sowas auch halbwegs browserkompatibel realisieren.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
tabelle in 3 Spalten richtig darstellen	test022	PHP Tipps 2007	15	28.03.2007 15:38
nicht formatierten Text in mehreren Spalten darstellen		PHP-Fortgeschrittene	4	17.02.2006 10:55
Statistik grafisch darstellen	havok	PHP Tipps 2007	14	19.12.2005 19:19
PHP MySQL Projekt Grafisch Darstellen ? Wie und Womit ?	Cyberbob_at_tot	Off-Topic Diskussionen	8	03.11.2005 14:28
zeitraum darstellen	seven-12	PHP Tipps 2005-2	4	02.11.2005 08:32
Html-Emails im Browser korrekt darstellen	Andreas	Beitragsarchiv	0	15.08.2005 12:01
Daten aus der Datenbank in 3 Spalten pro Zeile darstellen?	ThaRider	PHP Tipps 2005-2	7	14.07.2005 23:00
Sourcecode darstellen mit php	papalangi	PHP Tipps 2005	7	07.05.2005 22:28
PHP Code farblich darstellen...		PHP Tipps 2004-2	12	02.12.2004 11:52
schriftgröße darstellen		PHP Tipps 2004	1	03.11.2004 20:14
[Erledigt] schriftgröße darstellen		HTML, Usability und Barrierefreiheit	2	03.11.2004 12:35
Brüche darstellen		PHP-Fortgeschrittene	15	23.09.2004 20:55
ACCESS Datenbank in Homepage darstellen !! --Hilfe--		PHP Tipps 2004	7	29.06.2004 17:58
Javascript darstellen		HTML, Usability und Barrierefreiheit	1	25.06.2004 06:55
datenbank result seitenweise darstellen		PHP Tipps 2004	1	14.06.2004 18:02


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

08.03.2006, 11:46
XLB Erfahrener Benutzer Registriert seit: 31.07.2005 Beiträge: 1.126 PHP-Kenntnisse: Fortgeschritten	Schau dir mal "float" an ...

08.03.2006, 11:51
tapferesschneiderlein Erfahrener Benutzer Registriert seit: 30.06.2004 Beiträge: 619	Ja, habe ich schon, weiß aber nicht, wie ich es hier einsetzen könnte. Dafür bräuchte ich ja ein zweites DIV-Element, an dem der Fließtext dann vorbeifließen könnte. Es gibt ja aber nur den einen Container ...

09.03.2006, 13:35
Gast Beiträge: n/a	Das ist mit den momentanen CSS Eigenschaften nicht machbar. Mit CSS 3 soll das möglich werden, aber bis dahin wird noch etwas Zeit vergehen. (Auch wenn Firefox 1.5 das Modul mitlerweile unterstützen soll, fehlt immer noch Support in anderen Browsers.). Alternativ kannst du Javascript varianten verwenden, welche den text automatisch in 2 Spalten aufteilen. Dich dürfte dieser Artikel interessieren: http://www.alistapart.com/articles/css3multicolumn/

09.03.2006, 16:54
M3g4Star Erfahrener Benutzer Registriert seit: 23.08.2007 Beiträge: 1.510	Tja das kanns tmit php realisieren .. wenn eine gewisse länge erreicht ist muss zunächst eine neue Spalte angefangen werden und dann als nächstes ne neue Zeile ! Musstes halt mit umwegen machen ... aber hoffe verstehst meine "tabellen" lösung ... ???

09.03.2006, 22:23
Gast Beiträge: n/a	wie gesagt, schau dir den link den ich gepostet habe nochmal ausführlicher an. dort steht etwas weiter unten auch was zu javascripts die sowas auch halbwegs browserkompatibel realisieren.