Und zwar erstelle ich eine kleine Seite mit Steckbriefen über ein paar Tiere.
Mein Problem gerade ist, dass ich im Header 5 links erstellt habe mit einem Bild von einem Tier und den jeweiligen Tiername.
Aber leider wird nur bei dem Elefanten der Tiername über dem Bild angezeigt.Bei allen anderen stehen diese nebeneinander. Warum? Haben alle die gleichen CSS eigenschaften.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div>
<header>
<div class="ganzer-ctn-header">
<div class="überschrift">
<h1>Steckbriefe über verschiedene Tierarten</h1>
</div>
<div class="tier-ctn">
<div class="elefant-ctn">
<a href="elefant.html"><p> Elefant</p> <img src="elefant.png" /></a>
</div>
<div class="hase-ctn">
<a href="hase.html">Hase
<img src="hase.png" /><a>
</div>
<div class="löwe-ctn">
<a href="löwe.html"> Löwe<img src="loewe.png" /></a>
</div>
<div class="affe-ctn">
<a href="affe.html"> Affe<img src="affe.png" /></a>
</div>
<div class="wal-ctn">
<a href="wal.html">Wal <img src="wal.png" /></a>
</div>
</div>
</div>
</header>
<section class="section-eichhörnchen">
<h2>Eichhörnchen</h2>
<div>
<div>
<h3>Steckbrief Eichhörnchen</h3>
</div>
<div class="inhalt-ctn">
<div class="merkmal">
Größe
</div>
<div class="antwort">
15-20cm
</div>
</div>
<div class="inhalt-ctn">
<div class="merkmal">
Geschwindigkeit
</div>
<div class="antwort">
Bis 25 Km/h
</div>
</div>
<div class="inhalt-ctn">
<div class="merkmal">
Gewicht
</div>
<div class="antwort">
200-400 g
</div>
</div>
<div class="inhalt-ctn">
<div class="merkmal">
Lebensdauer
</div>
<div class="antwort">
3 Jahre
</div>
</div>
<div class="inhalt-ctn">
<div class="merkmal">
Nahrung
</div>
<div class="antwort">
Nüsse, Samen, Eicheln, Pilze, Beeren, Eier
</div>
</div>
<div class="inhalt-ctn">
<div class="merkmal">
Feinde
</div>
<div class="antwort">
Schlangen, Wiesel, Adler, Habichte
</div>
</div>
<div class="inhalt-ctn">
<div class="merkmal">
Verbreitung
</div>
<div class="antwort">
Amerika, Europa, Asien
</div>
</div>
<div class="inhalt-ctn">
<div class="merkmal">
Lebensraum
</div>
<div class="antwort">
Wald
</div>
</div>
</div>
</section>
</div>
</body>
</html>
.inhalt-ctn{
display: flex;
}
body{
background: linear-gradient(#008000,#7fff00 )
}
.merkmal{
background-color: grey;
height: 40px;
width:300px;
}
.section-eichhörnchen{
margin-left: 200px;
}
.tier-ctn{
display: flex;
justify-content: center;
align-items: center;
}
.elefant-ctn , .wal-ctn, .affe-ctn, .löwe-ctn, .hase-ctn{
margin-left: 70px;
}
.elefant-ctn{
width: 120px;
height: 100px;
background-color: aqua;
display: flex;
align-items: center;
justify-content: center;
background-color: white;
}
.wal-ctn{
width: 120px;
height: 100px;
background-color: aqua;
display: flex;
align-items: center;
justify-content: center;
background-color: white;
}
.affe-ctn{
width: 120px;
height: 100px;
background-color: aqua;
display: flex;
align-items: center;
justify-content: center;
background-color: white;
}
.löwe-ctn{
width: 120px;
height: 100px;
background-color: aqua;
display: flex;
align-items: center;
justify-content: center;
background-color: white;
}
.hase-ctn{
width: 120px;
height: 100px;
background-color: aqua;
display: flex;
align-items: center;
justify-content: center;
background-color: white;
flex-direction: column;
}
