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

Inhaltsverzeichnis erstellen

K

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
 
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
 
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
 
Tronjer schrieb:
Semantisch ist das aber eine Liste.
Zum Vergrößern anklicken....
https://jsfiddle.net/Aaron3219/ty44e7ph/14/
;)

MrMurphy schrieb:
eine dl-Liste in HTML die korrekte Lösung
Zum Vergrößern anklicken....
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.
 
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
 
MrMurphy schrieb:
Erst recht das sachliche Auseinanderreißen von Bezeichnung und Seitenzahl in zwei unterschiedliche Listen.
Zum Vergrößern anklicken....
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:
MrMurphy schrieb:
sachlich falsch
Zum Vergrößern anklicken....
sein soll.
 
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
 
Klausi schrieb:
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.
Zum Vergrößern anklicken....
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.
 
Klausi schrieb:
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.
Zum Vergrößern anklicken....
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
 
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.
 
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
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben