Habe eine Frage zu meinem HTML/CSS Code?
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;
}
2 Antworten
Entferne entweder das <p> Element um Elefant oder füge dieses ebenfalls zu den anderen Tieren hinzu. Wobei ich an dieser Stelle den Paragraphen durch ein <span> Element ersetzen würde. Du solltest ebenso die Wiederverwendbarkeit von Klassen nutzen, um gleichbleibende Regeln nur einmal in deinem CSS stehen zu haben.
HTML:
<div class="ctn ctn-affe">
<span>Affe</span>
<a href="#">
<img href="affe.png" src="Affe">
<a>
</div>
<div class="ctn ctn-loewe">
<span>Löwe</span>
<a href="#">
<img href="loewe.png" src="Löwe">
<a>
</div>
CSS:
.ctn {
--bg-color: black;
width: 120px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 70px;
background-color: var(--bg-color);
}
.ctn-affe {
--bg-color: aqua;
}
.ctn-loewe {
--bg-color: white;
}
Im unteren Bereich hast du es ja bereits so angewendet, in dem du Klassen wiederverwendet hast. Dasselbe würde ich auch im oberen Bereichen machen, damit du in deinem CSS keine doppelten Blöcke mit den selben Regeln stehen hast.
LG medmonk
Eigentlich sollte sich das <span> Element bereits auf die ganze Breite verteilen, da die Elemente bereits mit display: flex positioniert wurden. Spreche das <span> Element im CSS und weise mal eine background-color zu, um nachzusehen.
.ctn span {
background-color: red;
}
Aber nur der Elefant ist in einen Paragraphen eingebettet. Das fehlt bei den anderen Tieren.
Dankesehr! Manchmal sieht man den Wald vor lauter Bäumen nicht
Kannst du mir auch zufällig beantworten, wie ich <p> oder jetzt den <span> also die Überschrift von den Bildern über die gesamte Länge ziehen kann?