Texte ausrichten

[Jochen]

Hallo, das folgende Codeschnipsel erzeugt nachfolgende Ansicht

    <nav>
      <ul>
        <li><a tabindex="0" aria-current="page">Startseite</a></li>
        <li><a href="preise.html">Unsere Preise</a></li>
        <li><a href="inhalt.html">Bilder von unseren Produkten</a></li>
        <li><a href="kontakt.html">Kontakt und Impressum</a></li>
      </ul>
    <p>Unsere Filialen</p>
      <ul>
        <li><a href="https://a.test.test">Filiale1</a></li>
        <li><a href="https://b.test.test">Filiale2</a></li>
      </ul>
    </nav>    

Wie kann ich

• den Zeilenabstand vor und nach "Unsere Filialen" verkleinern
• den Text "Unsere Filialen" einrücken bis unter/über den Punkten?

[Matthias Scharwies]

Servus!

Wie kann ich

• den Zeilenabstand vor und nach "Unsere Filialen" verkleinern
• den Text "Unsere Filialen" einrücken bis unter/über den Punkten?

Jedes HTML-Element hat einen Außen- und Innenabstand. Den kannst du mit margin und padding verändern.

CSS/Tutorials/Boxmodell/Außen-_und_Innenabstand

Herzliche Grüße

Matthias Scharwies

[Felix Riesterer]

Lieber Jochen,

auch wenn Dein <p>-Element etwas nach links verrückt notiert ist, kannst Du es doch mit dem Selektor nav > p adressieren:

nav > p {
  color: red;
}

Anstelle einer Schriftfarbe suchst Du natürlich das, was @Matthias Scharwies schon verlinkt hat.

Liebe Grüße

Felix Riesterer

[Jochen]

Hallo,

noch eine Frage.

Wie kommt der Block 'Angebot' in dem Beispiel Schreinerei Meier an den rechten rechten Rand? Ich habe keine Positionsangabe zu dem aside gefunden?

Schönen Gruß

Jochen

[MrMurphy]

Das umgebende section-Element ist mittels "display: grid;" in zwei Spalten unterteilt.

Die rechte Spalte ist 12em breit, die linke nimmt mittels "1fr" den Rest der verfügbaren Breite ein.

[Rolf B]

Hallo Jochen,

hast Du schon unseren Artikel über das Arbeiten mit dem Seiteninspektor gefunden? Der zeigt Dir, wie Du vorhandenen CSS Eigenschaften der HTML-Elemente anzeigen kannst.

In unserem Artikel über die Kaskade erklären wir, aus welchen Quellen der Browser Style-Informationen holt und wie sie priorisiert werden. Vor allem sind das: das User-Agent Stylesheet (oder Browser-Styles), das Autoren-Stylesheet (deine eigenen Styles) und style-Attribute im HTML.

Was bei dem p Element vielleicht verwirren kann, ist die Verwendung von Eigenschaftsnamen, die relativ neu sind:

Da steht margin-block-start und margin-block-end. Gemeint ist hier der Rand in "Block"-Richtung. Bei westlichen Schriften ist das die vertikale Achse, also margin-top und margin-bottom. Das ist etwas, was vor ein paar Jahren als „logische Eigenschaften“ (basierend auf der Schrift-Richtung, als Gegensatz zu physischen Eigenschaften, die auf dem Bildschirm basieren) eingeführt wurde. Unser Wiki weiß was dazu.

Wenn Du den Abstand, den der Browser um ein p Element macht, verringern willst, musst Du diese Ränder verändern.

Entweder so, mit den physischen Eigenschaften (nicht „physikalisch“, Matthias!):

margin: 0.5em 0;

oder mit Verwendung der logischen Eigenschaft:

margin-block: 0.5em;

Aber das reicht noch nicht. Der Inspektor zeigt, dass das ul Element ebenfalls ein margin-block von 1em hat. Wenn ul und p aufeinander folgen, ohne dass weitere Elemente im Spiel sind, dann verschmelzen der untere Rand des ul und der obere Rand des p, d.h. zwischen oberer Liste und p Element ist 1em Abstand, selbst dann, wenn Du den margin des p auf 0 setzt. Du musst den Block-Margin des ul ebenfalls reduzieren.

Das Einrückung des p unter die Punkte ist nicht schön machbar. Der Inspektor zeigt ein padding-inline-start (=padding-left) von 40px für das ul Element, aber das ist die Einrückung für den Text der li Elemente. Die Punkte befinden sind im Padding-Bereich. Diese Punkte kann man mit dem ::marker-Pseudoelement zwar etwas beeinflussen, aber nur in geringem Maße. Das ist wirklich ärgerlich, denn so hast Du keine Möglichkeit, genau anzugeben, wo die Punkte sind und du hast auch keine Information, wo sie genau sind.

Natürlich kannst Du dem p-Element per try-and-error einen margin-left geben, der für Dich gut aussieht. Aber möglicherweise kommt dann ein anderer Font oder eine andere Skalierung vorbei und es passt wieder nicht mehr. Damit musst Du leben.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Was bei dem p Element vielleicht verwirren kann, ist die Verwendung von Eigenschaftsnamen, die relativ neu sind: margin-block-start und margin-block-end.

Verwirrend vielleicht für jene, die sich schon etwas mit CSS beschäftigt haben. Für Neulinge dürften die logischen Eigenschaften nicht mehr verwirrend sein als die physischen.

---

margin: 0.5em 0;

oder mit Verwendung der logischen Eigenschaft:

margin-block: 0.5em;

Aber das reicht noch nicht.

Richtig. Was da auch noch fehlt, geht aber in eine ganz andere Richtung als du dachtest. Nämlich, dass es nicht sinnvoll ist, den Abstand nach oben und nach unten gleichermaßen zu verringern.

Der Inhalt des p-Elements ist die Überschrift für die nachfolgenden Punkte. (Was nicht heißt, dass es ein h…-Element sein sollte.)

Diese Zusammengehörigkeit sollte natürlich visuell sichtbar gemacht werden: Das p-Element muss nach oben (zur vorigen Liste) einen größeren Abstand haben als nach unten (zur zugehörigen Liste). (Gestaltpsychologie, Gesetz der Nähe)

---

Natürlich kannst Du dem p-Element per try-and-error einen margin-left geben, der für Dich gut aussieht.

Sogenannte magic numbers. Ja, die sollte man tunlichst vermeiden.

Aber möglicherweise kommt dann ein anderer Font oder eine andere Skalierung vorbei und es passt wieder nicht mehr. Damit musst Du leben.

Es gibt so einiges, womit man leben muss. Die Ausrichtung der Listenpunkte gehört nicht dazu. Die sind einsfixdrei mit dem Text auf Linie gebracht: mit list-style-position: inside

Dort auch zu erkennen: der größere Abstand der Zwischenüberschrift nach oben.

Und auch: Abstand der einzelnen Listenpunkte voneinander, damit bei mehrzeiligen Listenpunkten die zusamengehörenden Zeilen als zusamengehörend wahrgenommen werden. (Gestaltpsychologie, Gesetz der Nähe) Symbolbild: Seite 4 von Bruce Springsteens Greatest Hits (Vinyl)

---

Hach ja, mehrzeilige Listenpunkte – die sehen bei list-style-position: inside unvorteilhaft aus. (Die Auskommentierung von min-width wegnehmen.)

Dem kann man mit per Pseudo-Element generierten Bullets begegnen.

Allerdings büßen da die li durch die geänderte display-Eigenschaft ihre Rolle als Listitems ein. Im Safari auch schon die Liste wegen list-style: none. Wenn die erhalten bleiben soll, müsste man diese explizit mit role-Attributen angeben. (Hab ich im Markup mal gemacht.)

Jolan tru

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Hach ja, mehrzeilige Listenpunkte – die sehen bei list-style-position: inside unvorteilhaft aus. (Die Auskommentierung von min-width wegnehmen.)

Dem kann man mit per Pseudo-Element generierten Bullets begegnen.

Allerdings büßen da die li durch die geänderte display-Eigenschaft ihre Rolle als Listitems ein. Im Safari auch schon die Liste wegen list-style: none. Wenn die erhalten bleiben soll, müsste man diese explizit mit role-Attributen angeben. (Hab ich im Markup mal gemacht.)

Ohne geänderte display-Eigenschaft kommt die Variante mit absoluter Positionierung aus. (Zu Risiken und Nebenwirkungen fragen Sie Ihre Webentwicklerin.)

Jolan tru

[Rolf B]

Hallo Gunnar,

jo, zwei Dumme, zwei ähnliche Gedanken. Ich hab float genommen, dann muss ich nicht so viel rumpositionieren 😉

Rolf

[Rolf B]

Hallo Gunnar,

danke für die Lesbarkeits-Hinweise.

Dem kann man mit per Pseudo-Element generierten Bullets begegnen.

Aber doch wohl nicht so. Das List-Item zur Flexbox machen, damit das Bullet separat steht? Und dafür in Kauf nehmen,

• dass der Inhalt des li nur ein einziges Element sein darf - heißt: ggf. ein technisches div hinzuzufügen ist?
• dass das List-Item kein display:list-item mehr hat und man die Rolle wieder dazu fummeln muss?

Dann doch lieber list-style:none und ein ::before-Item, das aus dem Flow genommen und passend positioniert wird. Bspw. mit float:left; und margin-left. Ein Problem für Safari? I beg to differ, as long as it's a nav. Oder doch eins? MDN widerspricht sich selbst. Es sei denn, list-style:none und list-style-type:none verhalten sich im Safari tatsächlich so unterschiedlich…

Navigationslisten, die Listen sind:

And now for something completely different

Rolf

[Fred]

Hallo,

evtl. mit description list

    <nav>
      <ul>
        <li><a tabindex="0" aria-current="page">Startseite</a></li>
        <li><a href="preise.html">Unsere Preise</a></li>
        <li><a href="inhalt.html">Bilder von unseren Produkten</a></li>
        <li><a href="kontakt.html">Kontakt und Impressum</a></li>
      </ul>
	  <dl>
	  <dt>Unsere Filialen</dt>
      <dd>
      <ul>
        <li><a href="https://a.test.test">Filiale1</a></li>
        <li><a href="https://b.test.test">Filiale2</a></li>
      </ul>
	  </dd>
	  <dl>
    </nav> 

	ul  {list-style-type: none; padding: 0; margin: 0; }
	dl, dd  {margin: 0;}
	dt {color: red; }

Codepen

Gruß Fred