Beispiel:List-style-Zeitstrahl.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<!DOCTYPE html> <html lang="de"> <head> 

 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <link rel="stylesheet" media="screen" href="./Beispiel:Grundlayout.css" />
 <title>CSS - Zeitstrahl</title>
 <style>

main { 

   background: #f1f3f4;
   border-color: #8a9da8;


}

  1. zeitleiste {
 position: relative;
 margin-left: 7.5em;
 list-style-type: none;

}

  1. zeitleiste::before {
 position: absolute;
 content: "";
 bottom: 0;
 left: 0;
 top: 0;
 background: #3983ab;
 width: 0.4em;

}

  1. zeitleiste::after {
 position: absolute;
 content: "";
 bottom: -1.3em;
 left: -0.8em;
 width: 0;
 height: 0;
 border-width: 1em;
 border-style: solid;
 border-color: #3983ab transparent transparent transparent;

}

  1. zeitleiste >li::before{
 position: absolute;
 content: "";
 width: 1em;
 height: 1em;
 left: -0.5em;  
 border-radius: 50%;
 border: 0.2em solid #3983ab;
 background: #dfac20;

}

  1. zeitleiste >li {
 margin-bottom: 3em;

}

li h3 { 

 margin: -1em 0 0.2em;

}

time { 

   display: block;

font-weight: bold; margin-left: -10em; width: 6.5em; text-align:right; } 

 </style>

</head>

<body id="go">

CSS - Zeitstrahl

 <main>

  • SelfHTML geht online.

  • Das Self-Forum

             Das Forum beantwortet Fragen und wird vom Tummelplatz technikaffiner Webialisten zur Community.

  • SelfHTML-Aktuell

             SelfHTML-Aktuell ergänzt die Dokumentation mit Artikeln zu Einzelthemen

  • Selfhtml e.V.

             Mit der Vereinsgründung wird ein organisatorischer Unterbau geschaffen.

  • Blog

             eine bequeme Möglichkeit aktuelle Artikel zu veröffentlichen

  • Wiki

             Das Wiki geht online.

  • Totgesagte leben länger - Selfhtml wird 20

    • Die Lücken im Wiki sind weitgehend geschlossen.
    • Das neue Forum 4.3 geht an den Start.
    • Die alte Doku 8.12 wird abgeschaltet.
 </main>

</body> </html>

Abgerufen am 27.07.2026
von "http://wiki.selfhtml.org/wiki/Beispiel:List-style-Zeitstrahl.html"