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

Inhaltsverzeichnis erstellen

Klausi

Neues Mitglied
Wie bitte erstelle ich richtig mit html und css ein Inhaltsverzeichnis für ein Buch. Beispiel
Bäume Seite 4
Blumen aus dem Garten Seite 12
Sträucher nahe am Teich mit Steinen Seite 24
Also, der Inhalt soll untereinander stehen und die Seiten. Dazwischen unterschiedlicher Freiraum. Eine Lösung könnte eine Tabelle sein??
Oder gibt es hierfür eine Art "Tabulator" wie bei Word? Danke für jeden Hinweis.
Klausi
 

Klausi

Neues Mitglied
Hallo Aaron3219, genau das ist die von mir gesuchte Antwort! Herzlichen Dank dafür. :)Im Detail werde ich da jetzt herumexperimentieren. Aber ganz ehrlich gesagt verstehe ich die Lösung absolut nicht. Niemals wäre ich darauf gekommen und in meinen schlauen Büchern steht nichts in dieser Richtung. Insbesonder das > Zeichen zwischen .main und div ist für mich ein Rätsel. Danke, Gruß Klausi
 

MrMurphy

Senior HTML'ler
Hallo

Da zwischen dem Text und der Seitenzahl ein Zusammenhang besteht ist sachlich eine dl-Liste in HTML die korrekte Lösung. Zum Layout würde ich dann auch Flexbox bevorzugen.

Damit läßt sich dann auch problemlos ein responsives Design erstellen.

Gruss

MrMurphy
 

Aaron3219

Senior HTML'ler
Semantisch ist das aber eine Liste.
https://jsfiddle.net/Aaron3219/ty44e7ph/14/
;)

eine dl-Liste in HTML die korrekte Lösung
Meinst du?
Ich persönlich würde einfach zur Standard-li-Liste tendieren, denn eine Description-List ist es ja eigentlich nicht.
Außerdem würde dann das coole <ol>-Feature nicht mehr funktionieren :D.

Letztendlich funktioniert es beides. Ob man da nun li oder dl verwendet, wäre meiner Meinung nach einfach eine zufällige Entscheidung.
 

MrMurphy

Senior HTML'ler
Hallo

Nach den HTML-Regeln ist für Inhaltsverzeichnisse nur das dl-Element korrekt. ul- und ol-Elemente sind sachlich falsch.

Erst recht das sachliche Auseinanderreißen von Bezeichnung und Seitenzahl in zwei unterschiedliche Listen.

Gruss

MrMurphy
 

Aaron3219

Senior HTML'ler
Erst recht das sachliche Auseinanderreißen von Bezeichnung und Seitenzahl in zwei unterschiedliche Listen.
Mal abgesehen davon, dass man nun also nur dl-Listenelemente nutzt, ist das Auseinanderreißen ist für mich kein Fehler. Für mich höchstens ein Ding der Sauberkeit und Einheit.

Aber wir wollen hier ja jeden zufriedenstellen, also auch hier eine Version:
https://jsfiddle.net/Aaron3219/ty44e7ph/16/

Ich würde mich dennoch über eine Erklärung deinerseits freuen, inwiefern meine Variante:
sein soll.
 

Klausi

Neues Mitglied
Mit großem Interesse verfolge ich im Hintergrund die entstandene Diskussion. Ich versuche jetzt noch den Code dahingehend zu ergänzen, dass die Seitenzahlen immer rechtsbündig sind. Ich denke, ich sollte das hinbekommen. Was mir nicht so gefällt - aber damit muss ich wohl leben - ist der Sachverhalt, dass man bei einem längeren Inhaltsverzeichnis die Übersicht verliert. Damit meine ich, dass vielleicht von der 53. Zeile des Inhaltsverzeichnisses die dazugehörige Seitenzahl nicht einfach so (jedenfalls nicht im Code) erkannt werden kann. Wenn sich jetzt die Seitenzahlen ändern muss man viel hin und her scrollen. Aber ich bin ja schon mit dem jetzigen Ergebnis zufrieden. Klar würde das auch gehen wenn man den Code laufend wechselt........
Allen Bedeiltigten an dieser Diskussion gilt mein Dank.
Klausi
 

Aaron3219

Senior HTML'ler
Was mir nicht so gefällt - aber damit muss ich wohl leben - ist der Sachverhalt, dass man bei einem längeren Inhaltsverzeichnis die Übersicht verliert. Damit meine ich, dass vielleicht von der 53. Zeile des Inhaltsverzeichnisses die dazugehörige Seitenzahl nicht einfach so (jedenfalls nicht im Code) erkannt werden kann.
Das geht und ist gar nicht so schwer. Du müsstest dann hierfür Javascript benutzen.
Wenn ich es nicht vergesse, mach ich auch hier mal ein Beispiel fertig, bin aber gerade auf dem Sprung. Also ein bisschen Geduld.

Ich mach es dann als Edit rein, also ab und zu mal die Seite aktualisieren.
 

Sempervivum

Senior HTML'ler
Was mir nicht so gefällt - aber damit muss ich wohl leben - ist der Sachverhalt, dass man bei einem längeren Inhaltsverzeichnis die Übersicht verliert. Damit meine ich, dass vielleicht von der 53. Zeile des Inhaltsverzeichnisses die dazugehörige Seitenzahl nicht einfach so (jedenfalls nicht im Code) erkannt werden kann.
Ja, das ist ein Nachteil aber Du brauchst dich damit nicht abzufinden: So stehen Text und Seitenzahl direkt beieinander, ohne dass man Javascript benötigt:
https://jsfiddle.net/Sempervivum/g7wrkL7g/2/
 

basti1012

Senior HTML'ler
Was mir nicht so gefällt - aber damit muss ich wohl leben - ist der Sachverhalt, dass man bei einem längeren Inhaltsverzeichnis die Übersicht verliert. Damit meine ich, dass vielleicht von der 53. Zeile des Inhaltsverzeichnisses die dazugehörige Seitenzahl nicht einfach so (jedenfalls nicht im Code) erkannt werden kann. Wenn sich jetzt die Seitenzahlen ändern muss man viel hin und her scrollen.
Schwer zu sagen.Ich glaube er meint das was @Sempervivum verbessert hat .Das er den Text und Seitenzahl im Quelltext nicht mehr suchen muß und wie es jetzt ist beisammen steht
 

Klausi

Neues Mitglied
Es wird so gut wie nie vorkommen, dass sich alles komplett im Inhaltsverzeichnis verschiebt. Mir ging es nur darum, dass selbst in einem Einzelfall man einen (unnötigen) Aufwand hat um einem Textteil die richtige Seitenzahl zuzuordnen. Ich denke einfach der Vorschlag von Sempervivum ist übersichtlich und man kann ohne viel Zeitaufwand einzelne oder mehrere Stellen bei Bedarf übersichtlich verändern.
 

MrMurphy

Senior HTML'ler
Hallo

Eine Lösung mit korrektem HTML.

HTML-Quelltext:

Code:
      <dl class="inhalt">
         <dt>Mulmiger Knöterich</dt>
         <dd>5</dd>
         <dt>Dünenstinkmorchel</dt>
         <dd>7</dd>
         <dt>Scheuer Kalmück im roten Gewande</dt>
         <dd>11</dd>
         <dt>Kuhfladenträuschling</dt>
         <dd>17</dd>
         <dt>Ruppiger Stiesel</dt>
         <dd>102</dd>
      </dl>

Das CSS dazu:

Code:
      .inhalt {
         max-width: 800px;
         display: flex;
         flex-wrap: wrap;
      }
      .inhalt dt {
         font-weight: normal;
         margin: 0rem 0rem 1rem 0rem;
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: calc(100% - 4rem);
      }
      .inhalt dd {
         text-align: right;
         margin: 0rem 0rem 1rem 0rem;
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: 4rem;
      }

Ein praktisches Beispiel:

http://boratb.bplaced.net/index008.html

Gruss

MrMurphy
 
Werbung:

Neueste Beiträge

Oben