Coronanews auf index-Seite einer Homepage einblenden
Hallo liebes Team und Mitglieder von html.de,
als erstes muss ich mich outen, habe bislang kaum Erfahrung im Erstellen von html-Webseiten.
Ich habe folgende Idee:
Ich habe eine HP. Im home-Verzeichnis gibt es mehrere *.html, u.a. meine index.html.. Auf der index-Site habe ich eine "Rubrik" NEWS. Hier steht natürlich Text.
Ich möchte nun diesen NEWS-Text zum Teil überblendet haben mit einer News im News. Soll bedeuten, ich möchte 2den Text im Hintergrund weiter lesen können (z.B. "Hier ist eine Einladung zum Bier trinken" mit Datum und Uhrzeit), aber eine CORONA-News soll quasi drüber liegen (z.B. "fällt aus"). Der Text unter dem "fällt aus" ist dann natürlich nicht mehr zu lesen. So als ob ich einen News-Sticker auf dem Text lege.
Ich hoffe ich habe mich gut ausgedrückt. Da ich nicht weiss wonach ich im Forum suchen soll habe ich mal meine Frage formuliert.
Vielen Dank für eure GEDULT und Antworten im Vorraus.
Der hier verwendete Code
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Beispiel</title>
<style>
*{
margin:0;
padding:0;
}
body{
display:flex;
flex-direction:column;
}
nav{
text-align:center;
font-size:40px;
height:60px;
background:grey;
color:white;
}
main{
display:flex;
min-height:calc(100vh - 80px);
flex-direction:column;
padding:20px 50px;
}
main h1{
text-align:center;
text-decoration:underline;
}
#info img{
width:90%;
margin-bottom:30px;
}
#info h3{
text-align:center;
margin-bottom:20px;
}
#info p{
margin:20px 0;
}
#info ul,#info li{
list-style:none;
}
#info ul li a{
color:lightskyblue;
}
#info ul li a:hover{
color:green;
}
#close{
height:30px;
width:20px;
color:white;
font-weight:900;
font-size:23px;
border:1px solid white;
padding:3px;
text-align:center;
border-radius:4px;
border-top-left-radius:20px;
position:relative;
top:-20px;
left:-30px;
}
#close:hover{
background:red;
cursor:pointer;
}
#info{
position:absolute;
top:100px;
margin:0 auto;
width:80%;
border:2px solid black;
border-radius:20px;
padding:20px 30px;
background:rgba(2,2,2,0.8);
color:white;
}
footer{
text-align:center;
font-size:40px;
height:60px;
background:grey;
color:white;
}
</style>
</head>
<body>
<nav>Navigation</nav>
<main>
<h1>Normale News</h1>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <br> At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<div id="info">
<div id="close">X</div>
<img src="/image/corona-index.png">
<h3>Der Höhepunkt der Corona-Krise liegt offenbar noch vor uns. Doch werden wir im Sommer schon wieder reisen können? Der Präsident der Bundesärztekammer hat dazu eine klare Meinung. Alle Infos im Newsblog.
</h3>
<p>Weltweit sind schon mehr als eine Million Menschen mit dem Coronavirus infiziert, Zehntausende sind gestorben. Die Staaten reagieren sehr unterschiedlich auf die Gefahr: Während in einigen europäischen Ländern bereits Lockerungen der rigorosen Maßnahmen im Kampf gegen Corona verkündet wurden, gibt es in Deutschland bislang offiziell keinen Zeitpunkt für den Beginn eines Exit-Plans.<br>
</p>
<ul>
<li>Meinung:
<a href="https://www.t-online.de/nachrichten/id_87671468/corona-krise-was-wir-jetzt-von-superreichen-lernen-koennen.html" target="_blank">Was wir von Superreichen lernen können
</a>
</li>
<li>Coronavirus:
<a href="https://www.t-online.de/gesundheit/krankheiten-symptome/id_87184866/coronavirus-in-europa-symptome-uebertragung-verlauf-behandlung-von-covid-19.html">Symptome, Übertragung und Ursprung der Krankheit
</a>
</li>
<li>Covid-19 in Deutschland:
<a href="https://www.t-online.de/nachrichten/panorama/id_87419030/coronavirus-in-deutschland-aktuelle-zahlen-mehr-als-als-2-000-tote.html">An diesen Orten gibt es Infektionen
</a>
</li>
</ul>
</div>
</main>
<footer>Footer</footer>
<script>
document.getElementById('close').addEventListener('click',function(){
document.getElementById('info').style.display='none';
})
</script>
</body>
</html>