Text in ungeordneter Liste umbrechen?

Biernase · 16.09.2010

Ich habe eine ungeordnete Liste, in denen manche Punkte etwas länger ausfallen, als der ul-Tag breit ist. Meine Versuche, den Text umbrechen zu lassen, verliefen bisher ergebnislos. Das automatische Umbrechen funktioniert nicht, "& s h y ;" erwirkt ebenfalls keine Wirkung.

Wißt ihr, woran das liegen könnte?

cebito · 16.09.2010

AW: Text in ungeordneter Liste umbrechen?

Biernase schrieb:
Wißt ihr, woran das liegen könnte?

Nö, Quelltext+Css könnten uns aber auf die Sprünge helfen!

Biernase · 16.09.2010

AW: Text in ungeordneter Liste umbrechen?

HTML-Syntax:

Code:

<div id="wrapper">
      <ul id="letters-home">
            <li><p><b>1:</b> blablabla</p></li>
              <li><p><b>2:</b> blablabla</p></li>
              <li><p><b>3:</b> blablabla</p></li>
      </ul>
    <div id="picture-home"><img src="http://www.psd-tutorials.de/modules/Forum/images/cube.png" border="0" height="118px" width="115px" /></div>
  </div>

CSS-Code:

Code:

#content ul {
    margin:0 0 15px 0;
    color:white;
    }

#content ul li {
    padding-left:15px;
    margin-left:10px;
    background:url(../images/li-arrow.gif) 0 7px no-repeat;
    }

#wrapper {
  width:758px;
  height:200px;
    border:2px solid #000;
  }
  
ul#letters-home {
  float:left;
  width:591px;
  height:auto;
  border:2px solid #fff;
  }

#picture-home {
    float:left;
    width:123px;
    height:123px;
    margin-left:40px;
    }

cebito · 16.09.2010

AW: Text in ungeordneter Liste umbrechen?

Wenn du dein blabla da ohne Leerzeichen reinpackst... :rolleyes:

&*s*h*y*; (korrekte Syntax = ohne Sterne) kann ich da nirgendwo entdecken...

Biernase · 16.09.2010

AW: Text in ungeordneter Liste umbrechen?

cebito schrieb:
Wenn du dein blabla da ohne Leerzeichen reinpackst...
&*s*h*y*; (korrekte Syntax = ohne Sterne) kann ich da nirgendwo entdecken...

Das "blabla" ist natürlich nur ein Beispieltext. Und im richtigen Text stand auch das "&s hy" drin. Ich habe es nur wieder entfernt, da es ja ohnehin ohne Wirkung blieb. Und Code ohne Resultat ist sinnlos. Jedoch dürfte der Korrekte Text nicht der Auslöser für mein Problem sein. Die Ursache müßte ja doch im Code (CSS und HTML-Tags) zu finden sein. Und der ist unverändert.

tmbach15 · 16.09.2010

AW: Text in ungeordneter Liste umbrechen?

Auch wenn sich über die Sinnhaftigkeit der Vorlage mit dem "blabla"-Text streiten lässt, ich hab's mit extra langem "Blabla" in Kombination mit dem "schüchtern Umbruch" versucht und alles läuft ( Windows / FF 3.6.10 ) wie erwartet. ( Erfolgreicher Umbruch mit Trennstrich )

Aber zeigt mal die richtigen Listen-Elemente, dann lässt sich das Thema bestimmt schnell klären, so geheim sollten doch ein paar Listen-Einträge nicht sein.

Biernase · 17.09.2010

AW: Text in ungeordneter Liste umbrechen?

In Ordnung.

HTML-Syntax:

Code:

<div id="wrapper">
   <ul id="letters-home">
      <li><p><b>1: </b>Der erste Listenpunkt ist der zweitlängste und muss, wie auch das zweite Aufzählungszeichen, umgebrochen werden</p></li>
      <li><p><b>2: </b>Der zweite Eintrag ist ansich der längste und umfasst eineinhalb Zeilen der verfügbaren Breite. Sowohl der autmatische Umbruch als auch <&.shy;> funktionieren nicht. Ein Zeilenumbruch in Form von <b.r /> hingegen funktioniert</p></li>
      <li><p><b>3: </b>Der dritte Punkt ist der k&uuml;rzeste und kommt mit der verf&uuml;gbaren Breite aus</p></li>
   </ul>
<div id="picture-home"><img src="/images/cube.png" border="0" height="118px" width="115px" /></div>
  </div>

Das ist jetzt nicht der richtige Text. Ich bin in der Arbeit und habe den korrekten Text jetzt nicht parat. Deshalb habe ich mir einen Text einfallen lassen. Immerhin ist es kein "Blabla"-Beispieltext. Wer den Code selbst testen möchte, kann das Wort "Aufzählungszeichen" in "Auf" und "zählungszeichen" versuchen, zu trennen. Bei mir ist es so, dass sowohl mit dem IE 7 und IE 8 als auch mit der aktuellen Safari-Version sowohl der automatische Zeilenumbruch als auch <&.shy;> nicht funktionieren. Lediglich ein <.br /> erzielt seine Wirkung.

CSS-Code unverändert (siehe oben).

Landorien · 17.09.2010

AW: Text in ungeordneter Liste umbrechen?

Hallo.

1. das b-Tag ist fehl am Platz, denn es hat keinerlei Semantik und wahrscheinlich verwendest du es nur um etwas "fett" darzustellen. Dabei wären wir schon beim Problem, für die Darstellung ist CSS zuständig, nicht HTML.

2. Wenn du wirklich eine aufeinander aufbauende Liste hast (Punkt 2 setzt voraus, dass du Punkt 1 gelesen hast), dann ist es keine ungeordnete Liste mehr, sondern eine geordnete Liste, sprich du nimmst das ol-Tag.

Gruß
Lando

Biernase · 17.09.2010

AW: Text in ungeordneter Liste umbrechen?

Deine Vermutung war korrekt. Der -Tag dient lediglich dazu, um Text Fett darzustellen. Mit CSS wäre es zwar auch möglich, jedoch wäre dazu eine zusätzliche Deklaration notwendig, was letzendlich mehr Code erfordern würde, als ein einfaches .

Und nein, es ist eine ungeordnete Liste. Das <ul> ist schon zutreffend.

Aber denkst Du wirklich, dass ein <ul> bzw. <ol> oder das für mein Problem verantwortlich ist?

Doitsu · 18.09.2010

AW: Text in ungeordneter Liste umbrechen?

Landorien schrieb:
1. das b-Tag ist fehl am Platz, denn es hat keinerlei Semantik und wahrscheinlich verwendest du es nur um etwas "fett" darzustellen. Dabei wären wir schon beim Problem, für die Darstellung ist CSS zuständig, nicht HTML.

Wofuer gibt es diese Tags dann? Genau dazu, um etwas entsprechend darzustellen. Headline setzt man auch in einen <hx> Tag, nicht in einen den man dann per CSS stylt.

Biernase schrieb:
Und nein, es ist eine ungeordnete Liste. Das <ul> ist schon zutreffend.

Du nummerierst sie sowieso durch, also nehme doch gleich 'ne geordnete Liste?!

Biernase schrieb:
Aber denkst Du wirklich, dass ein <ul> bzw. <ol> oder das für mein Problem verantwortlich ist?

Weniger - aber wenn ich den Code, den du hier gepostet hast, bei mir im Opera einfuege funktioniert es ohne Probleme - ich denke, das war nicht alles was hier steht.. Wenn du das 'Problem' mal Hochladen koenntest waere das irgendwie von vor teil ..
Ich glaube, du hast irgendwo ein white-space:nowrap; gesetzt.. (hoert sich jedenfalls danach an)

Biernase · 18.09.2010

AW: Text in ungeordneter Liste umbrechen?

Also. Wenn die Codeschnipsel bei dir bzw. bei euch funktionieren, scheint es doch mit etwas anderem zusammenzuhängen. Das Archiv im Anhang enthält das CSS-File, die index.php und die Inhaltsseite.

Edit:
Der Dateianhang scheint nicht funktioniert zu haben. Dann eben so:

Doitsu · 18.09.2010

AW: Text in ungeordneter Liste umbrechen?

Mit 'Hochladen' meinte ich eig. einen Link zu einer Seite, wo das Problem zu sehen ist.. nicht zu einem Archiv. :eek:

Ansonsten: selbst bei dem, was ich es runtergeladen, wird es bei mir umgebrochen. Das ist ja aber auch nicht der korrekte Quelltext.

Achja: Validiere deine Seiten, oder nehm die Buttons unten raus! (Nicht mal die sind valide eingebaut)

Biernase · 18.09.2010

AW: Text in ungeordneter Liste umbrechen?

Bitte störe dich nicht an der Validität. Ich habe diese index.php von meinem letzen Projekt genommen, dessen Struktur anders war, als die des aktuellen Projektes. Ich arbeite immer von oben nach unten und um den Footer kümmere ich mich später.

Wenn die Dateien bei dir funktionieren und es anscheinend nicht daran liegt, woran könnte es dann liegen? Browsereinstellung (welche)? Windowseinstellung?
Ist zwar eher unwahrscheinlich, aber irgendeinen Grund dafür muss es ja geben.

Landorien · 18.09.2010

AW: Text in ungeordneter Liste umbrechen?

Biernase schrieb:
Deine Vermutung war korrekt. Der -Tag dient lediglich dazu, um Text Fett darzustellen. Mit CSS wäre es zwar auch möglich, jedoch wäre dazu eine zusätzliche Deklaration notwendig, was letzendlich mehr Code erfordern würde, als ein einfaches .

es geht nicht um mehr oder weniger Code (wobei das statt 1. ein 1. wäre..), es geht um Semantik, wofür HTML also zuständig ist. Ebenfalls sollte man eventuell erwähnen, dass nicht jeder Browser das b-Tag als "fett" darstellt, also musst du um auf Nummer sicher zu gehen dennoch dieses Tag über CSS einen Wert zuweisen.
Wenn du von "Aussehen" oder "Layout" sprichst, dann ist CSS dafür zuständig.

Aber denkst Du wirklich, dass ein <ul> bzw. <ol> oder das für mein Problem verantwortlich ist?

Nö, hab ich ja auch nicht geschrieben, sondern dass du noch einige Fehler in deiner Auszeichnung hast.

Wofuer gibt es diese Tags dann? Genau dazu, um etwas entsprechend darzustellen. Headline setzt man auch in einen <hx> Tag, nicht in einen den man dann per CSS stylt.

Nein eben nicht! Wie schon viel zu oft erwähnt: Alles was mit Darstellung / Aussehen / Layout zu tun hat, ist über CSS zu realisieren und hat in 1. Linie nichts mit HTML zu tun.

Das b-Tag ist ein Relikt aus alten Zeiten (wobei es mit HTML5 - vielleicht - wieder aufgenommen wird), als CSS noch nicht in allen Browsern implementiert war und man Tags wie font, b, u, i, size zum "stylen" benutzt hat.
Eine Überschrift setzt man in ein hx-Tag, da es eine Überschrift ist und dieses Tag die Semantik vermittelt. In diesem Falle, also die Nummern "fett" darzustellen, wäre sogar ein umschließendes span-Tag korrekt, da es keinerlei Semantik vermittelt und nur für Styling genutzt wird.

Du nummerierst sie sowieso durch, also nehme doch gleich 'ne geordnete Liste?!

eine geordnete Liste setzt voraus, dass die Punkte aufeinander logisch aufbauen. Da hat er gesagt, dass dies ja nicht zutrifft.

Gruß und schönen Abend
Lando

Biernase · 18.09.2010

AW: Text in ungeordneter Liste umbrechen?

Um den Fokus wieder auf den Kern der Sache zu lenken:

Ob ich die Liste als geordnete (Nummerierung) oder ungeordnete Liste (Punkte) auslege, spielt absolut keine Rolle. Denn ich verwende eigene Grafiken.

Die Art und Weise, wie ich Text fett darstelle, kann ich mir noch durch den Kopf gehen lassen. Bitte lasst das nicht zumk Hauptthema werden. Es wurde angesprochen und das ist gut so. Ich habe jetzt die Möglichkeit, mich diesbezüglich über Standards zu informieren mir Gedanken darüber zu machen.

Und nachdem diese Nebensächlichkeiten beiseite gelegt wurden, zurück zum Thema dieses Threads. Ich habe die index.php bislang auf zwei unterschiedlichen Windows XP als auch Windows 7 und Browsern von IE7 bis IE8, Safari und Firefox getestet und es wurde auf allen Browsern nicht so dargestellt, wie es sein sollte. Ich gehe also davon aus, dass es keine Browser- oder Betriebssystemabhängige Einstellung ist. Wenn es Opera korrekt darstellt, gehe ich dabei eher von einem Fehler Operas aus. Den kompletten Code könnt Ihr euch ja nun anhand der Archivdatei ansehen. Ich hoffe, ihr schaut euch das an und findet hoffentlich den Fehler.

sokie · 18.09.2010

AW: Text in ungeordneter Liste umbrechen?

Warning

Zum Vergrößern anklicken....

: include(home.php) []: failed to open stream: No such file or directory in E:\apachefriends\xampp\htdocs\xampp\PSD\Biernase\index_test.php on line 42

Warning: include() []: Failed opening 'home.php' for inclusion (include_path='.;E:\apachefriends\xampp\php\pear\') in E:\apachefriends\xampp\htdocs\xampp\PSD\Biernase\index_test.php on line 42

du hättest ruhig testen können, was du uns hier als Download anbietest- auf der anderen Seite, lad das doch auf deinen space und poste uns den link (was in der anderen css (lb.css) steht beeinflusst ja nun auch die Ausgabe.

krid2873 · 19.09.2010

AW: Text in ungeordneter Liste umbrechen?

Moin,

das Problem liegt hier:

Code:

#content p {
    width:758px;

Lösche oder deaktiviere diese und dann sollte es mit dem Textumbruch klappen. Das Ganze unter Vorbehalt, da der Inhalt der Datei lb.css nicht bekannt ist.

Biernase · 19.09.2010

AW: Text in ungeordneter Liste umbrechen?

Zuerst einmal Entschuldigung dafür, dass ich den falschen Bearbeitungsstand hochgeladen hatte. Hatte ich wohl eine veraltete Version erwischt.

Zum zweiten gestaltet sich das hochladen nicht ganz so einfach. Ich habe zuhause einen privaten Server. Damit bin ich nicht auf Webspace angewiesen. Auf diesen Server kommt IHr von aussen aber nicht drauf, da dieser vom WWW abgeschottet ist. Ein Webspace für die Seite existiert noch nicht bzw. ist noch nicht gebucht.

Und nun wieder zum Thema. krid, deine Vermutung war zutreffend. Auch, wenn mir nicht ganz ist, weshalb. Denn die Breite des Listenelements war schmäler. Werden Breitenangaben aus ul#letters-home { ... } ignoriert?

Doitsu · 19.09.2010

AW: Text in ungeordneter Liste umbrechen?

Noe, ignoriert nicht.. Sie werden aber nur auf ul#letters-home bezogen - wenn da aber ein Element drin ist (p), welches Breiter ist, geht es halt rueber - allerdings nur im IE, deswegen hatte ich es nicht gesehen, Opera & Firefox passen die Breite dann an.