• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Nebeneinanderliegende <span> mit festem Abstand trotz variablem Inhalts

  • Ersteller Ersteller K.Beutler
  • Erstellt am Erstellt am
K

K.Beutler

Guest
Hallo,
ich versuche mich gerade an einer Liste die wie folgt aufgebaut ist:
Code: 
<span>I</span><span style="margin-left:30px;">Listenpunkt 1</span>
<span>II</span><span style="margin-left:30px;">Listenpunkt 2</span>
<span>III</span><span style="margin-left:30px;">Listenpunkt 3</span>
...

Problem:
Die drei Listenpunkte stehen nicht richtig linksbündig, da der Inhalt des ersten Span-Containers nunmal viel "dünner" ist als der des dritten Span-Containers. Folglich ist Listenpunkt 3 um die Breite von "II" nach rechts verschoben.

Hat mir jemand einen Lösungsvorschlag für meine Idee?

Lg
 
Ok, neuer Versuch:

Ich hätte mein letztes Hemd darauf verwetten können, dass der erste Post ein Verweis auf ein Listenelement wird :p
Leider wäre das viel zu umständlich in meinem Fall (ehrlich, ich konvertiere ein hunderte Seiten langes Word-Dokument mit C++ in ein wirklich schönes HTML-Format um, aber die "Listenpunkte" sind nicht so schön nacheinander und sofort auffindbar vorhanden, weshalb ich da nicht einfach ein <ol> </ol> drumpacken kann).

@MrMurphy
Was genau verstehst du denn an dem Beispiel nicht? Natürlich habe ich jetzt kein funktionierendes HTML-Script gepostet, da ich den Fokus auf das Wesentliche beschränken wollte.
Stell dir einfach eine leere HTML-Seite (natürlich mit head, title, body) vor, in die du eine Liste bauen musst, ohne dafür die von HTML bereitgestellten Listenelemente zu verwenden.

Um die einzelnen Elemente der Liste ist dann noch ein <p>-Tag, der für den Zeilenumbruch sorgt...

Meine Überlegung war ja schon eine Tabelle, wobei ich das auch nur als Notlösung machen würde, da ich ja auch dann für jeden Listenpunkt eine neue Tabelle erstellen müsste...

Ich hoffe ich habe mich verständlich ausgedrückt:D
 
Hallo,

Um die einzelnen Elemente der Liste ist dann noch ein <p>-Tag, der für den Zeilenumbruch sorgt...
Zum Vergrößern anklicken....

Schön das man das auch mal so nebenbei erfährt.

Ich hätte mein letztes Hemd darauf verwetten können, dass der erste Post ein Verweis auf ein Listenelement wird
Zum Vergrößern anklicken....

Und warum schreibst du dann nicht gleich, das du keine semantisch korrekte Liste anwenden willst?

Wir helfen hier aus Freude und nicht um uns von Spaßvögeln verarschen zu lassen, die mit ihren Informationen nur nach und nach rausrücken.

Eigentlich wäre es dein Part gewesen, eine funktionierende Seite mit deinem aktuellen Quelltext bereitzustellen. Wer Informationen haben möchte sollte es den Hilfswilligen so einfach wie möglich machen.

Gruss

MrMurphy
 
Jetzt mal im Ernst, daß ist doch totaler Quatsch.
Code: 
<ol type="I">
<li>Listenpunkt 1</li>
<li>Listenpunkt 2</li>
<li>Listenpunkt 3</li>
</ol>
Code: 
<p><span>I</span><span style="margin-left:30px;">Listenpunkt 1</span></p>
<p><span>II</span><span style="margin-left:30px;">Listenpunkt 1</span></p>
<p><span>III</span><span style="margin-left:30px;">Listenpunkt 1</span></p>
 
Und warum schreibst du dann nicht gleich, das du keine semantisch korrekte Liste anwenden willst?
Zum Vergrößern anklicken....
Ist mir leider erst im Nachhinein gekommen, mein Fehler.

Wir helfen hier aus Freude und nicht um uns von Spaßvögeln verarschen zu lassen, die mit ihren Informationen nur nach und nach rausrücken.
Zum Vergrößern anklicken....
Hui, hier muss sich niemand auf den Schlips getreten fühlen. Findest du so eine Reaktion angebracht?
Ich habe in meiner Freizeit sicher besseres zu tun, als fremde Leute zu verarschen. Mein Kommentar war daher auch eher Selbstkritik. Naja Schwamm drüber, hatte mich einfach falsch ausgedrückt.

Nochmal zu der Liste:
Ich würde wirklch gerne auf die einfache und sichere <ol> - Methode zurückgreifen, aber ich weiß nicht, ob es wirklich browserfreundlich ist , eine Liste über eine Millionen Codezeilen zu ziehen, von denen vielleicht jede hundertste Zeile ein <li>-Element ist.

Die HTML-Datei besteht quasi nur aus Paragraph-Segementen (<p></p>). An der Zahl etwa 20.000.
Ein paar dieser Segmente müssen wie gesagt in die Liste eingearbeitet werden.

Ist es sinnvoll, das mit einer <ol>/<ul> zu managen?

Was meint ihr dazu?
 
Zuletzt bearbeitet von einem Moderator:
Hallo,

deine Angaben zu der Liste sind nicht so recht nachvollziehbar. Was sinnvoll ist läßt sich nur anhand eines konkreten Beispiels erkennen.

Es gibt also eine HTML-Datei mit locker über 10.000 Einträgen, bestehend aus Absätzen, die wiederum in span-Elemente unterteilt sind, wobei das erste span-Element römische Ziffern darstellt? Die dann ja auch bis über 10.000 gehen müssen?

Oder werden die römischen Ziffern erst später in die selektierten Datensätze eingefügt? Wenn ja - wie?

Und du willst notfalls sogar auf eine HTML-Tabelle zurückgreifen?

Ich kann nicht nachvollziehen das das einfacher sein soll als einfach eine ol-Liste zu erstellen mit einer einzigen css-Anweisung, ohne Formatierungen im Quelltext:

Code: 
         list-style-type:upper-roman;

Dann würden die Browser die römischen Ziffern automatisch korrekt einfügen:

http://foreninfo.bplaced.net/seiten_fremdprobleme/2014_06_05_beutler_02_liste_zentriert.html

Wenn es denn unbedingt span-Elemente sein sollen, kannst du den span ein display: inline-block mit auf den Weg geben und jedem ersten span-Element eine passende Breite, zum Beispiel

Code: 
      span {
         display: inline-block;
      }
      span:nth-child(1) {
         width: 1.5rem;
      }

Als Einheit kannst du auch jede andere zulässige nehmen, zum Beispiel px:

http://foreninfo.bplaced.net/seiten_fremdprobleme/2014_06_05_beutler_03_liste_zentriert.html

Die Formatierungsangaben im eigentlichen HTML-Quelltext entfallen dann natürlich auch.

Gruss

MrMurphy
 
Zuletzt bearbeitet:
Er sollte uns mal lieber eine Kostprobe vom Word-Dokumnet geben, damit wir endlich mal wissen wie es aussehen soll. Ich hab da so eine Ahnung.
 
Es gibt also eine HTML-Datei mit locker über 10.000 Einträgen, bestehend aus Absätzen, die wiederum in span-Elemente unterteilt sind, wobei das erste span-Element römische Ziffern darstellt? Die dann ja auch bis über 10.000 gehen müssen?

Oder werden die römischen Ziffern erst später in die selektierten Datensätze eingefügt? Wenn ja - wie?
Zum Vergrößern anklicken....

Ok ich hole mal aus:
Ich schreibe große, vorlesungsbegleitende Zusammenfassungen, die eigentlich komplett aus Aufzählungen bestehen. Sprich man hat Punkt 1, Punkt 1.1, Punkt 1.1.1 mit insgesamt 9 Ebenen.
Da ich Jahre brauchen würde, um solche Auflistungen in einem HTML-Editor zu schreiben, verwende ich ein klassisches Word-Dokument und lasse dieses dann in htm-Format konvertieren.

Mich wundert es schon, dass Word selbst keine Listenelemente verwendet, weshalb ich darauf schloss, dass man bei solchen großen Aufzählungen mit ständig wechselnder Ebene ohne Listen besser bedient sei. Aber evtl. sind die Microsoft-Entwickler ja auch einfach nicht so HTML-versiert...

Er sollte uns mal lieber eine Kostprobe vom Word-Dokumnet geben
Zum Vergrößern anklicken....
Jup, hier mal ein kleiner Codeauszug (so sieht die komplette Rohversion der konvertierten Worddatei aus):
Code: 
<p class=MsoListParagraphCxSpFirst style='margin-left:1.0cm;text-indent:-1.0cm'><b><span
style='font-size:12.0pt;line-height:115%'>I<span style='font:7.0pt "Times New Roman"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</span></span></b><b><u><span style='font-size:14.0pt;line-height:115%'>|AnkerLink|Inkfektionen
des ZNS|AnkerLinkEnd|</span></u></b></p>

<p class=MsoListParagraphCxSpMiddle style='margin-left:1.0cm;text-indent:-14.15pt'><span
style='font-size:12.0pt;line-height:115%'>-<span style='font:7.0pt "Times New Roman"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</span></span><u><span style='font-size:12.0pt;line-height:115%'>|AnkerLinkP|Meningitis|AnkerLinkEnd|</span></u></p>

<p class=MsoListParagraphCxSpMiddle style='margin-left:42.55pt;text-indent:
-14.2pt'><span style='font-size:12.0pt;line-height:115%;font-family:Wingdings'>Ø<span
style='font:7.0pt "Times New Roman"'> </span></span><b><span style='font-size:
12.0pt;line-height:115%'>|AnkerLinkPP|Anatomie|AnkerLinkEnd|</span></b></p>

<p class=MsoListParagraphCxSpMiddle style='margin-left:42.55pt;text-indent:
-14.2pt'><span style='font-size:12.0pt;line-height:115%;font-family:Wingdings'>Ø<span
style='font:7.0pt "Times New Roman"'> </span></span><b><span style='font-size:
12.0pt;line-height:115%'>|AnkerLinkPP|Formen|AnkerLinkEnd|</span></b></p>

<p class=MsoListParagraphCxSpMiddle style='margin-left:42.55pt;text-indent:
-14.2pt'><span style='font-size:12.0pt;line-height:115%;font-family:Wingdings'>Ø<span
style='font:7.0pt "Times New Roman"'> </span></span><b><span style='font-size:
12.0pt;line-height:115%'>|AnkerLinkPP|Pathogenese|AnkerLinkEnd|</span></b></p>

<p class=MsoListParagraphCxSpMiddle style='margin-left:42.55pt;text-indent:
-14.2pt'><span style='font-size:12.0pt;line-height:115%;font-family:Wingdings'>Ø<span
style='font:7.0pt "Times New Roman"'> </span></span><b><span style='font-size:
12.0pt;line-height:115%'>|AnkerLinkPP|Klinik|AnkerLinkEnd|</span></b></p>

<p class=MsoListParagraphCxSpMiddle style='margin-left:42.55pt;text-indent:
-14.2pt'><span style='font-size:12.0pt;line-height:115%;font-family:Wingdings'>Ø<span
style='font:7.0pt "Times New Roman"'> </span></span><b><span style='font-size:
12.0pt;line-height:115%'>|AnkerLinkPP|Diagnostik|AnkerLinkEnd|</span></b></p>

<p class=MsoListParagraphCxSpMiddle style='margin-left:42.55pt;text-indent:
-14.2pt'><span style='font-size:12.0pt;line-height:115%;font-family:Wingdings'>Ø<span
style='font:7.0pt "Times New Roman"'> </span></span><b><span style='font-size:
12.0pt;line-height:115%'>|AnkerLinkPP|Therapie|AnkerLinkEnd|</span></b></p>

<p class=MsoListParagraphCxSpMiddle style='margin-left:42.55pt;text-indent:
-14.2pt'><span style='font-size:12.0pt;line-height:115%;font-family:Wingdings'>Ø<span
style='font:7.0pt "Times New Roman"'> </span></span><b><span style='font-size:
12.0pt;line-height:115%'>|AnkerLinkPP|Prophylaxe|AnkerLinkEnd|</span></b></p>

<p class=MsoListParagraphCxSpMiddle style='margin-left:1.0cm;text-indent:-14.15pt'><span
style='font-size:12.0pt;line-height:115%'>-<span style='font:7.0pt "Times New Roman"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</span></span><u><span style='font-size:12.0pt;line-height:115%'>|AnkerLinkP|Enzephalitis|AnkerLinkEnd|</span></u></p>

<p class=MsoListParagraphCxSpMiddle style='margin-left:42.55pt;text-indent:
-14.2pt'><span style='font-size:12.0pt;line-height:115%;font-family:Wingdings'>Ø<span
style='font:7.0pt "Times New Roman"'> </span></span><b><span style='font-size:
12.0pt;line-height:115%'>|AnkerLinkPP|Formen|AnkerLinkEnd|</span></b></p>

<p class=MsoListParagraphCxSpMiddle style='margin-left:42.55pt;text-indent:
-14.2pt'><span style='font-size:12.0pt;line-height:115%;font-family:Wingdings'>Ø<span
style='font:7.0pt "Times New Roman"'> </span></span><b><span style='font-size:
12.0pt;line-height:115%'>|AnkerLinkPP|Klinik|AnkerLinkEnd|</span></b></p>

<p class=MsoListParagraphCxSpMiddle style='margin-left:42.55pt;text-indent:
-14.2pt'><span style='font-size:12.0pt;line-height:115%;font-family:Wingdings'>Ø<span
style='font:7.0pt "Times New Roman"'> </span></span><b><span style='font-size:
12.0pt;line-height:115%'>|AnkerLinkPP|Diagnostik|AnkerLinkEnd|</span></b></p>

<p class=MsoListParagraphCxSpMiddle style='margin-left:42.55pt;text-indent:
-14.2pt'><span style='font-size:12.0pt;line-height:115%;font-family:Wingdings'>Ø<span
style='font:7.0pt "Times New Roman"'> </span></span><b><span style='font-size:
12.0pt;line-height:115%'>|AnkerLinkPP|Therapie|AnkerLinkEnd|</span></b></p>

<p class=MsoListParagraphCxSpMiddle style='margin-left:1.0cm;text-indent:-14.15pt'><span
style='font-size:12.0pt;line-height:115%'>-<span style='font:7.0pt "Times New Roman"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</span></span><u><span style='font-size:12.0pt;line-height:115%'>|AnkerLinkP|Meningo-Enzephalitis|AnkerLinkEnd|</span></u></p>

<p class=MsoListParagraphCxSpMiddle style='margin-left:42.55pt;text-indent:
-14.2pt'><span style='font-size:12.0pt;line-height:115%;font-family:Wingdings'>Ø<span
style='font:7.0pt "Times New Roman"'> </span></span><b><span style='font-size:
12.0pt;line-height:115%'>|AnkerLinkPP|Klinik|AnkerLinkEnd|</span></b></p>

<p class=MsoListParagraphCxSpMiddle style='margin-left:42.55pt;text-indent:
-14.2pt'><span style='font-size:12.0pt;line-height:115%;font-family:Wingdings'>Ø<span
style='font:7.0pt "Times New Roman"'> </span></span><b><span style='font-size:
12.0pt;line-height:115%'>|AnkerLinkPP|Diagnostik|AnkerLinkEnd|</span></b></p>

<p class=MsoListParagraphCxSpMiddle style='margin-left:1.0cm;text-indent:-14.15pt'><span
style='font-size:12.0pt;line-height:115%'>-<span style='font:7.0pt "Times New Roman"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</span></span><u><span style='font-size:12.0pt;line-height:115%'>|AnkerLinkP|Frühsommer-Meningo-Enzephalitis
(FSME)|AnkerLinkEnd|</span></u></p>

<p class=MsoListParagraphCxSpMiddle style='margin-left:1.0cm;text-indent:-14.15pt'><span
style='font-size:12.0pt;line-height:115%'>-<span style='font:7.0pt "Times New Roman"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</span></span><u><span style='font-size:12.0pt;line-height:115%'>|AnkerLinkP|Neuroborreliose|AnkerLinkEnd|</span></u></p>

<p class=MsoListParagraphCxSpMiddle style='margin-left:42.55pt;text-indent:
-14.2pt'><span style='font-size:12.0pt;line-height:115%;font-family:Wingdings'>Ø<span
style='font:7.0pt "Times New Roman"'> </span></span><b><span style='font-size:
12.0pt;line-height:115%'>|AnkerLinkPP|Pathogenese|AnkerLinkEnd|</span></b></p>

Anahnd des Style-Attributes der Paragraphen-Tags kann ich die Ebene identifizieren, alles weitere regelt sich von selbst.

Aussehen sollte das Ganze hinterher so:
Code: 
I   Listenpunkt 1
    Listenpunkt 1.1
      Listenpunkt 1.1.1
II  Listenpunkt 2
    Listenpunkt 2.1
      Listenpunkt 2.1.1
III Listenpunkt 3
    Listenpunkt 3.1
      Listenpunkt 3.1.1

Es soll quasi nur eine Nummerierung der obersten Ebene erfolgen. Alle weiteren Aufzählungen werden zwar entsprechend eingerückt, bleiben aber von der Nummerierung ausgeschlossen (so sieht es im Inhaltsverzeichnis aus).

Im Hauptteil des Dokuments sieht es vom Word-Inhalt gleich aus, jedoch bekommen dort auch die Unterpunkte ein Aufzählungszeichen. Deshalb weiß ich nicht genau, wie ich da mit Listenelementen arbeiten soll. Ich müsste ja neun Listen öffnen, die nicht einmal korrekt verschachtelbar wären, da die eine Liste zwar früher auf-, aber später geschlossen werden kann...

Versteht ihr mein Dilemma nun?

Wenn es denn unbedingt span-Elemente sein sollen, kannst du den span ein display: inline-block mit auf den Weg geben und jedem ersten span-Element eine passende Breite
Zum Vergrößern anklicken....
Exakt dasselbe habe ich gestern schon versucht, aber dann steht das Listenzeichen plötzlich ganz rechtsbündig... Liegt das am Flow??

list-style-type:upper-roman;
Zum Vergrößern anklicken....
Habe ich auch versucht, jedoch fehlen dann die Aufzählungszeichen aus irgendeinem Grund..
Hier mal mein fertig konvertiertes HTML-Script (ein Ausschnitt) mit <ol>:
Code: 
<ol style="list-style-type:upper-roman;">
<li class="summary_index_01" style="font-size:1.1em;font-weight:bold;"><a href="#a_1">Inkfektionen
des ZNS</a></li>

<p class="summary_index_02"><span style="margin-left:50px;"><a class="part" href="#a_2">Meningitis</a></span></p>

<li class="summary_index_01" style="font-size:1.1em;font-weight:bold;"><a href="#a_27">Atemwegs-Infektionen
(AWI)</a></li>

<p class="summary_index_02"><span style="margin-left:50px;"><a class="part" href="#a_28">Virale
Infektionen</a></span></p>
</ol>
Woran könnte es liegen? Evtl an den <p>-Segmenten zwischen den <li> die nicht zur Liste gehören?
 
Zuletzt bearbeitet von einem Moderator:
Na ein Word Dokument in HTML zu konvertieren ist immer so eine Sache.
Aber ich meinte eine original Word-Datei (eine Seite)
 
Word.png

So sieht z.B. ein Teil des Inhaltsverzeichnisses aus. Allerdings werden alle Aufzählungszeichen bis auf I/II/III... entfernt.
Im auf das Inhaltsverzeichnis folgenden Hauptteil sind diese Aufzählungszeichen jedoch vorhanden.
 
Das sieht so aus, als hättest du im Word im Normal-Modus gearbeitet.

Also, wenn du eine Überschrift möchtest musst du eine nehmen. Wenn du eine Liste brauchst musst du eine Liste nehmen.
Hier mal mein Ergebnis mit LibreOffice 3.5 (Linux) und in HTML gespeichert.
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
   <META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=utf-8">
   <TITLE></TITLE>
   <META NAME="GENERATOR" CONTENT="LibreOffice 3.5  (Linux)">
   <STYLE TYPE="text/css">
   <!--
     @page { margin: 2cm }
   -->
   </STYLE>
</HEAD>
<BODY LANG="de-DE" DIR="LTR">
<H1>Neues Thema</H1>
<OL TYPE=I>
   <LI><P>Listenelement</P>
    <OL>
    <LI><P>Listenelement</P>
    <OL>
    <LI><P>Listenelement</P>
    </OL>
    </OL>
   <LI><P>Listenelement</P>
    <OL>
    <LI><P>Listenelement</P>
    <OL>
    <LI><P>Listenelemen</P>
    </OL>
   </OL>
</OL>
<P>Das sollte ein Absatz werden</P>

</BODY>
</HTML>
Ein paar Ecken und Kanten wird es wohl immer geben.
 
Hm... es ist kein Normalformat, sondern ein auf dem Standart-Listenformat basiertes, abgewandeltes Listenformat von Word... Offensichtlich scheint dein Linux-Programm ein besseres Verständnis von HTML-Konvertierung zu haben.:rolleyes:

Nochmal zu der Frage von oben:
Ich habe nun einmal versucht eine Liste drüberzuziehen, jedoch werden die Aufzählungszeichen I/II/III ... nicht angezeigt.
Würdest du bei Zeit mal über den Quelltext schauen und mir weiterhelfen (wenn möglich)?
Hier der Link zu meiner Website mit der Beispiel-Zusammenfassung:
http://www.futurdocs.de/Studies/Clinic/QB/index.php?n=1.3.8&f=summary_04

Es geht nur um das Inhaltsverzeichnis. Die Listenpunkte, bei denen ein Aufzählungszeichen erscheinen sollte, sind hell-orange und ohne margin-left ganz linksbündig.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben