Peruns Weblog - Webwork und Internet

Ist das private Weblog von Vladimir Simovic mit Berichten zum Thema Webwork und Internet. Ich wohne in Köln und arbeite als freier Webworker, Blogger und Autor.

Inhaltsverzeichnis mit (X)HTML und CSS

Perun am 13. März 2007 um 11:01 Uhr

Derek Punsalan stellt einen interessanten Ansatz wie man mittels CSS ein ansprechendes Inhaltsverzeichnis realisieren kann. Dabei kommen Listen zum Einsatz und der Listeninhalt der zuerst im Quelltext vorkommt wird rechts gefloatet und der nachfolgende Inhalt wird links gefloatet und das ganze Listenelement bekommt als Hintergrund eine 1×1 Pixel Grafik welche eine dünne Linie simuliert … lange rede kurzer Sinn, am besten man schaut sich das Beispiel direkt an.

Via F-LOG-GE.

Verwandte Beiträge

Kategorien:
HTML-CSS
Tags:
 
Beitrag:
Trackback-Adresse und die Druckvorschau
Kommentare:
Kommentare verfolgen oder ein Kommentar abgeben

«« Zum vorherigen Beitrag — Zum nächsten Beitrag »»

5 Kommentare »»

  1. 1. – Martin

    Kommentar vom 13. März 2007 um 12:59

    Eigentlich nicht ganz neu. Und dort wurden ja auch Vorschläge gemacht, wie man das ohne Grafik realisieren kann.

  2. 2. – Perun

    Kommentar vom 13. März 2007 um 14:19

    Hallo Martin,

    da kennst du aber den Inhalt meines Weblogs besser als ich :razz:.
    Vielen Dank für den Hinweis.

  3. 3. – Peter Kröner - Webdesign und mehr

    Pingback vom 14. März 2007 um 00:54

    [...] Die bei Perun gefundene Methode zur Gestaltung eines Inhaltsverzeichnisses mit CSS ist ganz nett. Andererseits kommt die Weiterentwicklung dieser Methode mit saubererem HTML und ohne die Verwendung von Bildern zu einem vergleichbaren Ergebnis. [...]

  4. 4. – andreas

    Kommentar vom 15. März 2007 um 11:36

    es ist offensichtlich nicht möglich html tags zu benutzen. ich meine die sinnfreien breaks stören mich.

  5. 5. – Perun

    Kommentar vom 15. März 2007 um 11:38

    @Andreas,

    es ist offensichtlich nicht möglich html tags zu benutzen.

    Etwa 15 Pixel über der Textbox steht folgendes geschrieben … sogar hervorgehoben:

    Code-Beispiele: damit die Code-Beispiele richtig angezeigt werden müssen die Sonderzeichen maskiert werden (z. B. < zu &lt;).

Einen Kommentar hinterlassen

XHTML (folgende Tags sind erlaubt): <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> . Kommentar-Vorschau ist aktiviert (Javascript wird benötigt).

Code-Beispiele: damit die Code-Beispiele richtig angezeigt werden müssen die Sonderzeichen maskiert werden (z. B. < zu &lt;).

Live-Vorschau: