✔ Text in Spalten darstellen

Status
Nicht offen für weitere Antworten.
S

Sturmi

Grünschnabel
Hallo
In meinem Website-Layout existiert ein Container, der aus zwei Spalten besteht.
Jetzt will ich es schaffen, den Text wenn die erste Spalte voll ist automatisch weiter in die zweite Spalte fließen zu lassen. Es soll also eine Art "Zeitungslayout" erreicht werden. In allen Satzprogrammen ist das ja kein Problem, aber im Webdesign?

Jetzt habe ich gehört, mit CSS3 Columns und dem Befehl "<p style="-moz-column-count: 2">Text</p> funktioniert das, aber eben nur in der allerneuesten Version des Firefox.
Also scheidet diese Lösung bereits aus.

Hat jemand einen besseren Vorschlag, wie ich an dieses Problem herangehen könnte?
Oder muss ich doch auf Tabellen oder zwei getrennte Container zurückgreifen?

Würde mich freuen, wenn mir jemand helfen könnte - denn ne Leuchte bin ich leider noch nicht in Sachen Web-Programmierung :-(
 
Derzeit ist es meines Wissens nicht möglich, auf Webseiten ein automatisch gleichverteilendes Spaltenlayout zu realisieren, ohne dieses Design auf bestimmte Browser zu beschränken.

Die Trennung, um annähernd gleich hohe Spalten zu erhalten, musst Du selber lösen, entweder von Hand, mit einer Serverseitigen Skriptsprache, wie PHP oder ggf. auch mit JavaScript.

Für die Spalten selbst musst Du aber nicht auf Tabellen zurückgreifen, sondern kannst auch auf die CSS-Eigenschaft float zurückgreifen.

Beispiel:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
    <meta http-equiv="Content-Type"
        content="application/xhtml+xml; charset=UTF-8" />
<title>Beispiel: Spalten</title>
<style type="text/css" media="all">
    #container {
        width:70%;
        margin:0 auto;
    }
    #container h1 {
        margin: 0 0 20px 0;
        padding:10px 0 0 0;
    }
    #container .column1 {
        float:left;
        width:44%;
        margin:0 3%;
    }
    #container .column2 {
        margin:0 3% 0 53%;
    }
</style>
</head>
<body>
<div id="container">
<div class="column1">
    <h1>Artikel</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque diam. Suspendisse potenti. Ut sapien. Cras commodo turpis ut metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque non arcu sed lacus dignissim vehicula. Duis tempus. Integer consequat metus a est convallis congue. Nunc porttitor. Morbi ipsum. Nullam faucibus lorem at felis.</p>
    <p>Ut vel odio at risus tincidunt imperdiet. Integer semper leo vel mi. Donec urna tellus, lobortis nec, luctus non, gravida in, dolor. Curabitur eros erat, volutpat sed, interdum in, varius vitae, velit. Phasellus varius felis. Nunc tempor, sapien sit amet porttitor tempus, libero erat lacinia ipsum, in dictum purus ligula ac nisi. Curabitur a lacus. Sed iaculis rutrum nunc. Pellentesque hendrerit odio ac odio. Donec porta augue sit amet magna. Fusce ut metus. Nulla facilisi. Sed eget lacus. Donec nibh. Pellentesque laoreet sem ut ipsum.</p>
    <h2>Theorie</h2>
    <p>Ut at tortor. Duis non orci eget ligula egestas aliquam. In hac habitasse platea dictumst. Cras nonummy commodo est. Aenean venenatis tincidunt diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut vitae metus. Sed enim ante, ornare at, cursus id, hendrerit vel, tortor. Mauris scelerisque, arcu vitae adipiscing convallis, massa nunc hendrerit tortor, ut ultrices ante erat quis metus. Suspendisse potenti. Praesent arcu. Integer ut est vel massa</p>
</div>
<div class="column2">
    <p>consectetuer interdum. Phasellus nisl nisi, tincidunt nec, tempor vulputate, sagittis nec, ligula. Vivamus eu felis ut nisl porttitor fringilla. Aliquam non elit vel urna euismod adipiscing. Donec tortor leo, auctor eu, pellentesque quis, auctor a, risus.</p>
    <p>Nullam a libero at nulla malesuada faucibus. Integer eget neque sed sapien nonummy lacinia. Nulla facilisi. In scelerisque, est eget tempus nonummy, massa leo imperdiet sem, vitae feugiat enim dui venenatis velit. Integer cursus fringilla purus. Donec porta turpis eu erat. Vestibulum tortor diam, dignissim vel, lobortis sed, facilisis nec, eros. Maecenas sollicitudin volutpat tellus. Suspendisse potenti. Etiam quis lacus non tortor laoreet tristique. Praesent suscipit lectus a ipsum. Nullam magna libero, fringilla vitae, interdum et, iaculis et, nisi.</p>
    <h2>Fazit</h2>
    <p>Phasellus a libero ac massa faucibus dictum. Proin neque erat, varius in, viverra sed, luctus aliquam, diam. Phasellus dui urna, dictum in, tristique at, semper at, sem. Integer felis enim, tempor ac, tempus at, malesuada quis, justo. Aenean id ligula nec eros posuere congue. Proin consectetuer condimentum massa. Mauris consequat diam id risus. Donec felis. Sed ut ligula. Nunc gravida. Sed sit amet risus. Quisque quam leo, lobortis eu, rhoncus et, fermentum vel, leo. Sed feugiat. Phasellus enim. Nullam dapibus. Donec quis augue. Etiam dapibus quam nec lacus. Pellentesque sed neque.</p>
</div>
</div>
</body>
</html>
Wenn man sich das Beispiel anschaut, wird man aber auch zugestehen müssen, dass es nicht so optimal aussieht, wie man es sich wünschen würde.

Gruß hpvw
 
Vielen Dank für die Hilfe - sie hat mir sehr weitergeholfen.
Es ist eigentlich schade, dass so etwas noch nicht geht, aber vielleicht tut sich da ja was in den nächsten Monaten...
Float ist aber auf jeden Fall die richtige Notlösung!:)
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück