markup-marcus: CSS Columns mit Zeilenraster

SELF-Forum

CSS Columns mit Zeilenraster

markup-marcus
– Informationen zu den Bewertungsregeln

Hallo zusammen, ich verwende CSS Columns und möchte in den Spalten ein gleichhohes Zeilenraster haben. Das Problem ist, dass ja der Border-Top/Bottom von sagen wir 2Pt die Width dazunimmt, so dass das Raster unterbrochen wird. Wie kann ich den Border einfach "drüberlegen", ohne dass die Width dazugenommen wird?

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. CSS Columns mit Zeilenraster

    Matthias Apsel
    – Informationen zu den Bewertungsregeln

    Hallo markup-marcus,

    Hallo zusammen, ich verwende CSS Columns und möchte in den Spalten ein gleichhohes Zeilenraster haben. Das Problem ist, dass ja der Border-Top/Bottom von sagen wir 2Pt die Width dazunimmt, so dass das Raster unterbrochen wird. Wie kann ich den Border einfach "drüberlegen", ohne dass die Width dazugenommen wird?

    Bitte entschuldige, dein Beitrag ist etwas wirr. Kannst du ein Online-Beispiel zeigen?

    Bis demnächst
    Matthias

    --
    Das Geheimnis des Könnens liegt im Wollen. (Giuseppe Mazzini)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. CSS Columns mit Zeilenraster

      markup-marcus
      – Informationen zu den Bewertungsregeln

      Z.B.: (Styles im Markup nur der Einfachheit wegen)

      <div style="-moz-columns: 2;">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<aside>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</aside>
<section><h1>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</h1><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p></section>
<p style="border-top: 2pt solid;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>

      Vergleicht man jetzt die 1. und 2. Spalte, sind ja in der 2. die Zeilen wegen des Border-Top 2Pt versetzt, also das Raster unterbrochen (Baselines von Spalte zu Spalte nicht mehr auf einer Höhe). Deswegen soll der Border einfach "drübergelegt" werden (ohne dass die Zeilen versetzt werden).

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. CSS Columns mit Zeilenraster

        Gunnar Bittersmann Homepage des Autors
        – Informationen zu den Bewertungsregeln

        @@markup-marcus

        Z.B.: (Styles im Markup nur der Einfachheit wegen)

        Dein Beispiel ist zu stark vereinfacht und lässt das Problem nicht erkennen. Außerdem war „Online-Beispiel, bitte!“ geasgt.

        Vergleicht man jetzt die 1. und 2. Spalte, sind ja in der 2. die Zeilen wegen des Border-Top 2Pt versetzt, also das Raster unterbrochen (Baselines von Spalte zu Spalte nicht mehr auf einer Höhe). Deswegen soll der Border einfach "drübergelegt" werden (ohne dass die Zeilen versetzt werden).

        Dem betreffenden Absatz einen um 2pt geringeren margin-top als sonst zu geben ist jetzt zu einfach?

        LLAP 🖖

        --
        „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
        „Hat auf dem Forum herumgelungert …“
        (Wachen in Asterix 36: Der Papyrus des Cäsar)
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln