Textformatierung zur Einrückung

[Laurenz]

Hallo, ein vermutlich einfach zu lösendes Problem zur Textformatierung mit CSS:

Nach einem einleitendem "zum Beispiel:" sollen Beispiele in Form einzelner Sätze folgen. Das erste Beispiel soll direkt nach "zum Beispiel:" stehen, die weiteren Beispiele jeweils in neuer Zeile, jedoch bündig direkt darunter an selber Stelle beginnen wie das erste Beispiel. Bei notwendigem Textumbruch im Beispiel soll der Text in der neuen Zeile ebenfalls bündig dort beginnen. Leerzeilen sollen nicht auftreten.

Wie bekomme ich das hin?

LG

[Tabellenkalk]

Hallo,

Wie bekomme ich das hin?

du suchst text-indent.

Gruß
Kalk

[TS]

Hello,

Wie bekomme ich das hin?

du suchst text-indent.

vermutlich im Zusammenspiel mit Selektoren?

Liebe Grüße
TS

[Tabellenkalk]

Hallo,

vermutlich im Zusammenspiel mit Selektoren?

Wie meinst du das jetzt? Gäbe es auch eine praktische Möglichkeit ohne Selektoren?

Gruß
Kalk

[TS]

Hello,

vermutlich im Zusammenspiel mit Selektoren?

Wie meinst du das jetzt? Gäbe es auch eine praktische Möglichkeit ohne Selektoren?

Standard bei CSS-Anfängern sind Classes. Oder habe ich da etwas verpasst?

Liebe Grüße
Tom S.

[Tabellenkalk]

Hallo,

Standard bei CSS-Anfängern sind Classes. Oder habe ich da etwas verpasst?

Ja. Klassenselektoren sind auch Selektoren...

Gruß
Kalk

[TS]

Hello,

Standard bei CSS-Anfängern sind Classes. Oder habe ich da etwas verpasst?

Ja. Klassenselektoren sind auch Selektoren...

Dann ergänze bitte: CSS -> Selektoren -> Kombinatoren

Liebe Grüße
Tom S.

[Gunnar Bittersmann]

@@TS

Standard bei CSS-Anfängern sind Classes.

Wenn das so ist, soll sich der Anfänger einen anderen Lehrer suchen. Sofort.

LLAP 🖖

[Laurenz]

Danke, Daran hatte ich schon gedacht. Vermutlich führt dieser Teil zum Erfolg:

  .datalist         { padding: 0; margin: 0; }
  .datalist li      { padding-left: 40px; text-indent: -40px; }
  .datalist li > *  { text-indent: 0; }

Aber an der genauen Umsetzung hapert es.

Ich bin bezügl. css völliger Neuling.

[Matthias Apsel]

Hallo Laurenz ,

CSS ist ohne das HTML, das es formatieren soll, ohne Wert. Am besten, du zeigst die Seite. Falls das nicht geht, erstelle ein online-Beispiel, etwa auf CodePen.

Bis demnächst
Matthias

[TS]

Hello,

Vermutlich führt dieser Teil zum Erfolg:

  .datalist         { padding: 0; margin: 0; }
  .datalist li      { padding-left: 40px; text-indent: -40px; }
  .datalist li > *  { text-indent: 0; }

Aber an der genauen Umsetzung hapert es.

Ja, die Richtung und Orientierung stimmen schon, nur die Schrittweite noch nicht ;-))

Die List-Items selber gehören ja immer zu einer Liste (ol, ul). Und diese werden dann eingerückt.

<ul>
    <li> 1 </li>
    <li> 2 </li>
    <li> 3 </li>

    <ul>
        <li> a </li>
        <li> b </li>
        <li> c </li>
    </ul>
</ul>

Nun kannst Du die <ul>s nach und nach mit einem eigenen Einzug versehen.

Dabei handelt es sich aber um keinen Kindselektor, denn das zweite <ul> ist ka ein Kind eines <li>, sondern um einen Nachfahrenselektor.

ul ul {
    text-indent: 2em;
}

ul ul ul {
    text-indent: 4em;
}

könnte also zum Erfolg führen.
Die echten™ CSS-Schlauberger hier haben bestimmt noch bessere Ideen auf der Pfanne ;-)

Liebe Grüße
Tom S.

[Matthias Apsel]

Hallo TS,

<ul>
    <li> 1 </li>
    <li> 2 </li>
    <li> 3 </li>

    <ul>
        <li> a </li>
        <li> b </li>
        <li> c </li>
    </ul>
</ul>

Dabei handelt es sich aber um keinen Kindselektor, denn das zweite <ul> ist ka ein Kind eines <li>, sondern um einen Nachfahrenselektor.

Diese Verschachtelung ist falsch.

ul darf kein Kind von ul sein. ul muss Kind von li sein.

Bis demnächst
Matthias

[TS]

Hello,

<ul>
    <li> 1 </li>
    <li> 2 </li>
    <li> 3 </li>
    <li>
        <ul>
            <li> a </li>
            <li> b </li>
            <li> c </li>
        </ul>
    </li>
</ul>

Oh, ich bitte untertänigst um Verzeihung. Ist es jetzt besser?

Sollte es immer noch falsch sein, bitte gleich die richtige Variante posten :-P

Liebe Grüße
Tom S.

[Gunnar Bittersmann]

@@TS

Oh, ich bitte untertänigst um Verzeihung. Ist es jetzt besser?

Nein.

Sollte es immer noch falsch sein, bitte gleich die richtige Variante posten :-P

<ul>
    <li> 1 </li>
    <li> 2 </li>
    <li> 3 
        <ul>
            <li> a </li>
            <li> b </li>
            <li> c </li>
        </ul>
    </li>
</ul>

LLAP 🖖

[TS]

Hello,

Ist es jetzt besser?

Nein.

Sollte es immer noch falsch sein, bitte gleich die richtige Variante posten :-P

<ul>
    <li> 1 </li>
    <li> 2 </li>
    <li> 3 
        <ul>
            <li> a </li>
            <li> b </li>
            <li> c </li>
        </ul>
    </li>
</ul>

Na siehste! Geht doch. :-)

Liebe Grüße
Tom S.

[Gunnar Bittersmann]

@@TS

Na siehste! Geht doch. :-)

Was auch geht:

ul > *:not(li), ol > *:not(li)
{
  outline: 0.5em solid red;
  ERROR: ul/ol darf nur li-Kindelemente enthalten;
}

ins Stylesheet^[1] schreiben und schon wird der Fehler sichtbar.^[2]

LLAP 🖖

---

1. in eins, das man nur während der Entwicklung einbindet ↩︎

2. aus: Inclusive Design Patterns von Heydon Pickering, Kapitel Test-Driven Markup ↩︎

[Gunnar Bittersmann]

@@Tabellenkalk

du suchst text-indent.

Inwiefern soll das helfen, wenn es vom Inhalt abhängt, wie weit eingezogen werden soll?

LLAP 🖖

[Tabellenkalk]

Hallo,

Inwiefern soll das helfen, wenn es vom Inhalt abhängt, wie weit eingezogen werden soll?

Du meinst, man soll lieber eine Tabelle nehmen?

Gruß
Kalk

[Gunnar Bittersmann]

@@Tabellenkalk

Inwiefern soll das helfen, wenn es vom Inhalt abhängt, wie weit eingezogen werden soll?

Du meinst, man soll lieber eine Tabelle nehmen?

Das wollte ich nicht gesagt haben. Man sollte aber keine magic number nehmen.

LLAP 🖖

[Tabellenkalk]

Hallo,

Das wollte ich nicht gesagt haben. Man sollte aber keine magic number nehmen.

Mir fällt kein Weg ein, hier auf eine magische Zahl zu verzichten. Hast du eine Idee?

Gruß
Kalk

[Rolf b]

Geht bestimmt irgendwie mit einer Flexbox...

[Rolf b]

*** gestrichen. Hätte erstmal den Thread zu Ende lesen sollen... ***

[Laurenz]

Ich habe es das mal entsprechend dem unter dem Link text-indent angegebenen Beispiel ausprobiert und für meine Zwecke so umformuliert:

 .beispiel         { padding: 0; margin: 0; }
 .beispiel span      { padding-left: 5em; text-indent: -5em; }
 .beispiel span > *  { text-indent: 0; }

Das ergibt dann tatsächlich das gewünschte Bild hier:

<p>... <br />zum Beispiel: 
 <span class="beispiel">erstes Beispiel
  <span>zweites Beispiel</span>
  <span>drittes Beispiel</span>
 </span>
</p>

Allerdings nur, wenn kein Zeilenumbruch eintritt. Dieser zerstört das schöne Bild wieder, dann rückt der Text wieder an den linken Rand und ergibt ein Durcheinander. :(

Ich könnte Zeilenumbrüche verbieten. Aber das wäre auch suboptimal.

[MrMurphy1]

Hallo

vermutlich einfach zu lösendes Proble

Richtig. Das Mittel der Wahl ist wie heutzutage fast immer Flexbox.

Zu dem HTML

      <ul class="liste">
         <li>zum Beispiel:
            <ul>
               <li>Audi</li>
               <li>VW</li>
               <li>Mercedes</li>
            </ul>
         </li>
         <li>kurz:
            <ul>
               <li>Birne</li>
               <li>Orange ist ein Obst, welches, wie verwunderlich, in oranger Farbe daherkommt, aber vor dem Verzehr erst nervig geschält werden muss und im Gegensatz zu Äpfeln und Birnen in Deutschland nicht gedeiht sondern importiert werden muss.</li>
               <li>Apfel</li>
            </ul>
         </li>
         <li>ganz lange Einleitung:
            <ul>
               <li>Hamburg</li>
               <li>Flensburg</li>
               <li>Bremen</li>
            </ul>
         </li>
      </ul>

zum Beispiel

   /*Listen ul, ol*/
   @media all {
      ul,
      ol {
         padding: 0;
      }
      li {
         list-style-type: none;
      }
   }

   /*.liste*/
   @media all {
      .liste>li {
         margin-bottom: 0.5rem;
         display: flex;
      }
      .liste>li>ul {
         margin-left: 0.5rem;
      }
   }

Gruss

MrMurphy

[Laurenz]

Cool. Danke. Sehr schön.

Aber das wirkt sich auf alle Listen aus im Dokument, oder?

Wie bekomme ich daneben normale Listen ohne Textformatierung?

[MrMurphy1]

Hallo

Aber das wirkt sich auf alle Listen aus im Dokument, oder?

Nein, nicht Flexbox, sondern nur alles unter meinen Grundeinstellungen

/*Listen ul, ol*/

Alles unter

/*.liste*/

hat nur Auswirkungen auf die Listen mit der Klasse (class) liste.

Gruss

MrMurphy

[Laurenz]

Hmm, und wie schreibe ich dann nun unformierte Listen mit Listenzeichen zusätzlich zu den von mir gewünschten Beispiellisten?

[MrMurphy1]

Hallo

Du löscht mein bisheriges CSS und ersetzt es durch

   /*.liste*/
   @media all {
      .liste,
      .liste ul {
         padding: 0;
      }
      .liste li {
         list-style-type: none;
      }
      .liste>li {
         margin-bottom: 0.5rem;
         display: flex;
      }
      .liste>li>ul {
         margin-left: 0.5rem;
      }
   }

Dann bleiben die restlichen Listen unbeeinflußt.

Gruss

MrMurphy

[Laurenz]

Ah, sehr schön. Danke.

Jetzt ist noch eine Leerzeile oberhalb der Liste, eigtl. soll sich das "zum Beispiel" ja an den vorhergehenden Text nahtlos anschließen.

[MrMurphy1]

Hallo

Das liegt an deinem HTML / CSS, welches wir nicht kennen.

Du musst halt die entsprechenden Abstände (padding, margin) anpassen.

Gruss

MrMurphy

[Matthias Apsel]

Hallo Laurenz ,

Hmm, und wie schreibe ich dann nun unformierte Listen mit Listenzeichen zusätzlich zu den von mir gewünschten Beispiellisten?

Indem du diesen Listen nicht die Klasse „liste“ gibst. Dies ist übrigens ein ganz ungünstiger Klassenbezeichner.

Bis demnächst
Matthias

[Laurenz]

Nein, das klappte nicht. Auch andere Listen waren plötzlich ohne Listenpunkt.