Tabs setzen

[I&IFra]

Hallo Ihr,

ich hänge mal wieder...ich weiß nicht ob ich einfach nur auf der Schlauch stehe.

Ich habe einen Gesetzestext, welcher auf meienr Homepage eingepflegt werden soll.
Erst der §, dann der Absatz und dann der Text. Allerdings schön "dargestellt":

§1 Beispiel

(1) Hier steht dann ein Text, der auch

zweizeilig sein soll, aber nicht unter der Klammer vom (1) beginnen soll,

sondern erst unter "Hier".

Wie bekomme ich das hin? Mit "Einzug vergrößern" rückt nur der gesamte Absatz nach rechts.
Mit Leerzeichen zu arbeiten fällt für mich raus.

Über Hilfe wäre ich gerade echt dankbar.

[armin41]

Hallo,

das geht im Inhaltselement text mit einer Liste und css list-style-position.

§1 Beispiel ist die Überschrift und dann kommt der Text.

Den kannst du grundsätzlich mit css und padding-left einrücken. Dann die Liste mit der Eigenschaft outside. Hier ganz schnell:

<ul>
<li style="padding-left: 2em; list-style-type: decimal; list-style-position: outside;">Dies ist erstmal der Text. Der wird auch umbrochen. Geschieht das automatisch? Dann kannst du den Text hier weiterschreiben... und immer weiter. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
</ul>

Sieht dann so aus:
ksnip_20220429-100143.png

Das Ganze in der css-Datei machen und dort auch "schönen". Abstand zwischen Listenelement und Text...

Der Vorteil ist, dass es so responsiv ist und du dich nicht um die Umbrüche kümmern musst.

[Franko]

Evtl. auch nützlich: CSS text-indent
https://css-tricks.com/almanac/prope...t/text-indent/

[I&IFra]

Danke, dass hilft auf jeden Fall schon mal weiter. Nur wie bekomme ich die 1. zu einer (1)?

Hallo,

das geht im Inhaltselement text mit einer Liste und css list-style-position.

§1 Beispiel ist die Überschrift und dann kommt der Text.

Den kannst du grundsätzlich mit css und padding-left einrücken. Dann die Liste mit der Eigenschaft outside. Hier ganz schnell:

<ul>
<li style="padding-left: 2em; list-style-type: decimal; list-style-position: outside;">Dies ist erstmal der Text. Der wird auch umbrochen. Geschieht das automatisch? Dann kannst du den Text hier weiterschreiben... und immer weiter. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
</ul>

Sieht dann so aus:
ksnip_20220429-100143.png

Das Ganze in der css-Datei machen und dort auch "schönen". Abstand zwischen Listenelement und Text...

Der Vorteil ist, dass es so responsiv ist und du dich nicht um die Umbrüche kümmern musst.

[mdoll]

Moin,

das geht mit dem ::marker Pseudoelement.

CSS (Funktioniert aber nicht im IE):

ul {counter-reset: list;}
li {list-style: none; counter-increment: list; padding-left:0.25rem}
li::marker {content: "(" counter(list, decimal) ")"}

Gruß
Mathias

[Franko]

Moin,
das geht mit dem ::marker Pseudoelement.

FYI: https://css-tricks.com/almanac/selectors/m/marker/

[lucina]

Schau mal hier: https://codepen.io/kikmedia/pen/mdXJPaR