WinFuture-Forum.de: CSS Liste: Text einrücken nach Zeilenumbruch - WinFuture-Forum.de

Zum Inhalt wechseln

Nachrichten zum Thema: Entwicklung
Seite 1 von 1

CSS Liste: Text einrücken nach Zeilenumbruch


#1 Mitglied ist offline   Andrew0 

  • Gruppe: aktive Mitglieder
  • Beiträge: 872
  • Beigetreten: 24. Juli 04
  • Reputation: 0

geschrieben 24. Januar 2019 - 11:02

Hallo zusammen,
ich versuche verzweifelt den Text nach einem Zeilenumbruch in ul / li einzurücken.
Probiert habe ich alles mögliche, allem voran natürlich list-style-position:outside;
Ich habe es in das wrap, in die box, in die ul und li elemente gesetzt, aber es tut sich einfach nix.
Sieht so aus:

Eingefügtes Bild

Einen Link kann ich gerade nicht geben, da noch im Aufbau.
Weiß jemand wieso das so dargestellt wird? Ist geräte- und browserübergreifend.
0

Anzeige



#2 Mitglied ist offline   Stefan_der_held 

  • Gruppe: Offizieller Support
  • Beiträge: 14.294
  • Beigetreten: 08. April 06
  • Reputation: 931
  • Geschlecht:Männlich
  • Wohnort:Dortmund NRW
  • Interessen:Alles wo irgendwie Strom durchfließt fasziniert mich einfach weswegen ich halt Elektroinstallateur geworden bin :)

geschrieben 24. Januar 2019 - 11:27

was spricht dagegen für die Aufzählungselemente ein seperaten DIV zu nehmen?

Grob:
<ul>
  <li><div>DEIN TEXT MIT VIEL ZEICHENUMBRUCH UND SO</div></li>
  <li><div>UND NOCHMEHRVON TEXTZEUCHS</div></li>
</ul>


wenn du magst kannst du sogar nun in der CSS die DIV für innerhalb der Liste extra klassifizieren....

SOLLTE! eigentlich funktionieren.

EDIT:
Flüchtigkeitsfehler im Beispiel-Code korrigiert :imao:

Dieser Beitrag wurde von Stefan_der_held bearbeitet: 24. Januar 2019 - 11:41

0

#3 Mitglied ist offline   Stefan_der_held 

  • Gruppe: Offizieller Support
  • Beiträge: 14.294
  • Beigetreten: 08. April 06
  • Reputation: 931
  • Geschlecht:Männlich
  • Wohnort:Dortmund NRW
  • Interessen:Alles wo irgendwie Strom durchfließt fasziniert mich einfach weswegen ich halt Elektroinstallateur geworden bin :)

geschrieben 24. Januar 2019 - 11:39

eben Quick'n'Dirty getestet ;) wie gedacht:

Angehängtes Bild: Unbenannt.PNG

Testquelltext
<html>
<head>
<title>LISTENTEST</title>
</head>
<body>
<ul>
<li><div>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. 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.</div></li>
<li><div>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. 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.</div></li>
<li><div>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. 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.</div></li>
<li><div>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. 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.</div></li>
<li><div>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. 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.</div></li>
<li><div>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. 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.</div></li>
</ul>
</body>
</html>


Testweise noch die Std. Aufzählungszeichen gegen eine Grafik (nur das erste) ersetzt. Funktioniert ebenso :)

Angehängtes Bild: Unbenannt_2.PNG

Dieser Beitrag wurde von Stefan_der_held bearbeitet: 24. Januar 2019 - 12:18

0

#4 Mitglied ist offline   Andrew0 

  • Gruppe: aktive Mitglieder
  • Beiträge: 872
  • Beigetreten: 24. Juli 04
  • Reputation: 0

geschrieben 24. Januar 2019 - 12:15

Klappt leider nicht.
Es wird dann einfach unter das li Element gesetzt:

Eingefügtes Bild

Weitere styles liegen nicht drauf.
0

#5 Mitglied ist offline   Stefan_der_held 

  • Gruppe: Offizieller Support
  • Beiträge: 14.294
  • Beigetreten: 08. April 06
  • Reputation: 931
  • Geschlecht:Männlich
  • Wohnort:Dortmund NRW
  • Interessen:Alles wo irgendwie Strom durchfließt fasziniert mich einfach weswegen ich halt Elektroinstallateur geworden bin :)

geschrieben 24. Januar 2019 - 12:17

Stellt sich mir die Frage:
wie sieht der entsprechende Code aus? Part im CSS für Listen und der Codeschnippsel der das Bild erzeugt.
0

#6 Mitglied ist offline   Andrew0 

  • Gruppe: aktive Mitglieder
  • Beiträge: 872
  • Beigetreten: 24. Juli 04
  • Reputation: 0

geschrieben 24. Januar 2019 - 12:21

für ul
.repairs-red {
	padding:10px 0px 0px 0px;
	margin: 0px 0px 15px 0px;
	line-height:2em;
	list-style-position:outside;
	
}


für li
.repairs-red li:before {
	font-family:"Font Awesome 5 Free";
	font-weight: 900;
	content:"\f00d";
	margin-right:10px;
	color:red;
	list-style-type:none;
}

0

#7 Mitglied ist offline   Stefan_der_held 

  • Gruppe: Offizieller Support
  • Beiträge: 14.294
  • Beigetreten: 08. April 06
  • Reputation: 931
  • Geschlecht:Männlich
  • Wohnort:Dortmund NRW
  • Interessen:Alles wo irgendwie Strom durchfließt fasziniert mich einfach weswegen ich halt Elektroinstallateur geworden bin :)

geschrieben 24. Januar 2019 - 12:27

Bitte auch den HTML-Part.... sonst ergibt sich da keine Logik irgendwie :)
Zudem würde ich aus "li" folgende Bereiche wenigstens testweise mal rausnehmen:
margin.right
list-style-type


Grafiken (also Aufzählungszeichen ändern) in Listen kannst du ja im Grunde ganz einfach:

li {list-style-image:url(./PFAD/ZUM/BILD/bild.jpg);}


Habe den Verdacht, dass dein CSS-Part für "li" hier einiges durcheinander bringt :unsure:

Sollte das "rausnehmen" der CSS Infos wie oben geschrieben deine Seite komplett verunstalten, so lager den LI-CSS Part in einen eigenen aus sodass er von dem anderen container getrennt deklariert wird.

Dieser Beitrag wurde von Stefan_der_held bearbeitet: 24. Januar 2019 - 12:29

0

#8 _Osmodia_

  • Gruppe: Gäste

geschrieben 24. Januar 2019 - 12:49

@Andrew0:

Du hast einen Denkfehler. Die beiden Zeilen stehen untereinander. Das rote X ist ein ganz normales Zeichen und fängt da an, wo die andere Zeile auch beginnt. Einrücken kannst du das so nicht.

Nimm das rote X für den Listenpunkt als Grafik, dann stimmt auch die Darstellung.
0

#9 Mitglied ist offline   Stefan_der_held 

  • Gruppe: Offizieller Support
  • Beiträge: 14.294
  • Beigetreten: 08. April 06
  • Reputation: 931
  • Geschlecht:Männlich
  • Wohnort:Dortmund NRW
  • Interessen:Alles wo irgendwie Strom durchfließt fasziniert mich einfach weswegen ich halt Elektroinstallateur geworden bin :)

geschrieben 24. Januar 2019 - 13:16

ok dachte es wäre eine Grafik :unsure:

Dann sollte bspw. in meinem Beispiel es auch funktionieren wenn das listen-interne-DIV ein "float:right" oder "float:left" bekommt - je nach erfordernis :)
0

#10 Mitglied ist offline   Andrew0 

  • Gruppe: aktive Mitglieder
  • Beiträge: 872
  • Beigetreten: 24. Juli 04
  • Reputation: 0

geschrieben 24. Januar 2019 - 13:25

Danke euch.

Vollständigkeithalber hier der HTML Code:
<ul class="repairs-red">
<li>Versandkosten für den Rückversand in das Ausland. Die Versandkosten variieren je nach Zielland und beginnen bei 10€.
</li>
</ul>


Das Icon ist in der Tat ein Schriftzeichen aus Font Awesome. Daher über das Pseudoelement :before und die Anweisung content: eingebunden. Mit Bildern gibt es nur Probleme und man muss ellenlange Gerüste aus Blöcken bauen, damit alles vertikal mittig bleibt, auch wenn die Schriftart/Größe ändert wird.

@Osmodia: verstehe ich nicht ganz. Aufzählungszeichen und Text sind in einer Zeile. Erst mit dem div Element rutscht alles runter in eine neue Zeile.

Ich habe es jetzt so gelöst und auch auf mobile sieht es solide aus:
Eingefügtes Bild
oder ist das kein eleganter Weg?

Edit: das Gute ist, dass Text, der nur über 1 Zeile geht auch genauso bündig ist wie die lange variante, da das padding nur auf alles ab der 2. Zeile anschlägt :-)

Dieser Beitrag wurde von Andrew0 bearbeitet: 24. Januar 2019 - 13:27

0

#11 Mitglied ist offline   Stefan_der_held 

  • Gruppe: Offizieller Support
  • Beiträge: 14.294
  • Beigetreten: 08. April 06
  • Reputation: 931
  • Geschlecht:Männlich
  • Wohnort:Dortmund NRW
  • Interessen:Alles wo irgendwie Strom durchfließt fasziniert mich einfach weswegen ich halt Elektroinstallateur geworden bin :)

geschrieben 24. Januar 2019 - 13:37

Beitrag anzeigenZitat (Andrew0: 24. Januar 2019 - 13:25)

@Osmodia: verstehe ich nicht ganz. Aufzählungszeichen und Text sind in einer Zeile. Erst mit dem div Element rutscht alles runter in eine neue Zeile.


Weil <li> als eigener Container gilt und durch das Zeichen darin der Browser "denkt"

"Ah.... neue Klasse... irgendwo ein Float gesetzt? nein? dann kommt das unter dem"

So kann ich mir das zumindest erklären.

Die "DIV"-Lösung sollte demnach auch funktionieren wenn du dort ein entsprechendes Styleelement mitgibtst - je nach Bedarf

float:right

oder
float:left

0

#12 Mitglied ist offline   Holger_N 

  • Gruppe: aktive Mitglieder
  • Beiträge: 5.215
  • Beigetreten: 11. September 10
  • Reputation: 459
  • Geschlecht:Männlich

geschrieben 24. Januar 2019 - 16:00

Ich weiß jetzt nicht wie »sauber« das ist, aber man kann doch li einfach als table definieren und li::before als table-cell.

ul {list-style-type:none;}

li {display:table;}


li::before {display:table-cell;
        font-family:"Font Awesome 5 Free";
        font-weight: 900;
        content:"\f00d";
        color:red;}
}


(Hab mal alle paddings und margins rausgenommen, dass man das auch sieht, dass es ohne jegliche Ränder funktioniert)

Übrigens muß der Font eingebunden sein, sonst funktioniert das Ganze nur auf Rechnern, wo die Schriftart auch installiert ist.
Bauernregel: Regnets mächtig im April, passiert irgendwas, was sich auf April reimt.
0

#13 Mitglied ist offline   Andrew0 

  • Gruppe: aktive Mitglieder
  • Beiträge: 872
  • Beigetreten: 24. Juli 04
  • Reputation: 0

geschrieben 24. Januar 2019 - 16:12

Danke, das funktioniert ebenfalls und sieht responsive gut aus.

li -> display:table
li:before -> display:table-cell
Text hinter li in div oder span packen und ebenfalls als display:table-cell definieren.

Dann braucht man nur noch ein padding auf li:before (z.B. padding-right: 20px;) und bekommt das:

Eingefügtes Bild
0

Thema verteilen:


Seite 1 von 1

1 Besucher lesen dieses Thema
Mitglieder: 0, Gäste: 1, unsichtbare Mitglieder: 0