Text in div-container soll ab bestimmter Breite des container 2-spaltig dargestellt werden

    Bisher hatte ich eine Lösung, die ganz gut funktioniert hat, bei der sich aber die Breite auf die screenwidth bezog und per @media-Kondition leicht gesteuert werden konnte.

    Besonders schön war, dass beide Spalten immer gleich lang waren, egal wie der Text sich darin verteilt hat! Sogar bei Bedarf konnte ich eine vertikale Trennlinie zwischen die Spalten ziehen, die natürlich bei einspaltiger Darstellung verschwand.


    Leider gibt es auch die Notwendigkeit, nicht nur den main-content in manchen Webseiten darzustellen, sondern auch eine Seitenspalte. Die Breite der Seitenspalte würde aber fälschlich bei einer @media-Kondition mit einbezogen. Das führt dann zu viel zu schmalen Spalten im main-content, wenn die Seitenspalte angezeigt wird.


    Hier ein Ausschnitt aus dem CSS, das mittels @media gut funktioniert hat und sogar für einen automatisch eingefügten Abstand zwischen den Spalten gesorgt hatte:


    Um die viel zu kleinen Spalten zu vermeiden, darf sich die Kondition nicht mehr mittels @media screenwidth auf die darstellbare Breite insgesamt beziehen, sondern muss sich auf die Breite des div containers ".row-cl" beziehen.


    Erst wenn "row-cl" breiter als 480px ist, soll zweispaltig dargestellt werden.


    Frage: Wie kann ich mittels min-width oder max-width Definitionen oder mit anderen CSS-Möglichkeiten mein Ziel erreichen?

    Hmmmm, habe ich mich missverständlich mit meinem Anliegen ausgedrückt?


    Sicherheitshalber noch mal nur die Beschreibung der Schwierigkeit:

    • Die Website soll ab ca. 750px screenwidth eine rechte Spalte einblenden.
    • Der Main-Content soll, um den Text lesefreundlich zu halten, ab einer Breite des Main-Content-Container von ca. 480px eine zweispaltige Darstellung des Main-Content bieten.


    Mache ich die zweite Bedingung, die sich ja nur auf den Main-Content bezieht, ebenfalls von @screenwidth abhängig, so wird

    der Main-Content schlagartig recht breit dargestellt,

    sobald die rechte Spalte wegfällt. Gleichzeitig verhindert die @screen media-Regel, dass der Main-Content weiterhin zweispaltig dargestellt wird. Die Zeilenlängen des Text sind zu lang.


    Auch bei bestmöglicher Wahl der @media-Grenzen werden die Spalten im Main-Content dann schlagartig zu schmal,

    sobald die rechte Spalte hinzu kommt.


    Ein erster Lösungs-Ansatz vielleicht:

    die zweispaltige Darstellung sollte von der Breite des main-content Container abhängig sein.

    Leider gibt es dafür keine @media-Regel. Aber evtl. könnte man mit der Kombination min-width oder max-width

    und display: none etwas gestalten?


    Die Verknüpfung des Screenwidth-Status mit der zweispaltigen Darstellung wäre auch deshalb schwierig, weil die meisten Webseiten gar keine Elemente in einer rechten Spalte haben. Und dieser Zustand lässt den Main-Content breit werden, ohne dass dies durch eine "CSS-Abfrage" erkannt werden kann.


    Vielleicht müsste man in die template.php eingreifen und dort feststellen, ob eine rechte Spalte erschaffen wird. Wenn ja, erzeugt diese PHP-Datei eine CSS-Klasse, die in Verbindung mit Screenwidth eine Steuerung der Zweispaltigkeit erlaubt? – Oder löst man so etwas lieber mit JS?

    Ohne Beispiel und klarere Beschreibung wird es schwierig mit der Unterstützung.


    Ja, Media Queries beziehen sich immer auf das gesamte Dokument und nicht einen Teilbereich. Bei Grid-Systemen nutzt man dafür am besten eigene Breakpoint-Bereiche (min-width und max-width) und adressiert die Spalten (column) mit einer neuen Klasse auf der row, entsprechend könntest du es auch umsetzen. Mit Javascrippt ist das natürlich auch machbar.


    Warum nutzt du nicht ein vorhandenes Grid oder einfach Bootstrap?

    Ich ahnte nicht, dass weitere Angaben für die Beantwortung nötig wären. Ich nutze das Protostar Template mit der Auswahl "FluidDesign". Dies beruht auf Bootstrap 2.3.* und hat ein 12-spaltiges Grid.

    Der Main-Content erhält entweder 9 oder die vollen 12 Spalten, abhängig davon, ob die rechte Seitenspalte genutzt wird.


    Ich nutze also zwar das Grid, weiß aber nicht, wie ich Bootstrap oder andere Techniken für meine Aufgabe nutzen kann. Deshalb ja meine Frage hier. :)


    Meine Experimentier-Website ist hier:

    Da inzwischen rund 2/3 meiner Besucher mit Mobilgeräten kommen und nur 1/3 via Desktop, verliert allmählich die spaltige Darstellung an Bedeutung. Sie soll ja nur die Lesefreundlichkeit sicher stellen, bevor die Zeilen zu lang werden.

    Irgend eine template-eigene Abfrage zwingt sowieso bei allen Mobilgeräten zu einer Darstellung nur mit Main-Content = 1 Spalte, auch wenn das Gerät deutlich über 1200px screenwidth hat (was mich aber nicht stört).

    Der beste Ansatz wäre erst einmal, die cl-Grid-Klassen durch Bootstrap 2 zu ersetzen. Soll das ganze über die Möglichkeiten von BS2 hinausgehen, könnte man anschließend eigenen Klassen hinzufügen und dafür CSS erzeugen.


    Im Spoiler steht es, ändere einfach das HTML so ab.


    Das Blog-Layout wurde vorher schon mal abgeändert, die cl-Klassen stammen aus einer viewport-width.css, das ist ja kein normales Protostar mehr, weder gibt es dort die Klassen mit dem cl, noch die viewport-width.css.


    Des weiteren arbeitest du nicht mit einer Kopie des Protostar, wie es empfohlen wird, beim nächsten Update könnten deine Änderungen verloren gehen.

    Das ist richtig! Deshalb ja "Experimentier-Website". Auch die template.php (default.php) des Protostar ist verändert. Und ide viewport-width.css ist einfach auch nur eine user.css oder custom.css oder wie man sie nennen mag, die per @import ins template.css eingefügt wird.


    Da manche Klassen wie z.B. "content" "container" usw. bereits anderweitig vergeben sind, habe ich für die meisten der von mir angelegten Klassen das Postfix "-cl" angehängt.


    Aktuell ist ein Entwickler damit beschäftigt, bestimmte Teile zu programmieren, wodurch auch viel JS in die template.php hinein gekommen ist.

    Und wenn das Ganze mal fertig ist, werde ich sicher auch das Template als Kopie anlegen. Aktuell hat es sich nun mal so ergeben.


    Das Ganze ändert aber nix daran, dass ich jetzt mmer noch nicht weiß, wie ich zum Ziel komme. Irgend was mit Bootstrap soll deiner Äußerung nach die Lösung bringen, das habe ich bisher verstanden.

    Na, du wirst doch wohl wissen, wo du das HTML her hast, was du hier in den Beitrag stellst, siehe deinen ersten Beitrag, und hast sicher schon in meinen Spoiler geschaut?

    Code
    Im HTML sieht dann die Anwendung so aus:
<h3 class="head-bg">Erster Untertitel</h3>
    <div class="row-cl">
        <div class="column-cl right-cl">
            <p>Text in der linken Spalte</p>
        </div>
        <div class="column-cl left-cl">
            <p>Text in der rechten Spalte</p>
        </div>
   </div>

    Ansonsten frage doch mal denjenigen, der da bereits geschraubt hat. Wenn du nämlich selbst nichts am HTML änderst, aber dein CSS auf geänderten Code aufbaust, wird das ganze irgendwann auch hier zeitintensiv und kompliziert.

    OK, ich muss gleich wieder in meine Praxis und vorher Mittagessen. Ich will mir das in Ruhe anschauen, hab aber so viel verstanden, dass ich mit "class span-6" usw. etwas erreichen kann, weil ich so eine Spalte aus dem Grid oder mehrere erwischen kann.


    Davon hab ich aber noch nicht eine Erkennung, wie breit denn die aktuelle Main-Content-Spalte ist. Wird sie breiter als ca. 480px, würde ich gerne 2-spaltige Darstellung erreichen.

    Die entsprechenden Media Queries befinden sich in der template.css, hier solltest du den richtigen finden und in der custom.css damit die Klasse überschreiben, bei der du den Breakpoint anders haben möchtest.

    Code
    @media (min-width: 481px) and (max-width: 979px) {
    .row-fluid .span6 {
        width: 48.936170208%;
        *width: 48.882978718638%;
    }
}

    Danke addi

    Jetzt bin ich erst wieder dazu gekommen, deine Tipps auszuprobieren. Die Spalten funktionieren jetzt endlich unter allen Variationen, wie ich es mir wünsche...


    allerdings mit zwei deutlichen Schönheitsfehlern, die ich per Screenshot hier zeige:

    Die beiden Textspalten sind aus mir unerklärlichen Gründen nicht gleich breit. Im Screenshot ist die linke 260px und die rechte 214px. Dabei nutzt die rechte Spalte deutlich den verfügbaren Platz nicht aus.

    Außerdem möchte ich, dass der Abstand zwischen den Spalten etwas größer ist.


    Wie kann ich diese beiden Fehler beheben?

    span6 + span5 = 11, daher ist rechts noch eine Spalte übrig, es muss beim 12er-Raster natürlich immer aufgefüllt werden.


    Der Abstand kann bei Bootstrap 2 mit einem bereits fix berechneten Grid (bootstrap.css bzw. bootstrap.min.css) nicht mehr so einfach und nur durch Überschreiben geändert werden. Die saubere, aber auch zeitaufwändigere Lösung wäre hier, Boostrap 2 per Less-Kompiler neu zu berechnen, wobei Breiten und Abstände in der variables.less eingestellt werden.

    addi Ich hab's jetzt mal mit zwei mal span6 ausprobiert und jetzt funktioniert es. Das div mit span5 hatte ich ja nur aufgrund deiner Anregung übernommen, ohne über das Grid nachzudenken.


    Herzlichen Dank! Da hätte ich lange dran gesucht.


    Und jetzt hab ich soeben gerade geschafft, den Abstand zwischen den beiden Textspalten zu vergrößern. Ich hatte mir ja bereits "Abstandshalter" mit den Klassen right-cl und left-cl gebastelt. Macht also in der linken Spalte rechts einen Abstand und in der rechten Spalte nach links einen Abstand. So bleibt es symmetrisch. Beides bringt ein padding von jeweils 1em. Ich nutze also:

    Code
    div class="row-fluid right-cl"

div class="row-fluid left-cl"

    Herzlichen Dank für deine hilfreichen Tipps!

    Da hab ich mich zu früh gefreut:

    Sobald einspaltig dargestellt wird, ragt der margin des Textblocks, der sonst die linke Spalte gebildet hätte, nach rechts aus dem Layout unsichtbar heraus.

    Aber die bisher rechte Spalte erhält durch das padding eine unerwünschte Einrückung, die natürlich ziemlich stört, je schmaler die einspaltige Darstellung wird.


    Was kann ich tun, damit die beiden Abstände, die ich für die Spalten definiert habe, nur dann vom Browser beachtet werden, wenn tatsächlich zwei Spalten angezeigt werden und keine Wirkung haben, wenn nur einspaltig angezeigt wird?


    Oder gibt es eine elegantere Möglichkeit, den Abstand zwischen den Spalten zu vergrößern? Z.B. mit dem CSS-column-gap property?