Table of Contents - Idee

[Wiesl]

Hallo Leute!

Ich bin neu hier und hoffe, hier ein paar Idden zu bekommen.
Ich bin völlig neu in Webdesign und html/css, aber lernwillig und durchaus durchhaltewillig ;)

Meine erste Seite nimmt auch langsam Formen an, nur hänge ich sowohl design- wie auch programmiertechnisch jetzt an einer ziemlich banalen Stelle.

Ich habe eine News-Unterseite, auf der ich chronologisch alle News aufliste.
Hier kommen ca. 4 News pro Monat und diese haben ca. 20-50 Zeilen, also verhältnismäßig lang.

Folgendes Problem, da die letzte natürlich die wichtigste ist steht sie oben, ich möchte die anderen aber zumindest recherchierbar machen (ohne unzählige Unterseiten).

Meine Herangehensweise war folgende:

* eine <select>-Liste oben rechts mit width:200px; --> zuerst wird nur das Datum angezeigt, und falls man sie öffnet: Datum -- Überschrift.
Und nach jeder News einen Link mit "zum Seitenanfang" mit Anker.

Vorteil: --> kleine Navigation rechts oben
--> bei Klick sieht der besucher auch die Überschrift nicht nur das Datum

Nachteil bzw. Problem: -->Ich kann keinerlei Links, weder zur einer neuen Seite, noch zu einem Ankerpunkt im Dokument setzen, die Liste macht einfach nichts ;)

Daher meine Frage:
Sollte ich den Umweg evtl. über javascript gehen (sofern das möglich ist), um die <select> Liste mit Links zu versehen,
oder wie kann man ansonsten eine schöne recherchierbare News -Sektion entwerfen, ohne jede News auf einzelne Seiten o.ä. zu verfrachten (was immer noch die Frage nach der Navigation offen ließe).

MfG
Wiesl

 

[Tronjer]

Warum kein Blog oder CMS?

 

[Wiesl]

die News-Seite wäre "nur" eine Unterseite einer ganzen Seite!
Und da dies mein erstes sog. Lernprojekt ist, möchte ich es gerne zuallererst mit Notepad++ und Konsorten erstellen, um es von Grund aus zu lernen.

Also verstehe ich dich richtig, dass es fast nicht sinnvoll möglich ist, eine kleine Table of Content Navigation mit Links zu erstellen?
Mir würden schon ein paar Krümmel helfen, nur leider hänge ich hier komplett ;)

 

[Tronjer]

Eine Select-Liste verwendet man normaler Weise in Formularen um Daten zum Server zu schicken.
Natürlich lässt sich das per JS auch so modifizieren, dass entweder zu Links innerhalb einer Seite gescrollt oder Content asynchron nachgeladen wird. Krümel helfen dir hier aber nicht weiter, so lange du keine Grundlagenkenntnisse in JavaScript besitzt.

Warum gehst du es nicht langsamer an, schreibst erst mal ein paar einfache Seiten in reinem HTML/CSS und freust dich über das Erfolgserlebnis, anstatt gleich schwer überwindbare Hürden aufzubauen?

 

[Wiesl]

Also ich zeige dir gerne mal, wie weit ich bin ;)

http://magicreload.bplaced.net/index.html

das ist mein Projekt, an dem ich einfach mal dran bin!
Zur Info, ich habe weder einen Auftrag, noch verlange ich Geld, es ist im Moment rein ein Privatprojekt von mir, um ein wenig html und css zu lernen.

wenn du dir die Aktuelles -Seite mal ansehen möchtest, wirst du wahrscheinlich mein Problem auf dieser Unterseite verstehen.

Natürlich bin ich für alle anderen Tipps auch dankbar ,-), auch wenn du sagst:" Lass es, das hat keinen Sinn" ;)

MfG
Wiesl

 

[Tronjer]

Ich verstehe schon, worauf du hinaus willst, aber hier würde sich wirklich ein CMS anbieten, welches ein solches News-Modul bereit stellt.

Wenn ich dir jetzt einen Ansatz per Select-Liste erkläre, wirst du ihn nicht verstehen. ;)

 

[Tronjer]

Ich erkläre es dir trotzdem. Schreiben musst du es allerdings alleine.

Grundgedanke ist, dass bei der Auswahl eines Optionsfeld in der Liste zu einem Anker innerhalb der Seite gesprungen wird. Dazu sollte das Optionsfeld als value die ID der jeweiligen News übergeben werden. Außerdem benötigst du die jQuery Bibliothek und an Funktionen change() und scrollTop().

Ein Pattern könnte etwas so aussehen. Ich habe das jetzt aber nicht getestet.

$("select").on("change", function() {
  var newsID = $("select option:selected ").val();
  $("body").scrollTo("#" + newsID);
});