1. Start
  2. Hall of Suite
  3. Forum
  4. Suite-Quiz
  5. Magazin
  6. Wiki
  • Anmelden
  • Registrieren
  • Suche
Codes und Anleitungen
  • Alles
  • Codes und Anleitungen
  • Artikel
  • Seiten
  • Forum
  • wiki
  • Linkliste
  • Erweiterte Suche

Willkommen!

Um alle Funktionen nutzen zu können, solltest du dich registrieren. Wenn du schon registriert bist, solltest du dich anmelden.

Anmelden
oder
Registrieren
  1. suite user
  2. Lexikon
  3. Codes und Anleitungen

CSS Zeitleiste (Timeline) mit CSS & HTML für HTML-Seite oder HTML-Box

  • 16. August 2026 um 21:25
  • 15. September 2026 um 21:14
  • 130 mal gelesen
  • Zeitleiste (Timeline) für HTML-Seite oder HTML-Box.

    Der Inhalt kann nicht angezeigt werden, da du keine Berechtigung hast, diesen Inhalt zu sehen.

    CSS
    /* Timeline */
    .timeline {
        position: relative;
        max-width: 800px;
        margin: 40px auto;
        padding-left: 30px;
        border-left: 3px solid #4a6cf7;
        font-family: Arial, sans-serif;
    }
    
    .timeline-item {
        position: relative;
        margin-bottom: 40px;
    }
    
    .timeline-item::before {
        content: "";
        position: absolute;
        left: -11px;
        top: 5px;
        width: 16px;
        height: 16px;
        background: #135183;
        border-radius: 50%;
    }
    
    .timeline-date {
        font-weight: bold;
        color: #135183;
        margin-bottom: 5px;
    }
    
    .timeline-content {
    
        padding: 15px 20px;
        border-radius: 6px;
    }
    
    .timeline-content h3 {
        margin-top: 0;
        font-size: 18px;
    Alles anzeigen


    HTML
    <div class="timeline">
        <div class="timeline-item">
            <div class="timeline-date">Zeitpunkt A</div>
            <div class="timeline-content">
                <h3>Ereignis A</h3>
                       </div>
        </div>
    
        <div class="timeline-item">
            <div class="timeline-date">Zeitpunkt B</div>
            <div class="timeline-content">
                <h3>Ereignis B</h3>
             
            </div>
        </div>
    
        <div class="timeline-item">
            <div class="timeline-date">Zeitpunkt C</div>
            <div class="timeline-content">
                <h3>Ereignis C</h3>
                
            </div>
        </div>
    </div>
    Alles anzeigen
    • Zitieren
  • Vorheriger Eintrag WSC 6.2 HTML / Java Script Demo-Startseite 2.1 DE / EN

Kategorien

  1. Codes und Anleitungen 15
  2. Tools & Generatoren 15
  1. Kontakt
  2. Nutzungsbedingungen
  3. Datenschutzerklärung
  4. Impressum
Lexikon, entwickelt von www.viecode.com
Server-Standort Deutschland   ✔    

Community-Software: WoltLab Suite™
Stil: Atlas von cls-design
Stilname
Atlas
Hersteller
cls-design
Lizenz
Kostenpflichtige Stile
Hilfe
Supportforum
cls-design besuchen