Probleme mit dem Textumbruch beim li-Befehl

Hi,

Ich habe eine Internetseite, die von jemand anderem programmiert wurde. Auf einer page habe ich den Listen-Befehl benutzt, und das Resultat sieht hässlich aus. Was passiert ist, dass beim zweiten Listen-Item - wo der Text zu lang ist für eine Zeile, also umbricht - der Umbruch auf die Höhe der Bullet-Points erfolgt. Wie kann ich es so machen, dass er dahin umbricht wo auch der andere Text anfängt? Also, dass der ganze Text immer an der gleichen Stelle anfängt, auch nach einem Umbruch?

Ich hab mal den Screenshot des falschen Umbruchs angehängt, das Bild macht es viel einfacher klar als mein Text.

Der von mir benutzte Code war:

---
Blabla
<ul style="margin-left: 25px;">
<li>Ein <strong>preis-leistungsmäßig günstiges Angebot</strong> in diesen allgemein eher teuren Rechtsgebieten.</li>
<li>Das <strong>kostenlose Erstgespräch</strong> gucken ob der Text jetzt anders umbricht, Test Test Test, dann den Text wieder in das Listenitem verschieben, der Link ist ganz unten gucken ob der Text jetzt anders umbricht, Test Test Test, dann den Text wieder in das Listenitem verschieben, der Link ist ganz unten gucken ob der Text jetzt anders umbricht, Test Test Test, dann den Text wieder in das Listenitem verschieben, der Link ist ganz unten</li>
</ul>
</br>
---

Falls mein Problem immer noch unklar ist - ich will, dass die Worte "unten" und "jetzt" weiter rechts anfangen, auf der Höhe auf der auch das "Das" anfängt. Also der Text immer einheitlich anfängt.

Muss ich das Template ändern, oder kann ich da auch nen CSS-/HTML-Code benutzen der mein Problem löst (was mir natürlich lieber wäre)?

Danke!

Hi,

sorry für meine blöde Nachfrage zum Post von Brawler, aber:

1. Brawler, warum hat der diese merkwürdigen Klammern und vorher das ul? Und nicht wie bei mir <ul></ul>? Ist es, weil sich da was geändert hat oder weil an das in Foren so schreibt damit der Browser das nicth als Code interpretiert sondern als Text lässt, während man es im Forum liest? Und dann muss man es umformatieren in <ul></ul> Oder schreibt man das wirklich GENAU SO wie du gepostet hast in die Wordpress-Page? Meine Frage ist blöd, aber ich hab wirklich so wenig Ahnung... ^.^ 'Sorry.

2. Wenn ich den Code genau so eingebe wie von dir beschrieben, dann erkennt er das nicht als HTML-Tag und schreibt es einfach als Text hin.

3. Ich habs mal so versucht:
<ul style="list-style: disc; list-style-position: outside; margin-left: 25px;">
<li>Test-Zeile 1</li>
<li>Test-ZeileTest-ZeileTest-ZeileTest-ZeileTest-ZeileTest-ZeileTest-ZeileTest-ZeileTest-ZeileTest-ZeileTest-ZeileTest-ZeileTest-ZeileTest-ZeileTest-ZeileTest-ZeileTest-ZeileTest-ZeileTest-ZeileTest-ZeileTest-ZeileTest-ZeileTest-ZeileTest-ZeileTest-ZeileTest-ZeileTest-ZeileTest-ZeileTest-ZeileTest-ZeileTest-ZeileTest-ZeileTest-ZeileTest-ZeileTest-ZeileTest-ZeileTest-ZeileTest-ZeileTest-ZeileTest-ZeileTest-ZeileTest-ZeileTest-ZeileTest-ZeileTest-ZeileTest-ZeileTest-ZeileTest-Zeile</li>
</ul>

Aber das Ergebnis ist genau wie vorher - er bricht wieder falsch um.

4. Auch dieser Versuch den Code von Brawler einzusetzen hat wieder nur das alte falsche Ergebis gebracht:
<ul list-style: disc; list-style-position: outside; margin-left: 25px;>
<li>Test-Zeile 1</li>
<li>Test-Zeiel 2 Das <strong>kostenlose Erstgespräch</strong> <a href="http://www.holst-legal.de/anwaltssuche-und-vertrauen/">[Die Erklärung zum Hintergrund finden Sie hier: "Anwaltssuche und Vertrauen"]</a><a href="http://www.holst-legal.de/kostenlose-ersteinschaetzung/">[Kontakt aufnehmen können Sie hier: "Kostenlose Ersteinschätzung"]</a>
</li>
<li>Die <strong>hohe Kostentransparenz</strong> <a href="http://www.holst-legal.de/anwaltsgebuehren/">[Link zur Seite über die Gebühren]</a></li>
</ul>

Momentan steht in meiner style.css unter basic styles das folgende:
----
ul,
ol,
li,
dl,
dt,
dd,
ul ul,
ol ol,
dl dt,
dl dd {
list-style: none;
margin: 0;
padding: 0;
}
--
das heißt ja wohl, dass ich die von Brawler genannte Zeile nicht einfach reinpaste (weil es ja schon nen eintrag für "ul" gibt), sondern ich
1. - lösche das "ul" aus dem genannten
2. - und mache dahinter einen neuen Eintrag mit dem Inhalt von Brawler?

Sonst ist es ja doppelt vergeben?

Also als Ergebnis:
---
ol,
li,
dl,
dt,
dd,
ul ul,
ol ol,
dl dt,
dl dd {
list-style: none;
margin: 0;
padding: 0;
}

ul {list-style: disc; list-style-position: outside; margin-left: 25px;}

Nein, geht nicht.

Ich hab das in der style.css wie beschrieben geändert, und die wieder hochgeladen (die Datei style.css in /themes/meinTheme - und ich hab sichergestellt, dass das wirklich das aktive Theme ist)

Aber es bricht nach wie vor falsch um. Es gibt keine sichtbare Änderung an der Darstellung mit dem Befehl ul.

---

Was ich mich auch frage, ehrlich gesagt:

Der Befehl funktioniert bei mir ja auch nicht so.

Was ist denn der HTML-Befehl, mit dem ich das einfach mal ausprobieren könnte?

--- so richtig?
<ul list-style: disc; list-style-position: outside; margin-left: 25px;>
</ul>
---

Ich würde gerne mal den Befehl als HTML probieren. Wenn schon das nicht geht (was ja momentan der Fall ist), warum soll ich an dem CSS-Code fummeln.

Sicher, dass die Parameter so stimmen? Wie gesagt, auf HTML-Ebene geht es auch nicht.

Langsam nähere ich mich dem Problem: Ich hab jetzt mal einen HTML-code von einer Webseite kopiert, der angeblich die Kreise als Symbol für die Aufzählung durch Kästchen ersetzen soll. Wie folgt:

<ul style="list-style-type:square;">
<li>Coffee</li>
<li>TeaTeaTeaTeaTeaTeaTeaTeaTeaTeaTeaTea TeaTeaTeaTeaTeaTeaTeaTeaTeaTeaTeaTeaTeav TeaTeaTeaTeaTeaTeaTeaTeaTeaTea TeaTeaTeaTeaTeaTeaTeaTeaTeaTea TeaTeaTeaTeaTeaTeaTeaTeaTeaTea TeaTeaTeaTeaTeaTeaTeaTeaTeaTea TeaTeaTeaTeaTeaTeaTeaTeaTeaTea TeaTeaTeaTeaTeaTeaTeaTeaTeaTea TeaTeaTeaTeaTeaTeaTeaTeaTeaTea</li>
<li>Milk</li>
</ul>

Ergebnis: Gar nichts! Immer noch Kreise!

Dann hab ich einfach mal versucht, den Tag IN die li-items zu schreiben:
---
<ul style="list-style-type: circle;">
<li style="list-style-type: circle;">Coffee</li>
<li>TeaTeaTeaTeaTeaTeaTeaTeaTeaTeaTeaTea TeaTeaTeaTeaTeaTeaTeaTeaTeaTeaTeaTeaTeav TeaTeaTeaTeaTeaTeaTeaTeaTeaTea TeaTeaTeaTeaTeaTeaTeaTeaTeaTea TeaTeaTeaTeaTeaTeaTeaTeaTeaTea TeaTeaTeaTeaTeaTeaTeaTeaTeaTea TeaTeaTeaTeaTeaTeaTeaTeaTeaTea TeaTeaTeaTeaTeaTeaTeaTeaTeaTea TeaTeaTeaTeaTeaTeaTeaTeaTeaTea</li>
<li>Milk</li>
</ul>
---
JETZT gehts! Das erste "li" wird als Kreis angezeigt. Das zweite nicht.

Das heißt mein Problem ist, dass sich der ul-Tag nicht auf die li-items auswirkt... weiß jemand, woran das liegt? wird das nicht automatisch auf li angewendet, wenn man bei ul was ändert?
---

Äh, OK - in meiner style.css steht ja auch ein Eintrag für li!!! Da wurden wohl die ganze Zeit diese Einstellungen verwendet.

Das heißt, meine finale Vermutung:

Der von Brawler angegebene code ist insofern falsch, als ich den basic style für "li", definieren muss, NICHT für "ul"? Der Code von Brawler ändert nichts, weil die Tags die bei CSS zu "li" stehen vorgehen, und alles was ich da zu "ul" schreibe gar nicht angewendet wird?

Ich glaube, ich gebe auf. Ich kann ja einfach in jeden einzelnen Listen-eintrag so schreiben:

<li style="list-style: disc; list-style-position: outside; margin-left: 25px;">Beispiel Beispiel Beispiel Beispiel</li>

Dann bricht es korrekt um. Ich verstehe absolut nicht,
- warum meine Änderungen in der style.css null Auswirkungen auf die Seite haben
- warum meine Änderungen im HTML-Tag von "ul" keine Auswirkungen auf die Darstellung beim "li" haben

...aber das ist ja auch egal solange ich Listen erstellen kann die so aussehen wie ich es wollte. Der Code ist schon mörder-hässlich, aber was solls.

Danke für die Hilfe! Jetzt gehts jedenfalls halbwegs.

Zitat von Brawler

4. Die Angaben gehören als Inline-Style auf das UL, nicht auf den LI (also <ul style=""></ul>). Mach es lieber in der style.css (ul {}).
5. Das funktioniert so einwandfrei - Du bist nur im Trial & Error-Wahn! ;)

Hi, danke für deine Antwort. Allerdings: Ich hab es doch schon im ul eingefügt. zB hatte ich oben ja schon geschrieben, dass ich als HTML testweise folgendes benutzt habe:

<ul style="list-style-type:square;">
<li>Coffee</li>
<li>TeaTeaTeaTeaTeaTeaTeaTeaTeaTeaTeaTea TeaTeaTeaTeaTeaTeaTeaTeaTeaTeaTeaTeaTeav TeaTeaTeaTeaTeaTeaTeaTeaTeaTea TeaTeaTeaTeaTeaTeaTeaTeaTeaTea TeaTeaTeaTeaTeaTeaTeaTeaTeaTea TeaTeaTeaTeaTeaTeaTeaTeaTeaTea TeaTeaTeaTeaTeaTeaTeaTeaTeaTea TeaTeaTeaTeaTeaTeaTeaTeaTeaTea TeaTeaTeaTeaTeaTeaTeaTeaTeaTea</li>
<li>Milk</li>
</ul>
---
-> Bei diesem Beispiel war dann der List-Style dargestellt NICHT square.

---
<ul style="list-style-type: circle;">
<li style="list-style-type: circle;">Coffee</li>
<li>TeaTeaTeaTeaTeaTeaTeaTeaTeaTeaTeaTea TeaTeaTeaTeaTeaTeaTeaTeaTeaTeaTeaTeaTeav TeaTeaTeaTeaTeaTeaTeaTeaTeaTea TeaTeaTeaTeaTeaTeaTeaTeaTeaTea TeaTeaTeaTeaTeaTeaTeaTeaTeaTea TeaTeaTeaTeaTeaTeaTeaTeaTeaTea TeaTeaTeaTeaTeaTeaTeaTeaTeaTea TeaTeaTeaTeaTeaTeaTeaTeaTeaTea TeaTeaTeaTeaTeaTeaTeaTeaTeaTea</li>
<li>Milk</li>
</ul>
---
-> Beim zweiten Beispiel war der List-Style nur beim ersten Listeneintrag square, das andere blieb ein Kreis.
---
Wo war da der Fehler? Bei mir ändert der beschriebene ul-Eintrag NICHTS dafür wie die Listenitems dargestellt werden. Ich hab es eben noch mal probiert - keine Änderung. Erst wenn ich es beim "li" eintrage, ändert es sich korrekt.

Woran liegt das?

Der Tag ist doch richtig so? Warum wird das obige Beispiel bei mir NICHT als square ausgegeben. Alles, was ich bei "ul" eingebe, hat bei mir keinerlei Folgen für "li". Hab ich da nen Schreibfehler drinnen? Muss das Semikolon weg? Braucht es ne Leerzeile nach dem "type:"? Ich verstehe jetzt, dass Ihr mir zum CSS-Befehl ratet. Aber mich interessiert natürlich trotzdem, was an meinem HTML-code falsch ist.

---

Eben noch diverse Male ausprobiert - ändert nichts. Es gibt keinerlei Veränderung bei den dargestellten Listenitems. Und mein Tag kann ja eigentlich nicht das Problem sein, wenn er GENAU SO als li-Tag funktioniert. Ich hab zur Sicherheit noch mal den bei "ul" nichts ändernden Tag ausgeschnitten und beim li-Eintrag genau so gepasted. Beim li gehts!

Kann es sein, dass meine Programmierer damals die style.css editiert haben, und da irgendwie die Hierarchie zwischen ul und li geändert haben? Ich hab Einträge in der style.css gesehen, die nach der Frage klangen (die hab ich aber nicht angefasst).

So, ich hab jetzt wie gewünscht den Code ans Ende meiner style.css eingefügt (dieses Mal über den "Editor" im Wordpress-Admin, letztes Mal hatte ich es per Hand über FTP gemacht):

ul {list-style: disc; list-style-position: outside; margin-left: 25px;}

Ergebnis: Es hat sich absolut nichts geändert, Darstellung genau wie vorher.

----

Dann habe ich testweise mal für "square" hinten eingetragen:

ul {list-style: square; list-style-position: outside; margin-left: 25px;}

Ergebnis Es hat sich absolut nichts geändert. Es sind immer noch Kreise, und der Umbruch ist auch wie vorher.

---
Dann hab ichs mal für "li" eingetragen - ans Ende der Style.css das folgende:
li {list-style: square; list-style-position: outside; margin-left: 25px;}

-> Ergebnis: Nix.
----

Diese Einträge haben bei mir keinerlei Wirkung.

Ich verstehs nicht: Ich hab in Wordpress -> Appearance -> Editor ausgewählt "Stylesheet (style.css)" und da steht auch mein Theme (das, was auch unter "Themes" als aktiv angezeigt wird, und es ist auch definitiv meins weil die Programmierer diesem Custom Theme den Namen meiner Seite gegeben haben).

Dann ganz ans Ende gescrollt, und da den obigen Code-Inhalt eingefügt und auf "update file" gedrückt.

Dann die Seite refreshed. Nichts.

Auch als ich per Hand die style.css aus dem Verzeichnis meines Themes geladen, geändert und zurückkopiert habe - keine Änderung.

---
Es bleiben die beschriebenen zwei Fakten:

1. Die von euch beschriebenen Einträge in der style.css ändern bei mir NICHTS, weder für "ul" noch für "li".

2. Auch der beschriebene HTML-Tag ändert NICHTS, wenn ich ihn beim "ul" angebe. Wenn ich ihn beim "li" angebe, funktioniert alles super - ich kann circle zu disc zu square ändern, ich kann den Text anders umbrechen lassen etc. - alles funktioniert.

Das ist einfach der Status Quo. Ich verstehe nicht, wo der Fehler liegt.

Wie gesagt, kann mir jemand sagen was ich jetzt tatsächlich ändern soll? Das von Euch geschriebene habe ich doch gerade gemacht (vielleicht mache ich ja was blödes falsch). Funktioniert nur nicht.

Ich will damit nicht patzig klingen, mir ist klar dass das ganze meine Schuld ist, und ich absolut nichts über CSS weiß. Irgendwas ganz dummes muss ich ja falsch machen. Ich weiß nur nicht was. Es ist zum in die Tischkante beißen. Hab halt Jura studiert und nicht Informatik, und auch hobbymäßig bisher nix damit zu tun gehabt.