Hey,
ich bin grad dabei ein Liveticker zu erstellen. Die 2 Teams habe ich rechts und links und in der Mitte der Spielstand. So im ganzen funktioniert die Darstellung, bis auf eines die Zentrierung. Ich kann es nicht nachvollziehen warum genau das nicht funktioniert.
Ebenso frag ich mich, wie man die Bilder unter dem Teamnamen darstellt. Habt ihr Vorschläge?
Mein Code:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Liveticker, Spiel: Team1 - Team2</title>
<link rel="stylesheet" href="css/liveticker.css">
</head>
<body>
<main>
<section class="liveticker">
<!-- Teams -->
<div id="teamdarstellung">
<div id="team1">
<h4>Sandhausen</h4>
<img src="logo/svs.jpg" alt="svslogo">
</div>
<div id="spielstand">
<p>
<span id="team1">0</span> : <span id="team2">0</span>
</p>
</div>
<div id="team2">
<h4>Dresden</h4>
<img src="logo/dresden.jpg" alt="dresdenlogo">
</div>
</div>
<!-- Live Ticker -->
<div id="ticker">
<div>
<p>testtesttesefw43rwevg5revfqtegfv</p>
</div>
</div>
</section>
<section class="informationen">
<!-- Informationen (anstoßzeitpunkt, zuschauer, schiri, stadion) -->
<div>
</div>
<!-- Aufstellung -->
<div>
</div>
<!-- Spieldaten -->
<div>
</div>
</section>
</main>
</body>
</html>
Alles anzeigen
CSS
*{
margin: 0px;
padding: 0px;
}
main{
margin-top: 2%;
margin-left: 2%;
}
section.liveticker{
width: 50%;
}
section.liveticker div#teamdarstellung{
display: flex;
justify-content: center;
align-items: center;
border: 1px solid red;
}
#teamdarstellung div#team1{
width: 40%;
}
#teamdarstellung div#spielstand{
width: 20%;
}
#teamdarstellung div#team2{
width: 40%;
}
#teamdarstellung h4{
margin-right: 10px;
}
#teamdarstellung img{
width: 13%;
height: 50px;
}
.liveticker div#ticker{
border: 1px solid green;
height: 100px;
padding: 2%;
}
#ticker div{
border: 1px solid black;
height: 100px;
}
Alles anzeigen