Text mehrspaltig gestalten?

Hi!s

Du könntest mit dem CSS-Attribut "columns" arbeiten, siehe dazu hier: CSS3 module: Multi-column layout
Nachteil: Es handelt sich um eine CSS3-Eigenschaft. kA welche Rendering-Engines das schon darstellen können. Die des IE wohl frühestens 2010-2015 ;-)

Ernsthaft: Derzeit gibt es keine ernsthafte HTML/CSS-Lösung, um Text mehrspaltig anzuordnen. Du könntest aber entweder mit Tabellen arbeiten (unschön) oder mit verschiedenen DIV-Containern (auch nicht sonderlich schön)...

LG
Dominik

Moin moin!

Zitat von blogpartei

Und mit divs zu arbeiten scheint auch deutlich aufwändiger pro Artikel zu sein als ein simples Schreiben des Textes in zwei Blöcken... Hmmm... Dann muss ich das wohl erstmal begraben als Idee :)

So schwierig ist das auch nicht. Beim Schreiben (nicht im WYSIWYG-Editor, bzw. in der Code-Ansicht desselben) fügst du am Anfang deines Beitrages folgendes HTML-Stück ein:

<div class="text-column-left">

Ganz ans Ende kommt dann noch ein

</div>

Und igendwo mittig noch ein

</div>
<div class="text-column-right">

Abschließend fehlt noch einmalig in der style.css diese DIV-Container mit einem Layout anzupassen (Anpassungen sind wohl noch nötig, getestet hab ich es (noch) nicht):

.text-column-left, .text-column-right {
    width: 50%;
    margin: 0;
}
.text-column-left {
    float: left;
    padding-right: 0.5em;
}
.text-column-right {
    float: right;
    clear: both;
    padding-left: 0.5em;
}

Die Schwierigkeit liegt halt darin, genau abzupassen, wo du das HTML-Mittelstück einsetzen sollst... Denn je nach letztendlich eingesetztem Font verändert sich auch die Textlänge und der User bekommt zwei unterschiedlich lange Spalten...

LG
Dominik

guck doch mal bei texto.de
da solltest du was finden...
ist allerdings viel zu lesen:mrgreen:

ansonsten guck mal bei Was mit WordPress so alles geht ... » BlogPimp
da findest du garantiert ein Theme, so wie du es möchtest, einfach ansehen, testen und code nehmen

öhm... drei spalten beziehen sich nicht auf dein angedachtes Textlayout, dann hättest 4 + 1 im sinn *nochmal nachrechnet*

Zitat von Karbrüggen

Moin moin!

So schwierig ist das auch nicht. Beim Schreiben (nicht im WYSIWYG-Editor, bzw. in der Code-Ansicht desselben) fügst du am Anfang deines Beitrages folgendes HTML-Stück ein:

PHP

<div class="text-column-left">

Ganz ans Ende kommt dann noch ein

PHP

</div>

Und igendwo mittig noch ein

PHP

</div>
<div class="text-column-right">

Abschließend fehlt noch einmalig in der style.css diese DIV-Container mit einem Layout anzupassen (Anpassungen sind wohl noch nötig, getestet hab ich es (noch) nicht):

Code

.text-column-left, .text-column-right {
    width: 50%;
    margin: 0;
}
.text-column-left {
    float: left;
    padding-right: 0.5em;
}
.text-column-right {
    float: right;
    clear: both;
    padding-left: 0.5em;
}

Alles anzeigen

Die Schwierigkeit liegt halt darin, genau abzupassen, wo du das HTML-Mittelstück einsetzen sollst... Denn je nach letztendlich eingesetztem Font verändert sich auch die Textlänge und der User bekommt zwei unterschiedlich lange Spalten...

LG
Dominik

Alles anzeigen

hallo Dominik,
ich habe deinen Tipp heute bei mir ausprobiert. Funktioniert gut, bis auf die tatsache, dass die zweite Spalte erst am ende der ersten Spalte beginnt, d.h., rechts neben der ertsen Spalte (links) bleibt ein Freiraum. Wie bringe ich nun die rechte Spalte dazu, oben zu beginnen?

Zitat von Karbrüggen

Code

.text-column-left, .text-column-right {
    width: 15em; 
    text-align: justify; /* schönheitsreperatur ;) */
}
.text-column-left {
    float: left;
    padding-right: 0.5em;
}
.text-column-right {
    float: [COLOR=Lime]left[/COLOR]; /* left weils sonst nicht um das linke element fließt*/
    padding-left: 0.5em;
}

Alles anzeigen

sollte jetzt funktionieren