Depot43-Unterlagen

HTML Elemente
            
            



<!doctype html>
<html lang="de">
<head>
	<meta charset=utf-8>
	<title>HTML5 / CSS - Timeline</title>
	<style>
        ul.ContainerSpalten {
            margin-top: 1.8ex;
            column-count: 3;
            column-gap: 1em;
            column-width: 88%;
            orphans: 2;
            widows: 2;
            margin-bottom: 24px;
        }
        ul {
            list-style-type: none;
        }
        .ticker-item {
            position: relative;
            margin-top: 3px;
		margin-left:6px;
            padding: 6px 16px 30px;
            /*border-top: 1px solid #cac8bf;*/
            border-left: 1px solid #333;
            break-inside: avoid;
            break-before: avoid;
            break-after: avoid;
        }
	.ticker-item img {
		width:100%;
		height:auto;
	}
        span.ticker-item__time {
            position:relative;
            padding-top: 11px;
            padding-left:15px;
            margin-top:0px;
            margin-left:-15px;
            color: red;
            display: block;
            border-top: 1px solid red;
        }
        span.ticker-item__time:before {
            content: "";
            position: absolute;
            height: 11px;
            width: 11px;
            top: -7px;
            left: -7px;
            background-color: #fff;
            border: 1px solid #333;
            border-radius: 50%;
        }
        /*.ticker-item:before {
            content: "";
            position: absolute;
            height: 11px;
            width: 11px;
            top: -7px;
            left: -7px;
            background-color: #fff;
            border: 1px solid #cac8bf;
            border-radius: 50%;
        }*/
        /* Medium Devices, Desktops */
        @media only screen and (max-width : 920px) {
            ul.ContainerSpalten {
                column-count: 2;
            }
        }
        @media only screen and (max-width : 600px) {
            ul.ContainerSpalten {
                column-count: 1;
            }
        }
	</style>
</head>
<body>
    <ul class="ContainerSpalten">
        <li class="ticker-item ticker-media">
            <span class="ticker-item__time">21:37</span>
                <h3 class="ticker-item__title">Soldaten verdrängen Spitalpersonal</h3>

            <p>Es gibt Missbräuche beim Corona-Einsatz der Armee: Spitäler fordern Soldaten als «Gratis-Hilfskräfte» an und schicken das eigene Pflegepersonal nach Hause. In der «Rundschau» von SRF bestätigt Verteidigungsministerin Viola Amherd solche Fälle: «Das ist schon passiert». Die Armee habe jeweils das Gespräch gesucht mit den Spital-Verantwortlichen: «Man redet mit ihnen und sagt: Ihr habt Leute in der Kurzarbeit. Nehmt diese Leute zurück.»</p><p>Die Armee habe wegen solchen Fällen auch schon Soldaten abgezogen aus Spitälern. Auf konkrete Fälle ging Amherd nicht ein. Vor einigen Tagen hatte die Genfer Sektion der Gewerkschaft VPOD das Genfer Universitätsspital scharf kritisiert, weil dieses trotz Kurzarbeit beim Pflegepersonal Soldaten einsetze. Das Spital selbst hatte die Kritik zurückgewiesen: Die Soldaten würden das Pflegepersonal nicht ersetzen, sagte ein Sprecher gegenüber der Zeitung «Tribune de Genève».</p>

        </li>
        <li class="ticker-item ticker-media">
            <span class="ticker-item__time">22:05</span>
                <h3 class="ticker-item__title">Welche Branchen sich fürs Homeoffice eignen – und welche nicht</h3>

            <p>Eine Studie der Universität Basel zeigt, dass die Möglichkeit zum Homeoffice mit der entsprechenden Branche einhergeht. So ist klar, dass diese in der Landwirtschaft kaum möglich ist, ganz im Gegensatz zu Tätigkeiten in der Verwaltung.</p>

        </li>
        <li class="ticker-item ticker-media">
        <span class="ticker-item__time">1:03</span>
            <h3 class="ticker-item__title">1.2 Milliarden weniger Flugpassagiere bis September 2020</h3>
    
        <p>Der internationale Flugpassagierverkehr könnte bis September 2020 um bis zu 1.2 Milliarden Reisende abnehmen. Dies schreibt die Internationale Zivilluftfahrtorganisation der Vereinten Nationen (ICAO) unter Berufung auf Prognosen. Das würde einem Rückgang von zwei Drittel in den ersten drei Quartalen entsprechen, so die ICAO weiter.</p><p>Infolge des Ausbruchs der Corona-Pandemie ist der weltweite Flugverkehr fast zum Stillstand gekommen, Reisebeschränkungen und verminderte Nachfrage haben den Markt einbrechen lassen.</p>
	<img src="https://www.srf.ch/static/cms/images/960w/5803b3.jpg" alt="" />
    </li>
    <li class="ticker-item ticker-media">
    <span class="ticker-item__time">2:09</span>
            <h3 class="ticker-item__title">Unterstützung für Kurzarbeiter und Gastronomie in Deutschland</h3>
    
        <p>Die Spitzen der Regierungsparteien haben sich in Deutschland auf weitere Corona-Unterstützungsmassnahmen geeinigt. So soll unter anderem das Geld für Kurzarbeit für diejenigen Arbeitnehmenden, die besonders von der Corona-Krise betroffen sind, angehoben werden. Ausserdem sollen die deutschen Gastronomiebetriebe entlastet werden, indem die Mehrwertsteuer auf Speisen vorübergehend gesenkt wird – von 19 auf 7 Prozent.</p><p>Zudem werden auch Schulen und Schüler beim digitalen Unterricht zu Hause unterstützt. Hierzu wurden 500 Millionen Euro bereitgestellt. Bedürftige Schülerinnen und Schüler sollen beim Kauf eines Computers oder anderen Geräten einen Zuschuss von 150 Euro erhalten. Die Spitzen von CDU, CSU und SPD haben fast acht Stunden – deutlich länger als geplant – über die Massnahmen diskutiert.</p>
	    <img src="https://www.srf.ch/static/cms/images/960w/ade3ba.jpg" alt="">
        </li>
        <li class="ticker-item ticker-media">
    <span class="ticker-item__time">3:17</span>
            <h3 class="ticker-item__title">Verfügung unterzeichnet – Trump stoppt Einwanderung vorübergehend</h3>
    
        <p>US-Präsident Donald Trump hat die angekündigte Verfügung zur vorübergehenden Aussetzung von Einwanderung in die Vereinigten Staaten unterzeichnet. Das sagte Trump vor den Medien im Weissen Haus. Der US-Präsident begründete den Schritt erneut damit, Jobs und medizinische Ressourcen müssten angesichts der Corona-Krise für US-Amerikaner bewahrt werden. «Wir wollen uns zuerst um unsere Bürger kümmern – das müssen wir.»</p><p>Am Dienstag hatte Trump erklärt, die Beschränkung werde zunächst für 60 Tage gelten und betreffe hauptsächlich jene Menschen, die sich um einen dauerhaften Aufenthalt mit einer Green Card bemühten. Vor dem Ablauf der Frist werde er über eine mögliche Verlängerung der Massnahme entscheiden, betonte er.</p>
        </li>
        <li class="ticker-item ticker-media">
        <span class="ticker-item__time">4:21</span>
            <h3 class="ticker-item__title">Respekt für Ärzte und Pflegepersonal in Mexiko gefordert</h3>
    
        <p>Nach Angriffen auf Ärzte und Pflegepersonal in Mexiko haben die Vereinten Nationen Respekt vor der Arbeit des medizinischen Personals in der Corona-Krise gefordert. «Die UNO in Mexiko ruft die gesamte Bevölkerung dazu auf, die Arbeit und die körperliche Unversehrtheit der Mediziner zu respektieren, die angesichts der Corona-Pandemie eine wichtige Arbeit leisten», hiess es in einer Stellungnahme am Mittwoch.</p><p>Zuletzt waren in Mexiko mehrfach Ärzte und Pfleger körperlich und verbal angegriffen worden. Die Angreifer warfen ihnen vor, das Coronavirus zu verbreiten. Bislang haben sich in Mexiko über 10'000 Menschen nachweislich mit dem Virus infiziert. 970 Patienten starben im Zusammenhang mit der Lungenkrankheit Covid-19 in dem lateinamerikanischen Land.</p>
        </li>
        <li class="ticker-item ticker-media">
        <span class="ticker-item__time">5:02</span>
            <h3 class="ticker-item__title">Zwei Katzen in den USA positiv auf Corona getestet</h3>
    
        <p>Zwei Katzen sind nach Angaben der US-Zentren für Seuchenkontrolle und -prävention (CDC) die ersten Haustiere in den USA, die positiv auf Covid-19 getestet worden sind. Die Katzen aus dem US-Bundesstaat New York haben leichte Atemwegserkrankungen. Es wird angenommen, dass sie sich bei Menschen in ihren Haushalten oder in der Nachbarschaft infiziert haben.</p><p>Es gebe keine Beweise dafür, dass Haustiere eine Rolle bei der Verbreitung des Virus in den Vereinigten Staaten spielten, erklärt die Gesundheitsbehörde. Als Schutzmassnahme sollten Tierhalter ihre Vierbeiner jedoch nicht mit Menschen oder anderen Tieren ausserhalb des Haushalts interagieren lassen. Die WHO untersucht aktuell die Übertragungsmöglichkeiten des Virus zwischen Menschen und Haustieren.</p>
	<img src="https://www.srf.ch/static/cms/images/960w/6aa501.jpg" alt="" />
    </li>
    </ul>
</body>
</html>


 

            
Eine Timeline als Deko ein kleines Kreisli auf einer Linie am Rand der Listenelemente. Wenn die Liste in mehere Spalten umbrochen wird, wird der Kreis, wenn er zum Listenelement gehört in den Browsern Safari und Chrome angeschnitten (Die obere Hälfte des Kreises verbleibt am unteren Rand der vorherigen Spalte.) Nun wird ein zusätzliches Element eingefügt: Beim Beispiel SRF-Timeline wird dazu der Zeitstempel (rot) verwendet.