Abstand zwischen Absätzen beeinflussen

[bejoro]

Hallo!

Ich verwende eine selbst modifizierte Variante des Designs "Zeus", das Folgende könnte aber auch für andere W2D CSS-basierende Designs interessant sein.

Wie beeinflusst man die Absatzabstände zwischen Textabsätzen, zu Aufzählungsabsätzen etc.?

In der style_content.css sind zwar die Formatierungen gespeichert, die Abstände werden dort jedoch nicht gesetzt.

Ich hätte sehr gerne mehr Kontrolle über die Absatzabstände.
Beispiel: der Absatzabstand zw. zwei Textabsätzen ist immer mindestens eine Leerzeile. Ein kleinerer Abstand geht nicht, das ist wohl irgendwie durch die page.ccml bestimmt (nehme ich an).

Könnte mir bitte jemand einen Tipp geben, wie man die page.ccml ändern muss, um die Absatzabstände z. B. in der style_content.css feiner und individueller festlegen zu können?

Lieben Dank.

[blue]

Wenn Du den Div Container kennst kannst Du z.B. mit margin-bottom 20px; einen Abstand zum nächsten Element erzwingen..

[bejoro]

Lieben Dank, blue.

Irgendwo in der page.ccml oder in einer anderen Datei wird noch ein zusätzlicher Abstand (Leerzeile) eingefügt, der nicht in der style_content.css definiert ist.

Ich habe nichts gefunden, wo diese Leerzeile oder zusätzlicher Abstand herkommt. Ansonsten könnte ich natürlich in der style_content.css die Abstände festlegen.

Das betrifft auch den Abstand zu folgenden Überschriften.

Wenn wir diesen zusätzlichen Abstand finden und evtl. entfernen könnten, dann wäre man frei in der Gestaltung über die CSS-Dateien.

Was meinst Du?

[blue]

Da wird nichts eingefügt...

Ein Absatz wird immer in einen <p>Inhalt</p> Container gelegt.
Ist eine Überschrift vohanden <h2>Überschrift</h2> , wird diese darüber angezeigt.
<p></p> Erzwingt natürlich immer eine neue Zeile... das verursacht den Abstand...

[bejoro]

Du hast recht!

Bei reinen Textabsätzen (ohne Bild) wird nichts eingefügt. Es verhält sich genauso als würde man reinen html-Code einfügen. Das passt.

Bei Absätzen mit Bild verhält es sich anders. Am Ende eines Absatzes, der ein Bild anzeigt, wird eine zusätzliche Leerzeile eingefügt.

Ich finde nur nicht die Stelle, wo diese Leerzeile erzeugt wird.

Die unterschiedlichen Abstände sehen einfach doof aus.

Meinst Du, Du kannst mir hierbei helfen?

[voodoo36]

Hallo, warum versuchst du das Zeus Design an dein altes bestehendes Design anzupassen?

[bejoro]

blue:
Irgendwie wird bei Textabsätzen mit Bild am Ende ein clear:both (Klasse clear) mit einem zusätzlichen nbsp eingefügt. Das verursacht möglicherweise die Leerzeile.

Hast Du bitte eine Idee, wie man diese Leerzeile vermeiden und es dem Erscheinungsbild/Abstand von reinen Textabsätzen angleichen kann?


voodoo36:
Die Anpassung ist soweit bereits vollzogen, soweit es mir sinnvoll erschien.

Die Frage nach der Problematik der unterschiedlichen Abstände bei Textabsätzen mit und ohne Bild hat ja nicht speziell mit "Zeus" oder dieser Anpassung zu tun sondern betrifft möglicherweise verschiedene CSS-Designs in W2D.

[bejoro]

Hallo blue,

die zusätzliche Leerzeile liegt eindeutig an folgendem Eintrag in der page.ccml. Hier wird über die Klasse "clearer", die in der style_content.css definiert ist, ein clear:both eingefügt, sobald es sich um einen Textabsatz mit Bild handelt.

page.ccml:

<cc:if cond="&para.sidepicture.uid">
<div class="clearer">&nbsp;</div>
</cc:if>

style_content.css:

#content .clearer {
    clear: both;
}

Kannst Du Dir eine Lösung denken, wie man das ohne das Erzeugen einer zusätzlichen Leerzeile hin bekommt?

Wäre super, wenn Du mir helfen könntest. Lieben Dank.

[blue]

Vielleicht so?

<cc:if cond="&para.sidepicture.uid">
<div class="clearer"></div>
</cc:if>

style_content.css:

#content .clearer {
    clear: both;
height: 0px;
}

[bejoro]

Lieben Dank, blue! Ich werde es ausprobieren.