Hallo,
wenn du die Seite pflegen willst kommst du um das Lernen der Grundlagen nicht herum. Damit, dir das beizubringen, sind wir hier im Forum überfordert, zumal es genügend Anleitungen gibt.
Ich habe dir mal eine Seite mit aktuellem HTLM und CSS als Grobskizze erstellt. Für die gesamte Seite ist natürlich noch Feintuning erforderlich, also das Anpassen an Abständen, Schriftgrößen u.s.w. Weiterhin gehört zu den üblichen Vorarbeiten auch in so einer Darstellung alle Bilder vor dem Veröffentlichen auf die gleiche Größe zu bringen.
Einfach mal den Quelltext als HTML-Datei speichern und im Browser anschauen.
HTML
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
<title>Bilder mit Text anordnen</title>
<meta name="description" content="HTML5, CSS3">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Um alte IE HTML5-tauglich zu machen -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" language="javascript" type="text/javascript"></script>
<![endif]-->
<!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
<style>
@import url(http://fonts.googleapis.com/css?family=Smokum);
/* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
display: block;
}
* {
-moz-box-sizing: border-box;
box-sizing: border-box;
line-height: 1.1;
}
html {
font-size: 100%;
}
body {
padding: 0;
background-image: url(http://www.stormycornerranch.de/holzwand3.jpg);
}
p {
}
main>h1 {
font-family: 'Smokum', cursive;
font-size: 3rem;
letter-spacing: 0.3rem;
color: white;
text-align: center;
}
article {
display: flex;
flex-wrap: wrap;
}
section {
width: 32.6%;
margin: 1rem 0;
}
section:nth-child(3n+2) {
margin-right: 1%;
margin-left: 1%;
}
figure {
padding: 0;
margin: 0;
}
img {
max-width: 100%;
display: block;
border-radius: 3rem 3rem 0 0;
}
div {
background-image: url(http://www.stormycornerranch.de/holzwand5.jpg);
}
div h2 {
color: white;
text-align: center;
padding: 0.5rem;
margin-top: 0;
margin-bottom: 0;
}
div p {
color: white;
text-align: center;
padding: 0.1rem;
margin-top: 0;
margin-bottom: 0;
}
div p:nth-child(4) {
margin-bottom: 1rem;
}
div p:nth-child(6) {
margin-bottom: 1rem;
}
div p:nth-child(7) {
color: red;
padding-bottom: 1rem;
margin-bottom: 1rem;
}
div p:nth-child(7):before {
content: "- ";
}
div p:nth-child(7):after {
content: " -";
}
</style>
</head>
<body>
<main>
<h1>Nachzucht - Foals</h1>
<article>
<section>
<figure>
<img src="http://www.stormycornerranch.de/JimBob26.JPG" alt="Pferd">
</figure>
<div>
<h2>Jim Bob Blackburn</h2>
<p>2014 Quarter Horse Colt</p>
<p>Dunskin</p>
<p>89% Foundation</p>
<p>Sire: Mr Pretty Blackburn</p>
<p>Dam: Paulas Little Joker</p>
<p>Sold / Verkauft</p>
</div>
</section>
<section>
<figure>
<img src="http://www.stormycornerranch.de/JimBob26.JPG" alt="Pferd">
</figure>
<div>
<h2>Jim Bob Blackburn</h2>
<p>2014 Quarter Horse Colt</p>
<p>Dunskin</p>
<p>89% Foundation</p>
<p>Sire: Mr Pretty Blackburn</p>
<p>Dam: Paulas Little Joker</p>
<p>Sold / Verkauft</p>
</div>
</section>
<section>
<figure>
<img src="http://www.stormycornerranch.de/JimBob26.JPG" alt="Pferd">
</figure>
<div>
<h2>Jim Bob Blackburn</h2>
<p>2014 Quarter Horse Colt</p>
<p>Dunskin</p>
<p>89% Foundation</p>
<p>Sire: Mr Pretty Blackburn</p>
<p>Dam: Paulas Little Joker</p>
<p>Sold / Verkauft</p>
</div>
</section>
<section>
<figure>
<img src="http://www.stormycornerranch.de/JimBob26.JPG" alt="Pferd">
</figure>
<div>
<h2>Jim Bob Blackburn</h2>
<p>2014 Quarter Horse Colt</p>
<p>Dunskin</p>
<p>89% Foundation</p>
<p>Sire: Mr Pretty Blackburn</p>
<p>Dam: Paulas Little Joker</p>
<p>Sold / Verkauft</p>
</div>
</section>
<section>
<figure>
<img src="http://www.stormycornerranch.de/JimBob26.JPG" alt="Pferd">
</figure>
<div>
<h2>Jim Bob Blackburn</h2>
<p>2014 Quarter Horse Colt</p>
<p>Dunskin</p>
<p>89% Foundation</p>
<p>Sire: Mr Pretty Blackburn</p>
<p>Dam: Paulas Little Joker</p>
<p>Sold / Verkauft</p>
</div>
</section>
<section>
<figure>
<img src="http://www.stormycornerranch.de/JimBob26.JPG" alt="Pferd">
</figure>
<div>
<h2>Jim Bob Blackburn</h2>
<p>2014 Quarter Horse Colt</p>
<p>Dunskin</p>
<p>89% Foundation</p>
<p>Sire: Mr Pretty Blackburn</p>
<p>Dam: Paulas Little Joker</p>
<p>Sold / Verkauft</p>
</div>
</section>
</article>
</main>
</body>
</html>Gruss
MrMurphy