Who said listings couldn't be cool?

  • Who said listings couldn't be cool?

    Ich musste heute für einen Kunden ein paar Listen grafisch aufwerten, dies war eine davon (welche leider abgelehnt wurde). Ich denke bei dem Rahmen muss ich mir noch was überlegen, da gefallen mir die rechten Ecken noch nicht. Vielleicht entferne ich die obere & untere Linie sowie die Rundungen, mal schauen.

    Alles komplett via CSS, keine Grafiken verwendet, somit sieht das ganze mit bis zu 999 Punkten noch gut aus (mal abgesehen davon, das eine Website mit 999 Listenelementen am Stück nicht gerade toll aussieht... ;-)). Die Nummern werden automatisch fortgeführt und werden in der Höhe zentriert, also weniger etwas für Listenelemente mit viel Content, wobei man sie in diesem Fall auch ganz einfach nach oben schieben könnte.

    Falls Interesse besteht arbeite ich das ganze etwas auf und stelle den Code vielleicht hier rein.
    Bilder
    • cool-listings.jpg

      181,73 kB, 765×378, 183 mal angesehen
    Aufgrund von Zeitmangel kann ich derzeit keine neuen Inhalte schreiben und biete lediglich Support im Bereich Webdesign und CSS.
    KEIN PN-Support.

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von InitArt ()

  • Richtig, das wird mit before und content umgesetzt, ganz schlicht:

    CSS-Quellcode

    1. ol {
    2. counter-reset: li; /* Counter einleiten */
    3. }
    4. ol > li:before {
    5. content: counter(li); /* Den Counter als Content verwenden */
    6. counter-increment: li; /* Den Counter jeweils um 1 nach oben zählen lassen */
    7. }


    Und ein Beispiel dazu:
    jsfiddle.net/GPkvC/ (Normalized CSS => ohne muss natürlich noch ein list-style: none; dazu!)
    Aufgrund von Zeitmangel kann ich derzeit keine neuen Inhalte schreiben und biete lediglich Support im Bereich Webdesign und CSS.
    KEIN PN-Support.

    Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von InitArt ()