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;
}
Technik, IT, JavaScript, Webentwicklung, Webseitenoptimierung, Internetseite erstellen, Visual Studio Code
Eigene Homepage mit Besonderheiten erstellen?

Hallo,

ich bin Autorin und überlege mir bald eine Homepage anzuschaffen. Leider habe ich davon überhaupt keine Ahnung. Weder bei welchem Anbieter es am besten und trotzdem kostengünstig ist, noch wie man sowas nach meinen Wünschen erstellt.

Wichtig ist mir, dass es nicht zu teuer ist und dass ich eine eigene Domain habe.

Die Bücher sollen dort nur mit einem Link zu meinem Verlag und zu Amazon, Thalia ect. führen, da ich nicht direkt verkaufe. Allerdings finde ich die normalen Baukästen ziemlich langweilig und relativ teuer. Gibt es da andere Möglichkeiten oder kennt ihr gute Anbieter?

Ich würde z.B. gerne eine Startseite erstellen, mit einem Willkommensschriftzug und darunter ein großes Buch. Wenn man mit der Maus darauf geht, öffnet es sich und führt auf die eigentliche Homepage. Da ich viel Fantasy schreibe, fände ich sowas wesentlich passender und schöner, als die Standartbaukästen. Ein wenig interaktiv eben. Ich weiß, dass meine Eltern früher mal sowas gebastelt habe, wo ich selbst vertonen sollte. Z.B. Schreie, Gesang ect. Aber das ist eben schon 10-15 Jahre her.

Homepage, Werbung, Internet, Software, Blog, Webseite, Schreiben, programmieren, Soziale Netzwerke, Autor, Homepage baukasten, homepage erstellen, interaktiv, Kreative Ideen, Medien, Strato, Websitegestaltung, Internetseite erstellen, Website Design, wix.com, webseite erstellung
Website Impressum Anschrift umgehen?

Hallo, ich bin gerade eine Website am erstellen, ich möchte die Website komplett Rechtssicher online stellen und mir ist bewusst das man den Namen und Adresse in das Impressum schreiben muss. Ich habe allerdings auch vieles über einen Adressschutz gelesen und wollte mal nachhören ob es eine Möglichkeit gibt das man seine Privatadresse nicht angeben muss. Es handelt sich hier um eine .eu Domain, der Webspace liegt bei Nitrado. Die Website beinhaltet Bildbearbeitung und Design da ich dies seit 12 Jahren mache und außer über "Instagram" meine Bilder und sonstiges Online stellen möchte. Außerdem möchte ich Menschen helfen die sich mit dem Thema nicht auskennen :) biete kostenlose Download´s an z.b Texturen, Vorlagen etc außer mit Werbung werde ich kein Geld auf dieser Website verlangen, also alles was ich anbiete ist komplett kostenlos. Wenn sich jemand damit gut auskennt würde ich mich über eine Antwort sehr freuen. Eine Frage hätte ich auch noch zum Thema Spendenkonto, wo liegen da die Gesetze ? Wenn ich z.b auf der Seite eine Spendenkonto für mich einrichte wäre das legal ? Also als Beispiel, ich bearbeite ein Bild für einen User und er ist sehr zufrieden und möchte von sich aus mir eine kleine Spende da lassen, wäre das legal oder müsste man dort auch wieder sehr viel beachten. Auch wenn ich nichts zu verbergen habe möchte ich meine Privatadresse einfach ungerne im Internet angeben, ich denke das kann jeder verstehen. Ich bedanke mich für jede Antwort und wünsche euch ein schönes Wochenende. Lg

Datenschutz, Webseite, WordPress, Impressumspflicht, Internetseite erstellen, spendenkonto

Meistgelesene Beiträge zum Thema Internetseite erstellen