Div mit Text und Hintergrund über bild

thomas_aus_langenberg · Gestern um 19:15

Ich bin verzweifelt... :-) und schon auch gegoogelt. Ich möchte eine Textbox mit Hintergrundfarbe weiß über ein Bild legen. (siehe Beispielbild) so hätte ich das gerne :-)

ich bekomm die zwei divs hin, auch mit Margin, das der Textcontent über dem Bild ist, aber die Hintergrundfarbe bleibt unter dem Bild - Ich hab die Boxen "eingefärbt"... sollen aber weiss sein.

CSS:
.termine_aussenbox {
margin: auto;
width: 80%;
background-color: aqua;
height: 20%;
}
.termine_innenbox {
width: 29%;
float:left;
margin: 2%;
height: 200px;
}
.termine_beschreibung {
width: 80%;
margin:auto;
margin-top: -50px;
background-color:rgb(170, 170, 170);
height: 200px;
padding: 10px;
box-shadow: 5px 5px 5px lightgray;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 15px;
}
.termine_datum {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-size: 14px;
margin-bottom: 4px;
}

HTML:
<div class="termine_aussenbox">
<?php
$ergebnis = mysqli_query($db, "SELECT * FROM termin ORDER BY datum LIMIT 3");
while($row = mysqli_fetch_object($ergebnis))
{?>
<div class="termine_innenbox">
<img src="/bilder/<?php echo $row->datei; ?>" width="100%" height/>
<div class="termine_beschreibung">
<div class="termine_datum"><?php echo $row->datum; ?></div>
<?php echo $row->teaser; ?>
<p><?php echo $row->beschreibung; ?></p>
</div>
</div>
<?php } ?>
</div>

Irgendwas mach ich falsch bestimmt :-(

threadi · Gestern um 21:02

Das ist kein HTML sondern PHP-Code. Relevant für eine gute Hilfe wäre der vom PHP erzeugte HTML-Code. Den kann man so natürlich nur erahnen.

Ich würde dir für Bildbeschriftungen eher das figcaption-Element innerhalb von figure empfehlen. Siehe: https://wiki.selfhtml.org/wiki/HTML/Elemente/figure

Per CSS kannst Du dieses dann positionieren. Dabei würde ich dir ebenfalls empfehlen mit relativer Positionierung zu arbeiten, da du dann per z-index die Ebenen bestimmen kannst die übereinander liegen. Beispiel (ungetestet)

Code:

figure img {
 position: relative;
 z-index: 10;
}
figure figcaption {
 margin-top: -50px;
 position: relative;
 z-index: 20;
}

MrMurphy · Heute um 03:06

Deine Ziele werden leider nicht so ganz klar.

Wie threadi bereits schrieb wissen wir nicht, was hinter dem php-Quelltext steckt, also was für ein HTML-Quelltext erzeugt wird. Deshalb können wir nur raten und vermuten.

Auf Grund der Bilder gehe ich davon aus, das

1. Der Text mehr als einen Satz enthält, dazu mit Überschrift(en) und weiteren Inhalten wie Absätzen, Aufzählungen, weitere Bilder, ...

2. Das Bild zwar thematisch passt, aber keine Informationen enthält. Deshalb sollte es nach den HTML-Regeln als Hintergrundbild eingebunden werden. Das wiederum vereinfacht die Einbindung deutlich.

Ich habe mal ein Beispiel erstellt. Zu folgendem HTML

Code:

      <article class="text-auf-bild">
         <div>
            <p>2024-11-07</p>
            <h2>Besichtigung UPS World Hub Köln</h2>
            <p>Der Flughafen Köln/Bonn dient als Drehkreuz für die Frachtfluggesellschaften UPS Airlines und FedEx sowie als Basis der Billigfluggesellschaft Eurowings. Auf dem Areal ist die Flugbereitschaft des Bundesministeriums der Verteidigung beheimatet. Bis September 2014 war er Heimatbasis der Regionalfluggesellschaft Lufthansa CityLine.</p>
            <p>2020 wurde der Flughafen in der Skytrax World Airport Awards-Umfrage unter 13,5 Millionen Befragten zum zweitbesten Regional-Flughafen Europas gewählt, und weltweit auf Platz 3. 2014, 2015, 2016 und 2019 lag der Flughafen auf Platz 1 in Europa und Platz 2 weltweit. In der Kategorie World’s Top 100 Airports liegt der Flughafen 2020 unter den besten 30 weltweit. Außerdem wurde der Flughafen mit vier von fünf Sternen ausgezeichnet.</p>
         </div>
      </article>

folgendes CSS:

Code:

   /* .text-auf-bild */
   @media all {
      .text-auf-bild {
         background-image: url(https://upload.wikimedia.org/wikipedia/commons/4/41/UPS_Boeing_747-400_in_Dubai_KvW.jpg);
         background-repeat: no-repeat;
         background-size: contain;
         padding: 45vw 2rem 2rem 2rem;
      }
      .text-auf-bild>div {
         background-color: white;
         box-shadow: 5px 5px 5px lightgray;
         max-width: 80%;
         padding: 1rem 1rem 1rem 1rem;
         border-radius: 0.5rem;
         margin: 0rem auto 0rem auto;
      }
   }
   @media only screen and (min-width: 1190px) {
      .text-auf-bild {
         padding: 30rem 2rem 2rem 2rem;
      }
   }

Zum direkten Kopieren und Ausprobieren der gesamte Quelltext einer Beispieldatei:

Code:

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Text auf Bild</title>
   <meta name="description" content="Platzhalter - Ein kurze Beschreibung des Inhalts in Satzform">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <!-- <link href="../css/zentrale.css" rel="stylesheet"> -->

   <style>

   /* Überschriften - font-family: 'Roboto Slab', Serif; */
   @import url(https://fonts.googleapis.com/css?family=Roboto+Slab);

   /* Fließtext - font-family: 'Roboto', Sans-Serif"; */
   @import url(https://fonts.googleapis.com/css?family=Roboto);

   /* Zahlen* - font-family: 'Merriweather'; */
   @import url(https://fonts.googleapis.com/css?family=Merriweather);

   /* Basisangaben */
   @media all {
      * {
         /* box-sizing: border-box; */
         min-width: 1px;
      }
      html {
      }
      body {
         max-width: 1200px;
         margin: 0rem auto 0rem auto;
      }
   }

   /* Schriften */
   @media all {
      html {
         font-family: sans-serif;
         font-size: 120%;
         line-height: 1.3;
      }
      h1 {
         font-family: 'Roboto Slab', serif;
         font-size: 1.2rem;
         letter-spacing: 0.1rem;
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
      h2, h3, h4, h5, h6 {
         font-family: 'Roboto Slab', serif;
         font-size: 1rem;
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
      p, li, dt, dd, address {
         font-family: Roboto, sans-serif;
         font-size: 1rem;
         font-style: normal;
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
      a {
         /* darkblue */
         color: hsla(240, 100%, 27%, 1);
         text-decoration: none;
         outline: none;
         margin: 0rem 0rem 0rem 0rem;
      }
      figcaption {
         font-family: Roboto, sans-serif;
         font-size: 0.9rem;
         margin: 0rem 0rem 0rem 0rem;
      }
   }

   /* Grafiken */
   @media all {
      figure {
         text-align: center;
         min-width: 1px;
         max-width: 100%;
         min-height: 1px;
         margin: 0rem;
         display: inline-block;
      }
      img {
         min-width: 1px;
         display: block;
         max-width: 100%;
         border: 0px;
      }
      figcaption {
         text-align: left;
         display: inline-block;
      }
   }

   /* .text-auf-bild */
   @media all {
      .text-auf-bild {
         background-image: url(https://upload.wikimedia.org/wikipedia/commons/4/41/UPS_Boeing_747-400_in_Dubai_KvW.jpg);
         background-repeat: no-repeat;
         background-size: contain;
         padding: 45vw 2rem 2rem 2rem;
      }
      .text-auf-bild>div {
         background-color: white;
         box-shadow: 5px 5px 5px lightgray;
         max-width: 80%;
         padding: 1rem 1rem 1rem 1rem;
         border-radius: 0.5rem;
         margin: 0rem auto 0rem auto;
      }
   }
   @media only screen and (min-width: 1190px) {
      .text-auf-bild {
         padding: 30rem 2rem 2rem 2rem;
      }
      .text-auf-bild>div {
      }
   }

   </style>
</head>
<body>
   <header id="pageheader" class="pageheader">
      <h1>Text auf Bild</h1>
   </header>
   <nav id="navigation" class="navigation">
   </nav>
   <main id="content" class="content">
      <article class="text-auf-bild">
         <div>
            <p>2024-11-07</p>
            <h2>Besichtigung UPS World Hub Köln</h2>
            <p>Der Flughafen Köln/Bonn dient als Drehkreuz für die Frachtfluggesellschaften UPS Airlines und FedEx sowie als Basis der Billigfluggesellschaft Eurowings. Auf dem Areal ist die Flugbereitschaft des Bundesministeriums der Verteidigung beheimatet. Bis September 2014 war er Heimatbasis der Regionalfluggesellschaft Lufthansa CityLine.</p>
            <p>2020 wurde der Flughafen in der Skytrax World Airport Awards-Umfrage unter 13,5 Millionen Befragten zum zweitbesten Regional-Flughafen Europas gewählt, und weltweit auf Platz 3. 2014, 2015, 2016 und 2019 lag der Flughafen auf Platz 1 in Europa und Platz 2 weltweit. In der Kategorie World’s Top 100 Airports liegt der Flughafen 2020 unter den besten 30 weltweit. Außerdem wurde der Flughafen mit vier von fünf Sternen ausgezeichnet.</p>
         </div>
      </article>
   </main>
   <footer id="pagefooter" class="pagefooter">
      <p>Originaldiskussion: <a href="https://www.html.de/threads/div-mit-text-und-hintergrund-uber-bild.61892/">https://www.html.de/</a></p>
   </footer>
</body>
</html>

thomas_aus_langenberg · Heute um 15:11

Danke erstmal für den Gedankenanstoss.... ich hab das jetzt mal 1:1 kopiert. Klappt hervorragend. Sobald ich aber alleine nur die Schleife einbaue für 3 x anzeigen, verschwindet das Bild und die Seite bleibt weiß.

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Text auf Bild</title>
<meta name="description" content="Platzhalter - Ein kurze Beschreibung des Inhalts in Satzform">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
/* Überschriften - font-family: 'Roboto Slab', Serif; */
@import url(https://fonts.googleapis.com/css?family=Roboto+Slab);
/* Fließtext - font-family: 'Roboto', Sans-Serif"; */
@import url(https://fonts.googleapis.com/css?family=Roboto);
/* Zahlen* - font-family: 'Merriweather'; */
@import url(https://fonts.googleapis.com/css?family=Merriweather);
/* Basisangaben */
@media all {
* {
/* box-sizing: border-box; */
min-width: 1px;
}
html {
}
body {
max-width: 1200px;
margin: 0rem auto 0rem auto;
}
}
/* Schriften */
@media all {
html {
font-family: sans-serif;
font-size: 120%;
line-height: 1.3;
}
h1 {
font-family: 'Roboto Slab', serif;
font-size: 1.2rem;
letter-spacing: 0.1rem;
margin: 0.5rem 0rem 0.5rem 0rem;
}
h2, h3, h4, h5, h6 {
font-family: 'Roboto Slab', serif;
font-size: 1rem;
margin: 0.5rem 0rem 0.5rem 0rem;
}
p, li, dt, dd, address {
font-family: Roboto, sans-serif;
font-size: 1rem;
font-style: normal;
margin: 0.5rem 0rem 0.5rem 0rem;
}
a {
/* darkblue */
color: hsla(240, 100%, 27%, 1);
text-decoration: none;
outline: none;
margin: 0rem 0rem 0rem 0rem;
}
figcaption {
font-family: Roboto, sans-serif;
font-size: 0.9rem;
margin: 0rem 0rem 0rem 0rem;
}
}
/* Grafiken */
@media all {
figure {
text-align: center;
min-width: 1px;
max-width: 100%;
min-height: 1px;
margin: 0rem;
display: inline-block;
}
img {
min-width: 1px;
display: block;
max-width: 100%;
border: 0px;
}
figcaption {
text-align: left;
display: inline-block;
}
}
/* .text-auf-bild */
@media all {
.text-auf-bild {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/4/41/UPS_Boeing_747-400_in_Dubai_KvW.jpg);
background-repeat: no-repeat;
background-size: contain;
padding: 45vw 2rem 2rem 2rem;
}
.text-auf-bild>div {
background-color: white;
box-shadow: 5px 5px 5px lightgray;
max-width: 80%;
padding: 1rem 1rem 1rem 1rem;
border-radius: 0.5rem;
margin: 0rem auto 0rem auto;
}
}
@media only screen and (min-width: 1190px) {
.text-auf-bild {
padding: 30rem 2rem 2rem 2rem;
}
.text-auf-bild>div {
}
}
</style>
</head>
<body>
<?php
$ergebnis = mysqli_query($db, "SELECT * FROM termin ORDER BY datum LIMIT 3");
while($row = mysqli_fetch_object($ergebnis))
{?>
<header id="pageheader" class="pageheader">
<h1>Text auf Bild</h1>
</header>
<nav id="navigation" class="navigation">
</nav>

<main id="content" class="content">
<article class="text-auf-bild">
<div>
<p>2024-11-07</p>
<h2>Besichtigung UPS World Hub Köln</h2>
<p>Der Flughafen Köln/Bonn dient als Drehkreuz für die Frachtfluggesellschaften UPS Airlines und FedEx sowie als Basis der Billigfluggesellschaft Eurowings. Auf dem Areal ist die Flugbereitschaft des Bundesministeriums der Verteidigung beheimatet. Bis September 2014 war er Heimatbasis der Regionalfluggesellschaft Lufthansa CityLine.</p>
<p>2020 wurde der Flughafen in der Skytrax World Airport Awards-Umfrage unter 13,5 Millionen Befragten zum zweitbesten Regional-Flughafen Europas gewählt, und weltweit auf Platz 3. 2014, 2015, 2016 und 2019 lag der Flughafen auf Platz 1 in Europa und Platz 2 weltweit. In der Kategorie World’s Top 100 Airports liegt der Flughafen 2020 unter den besten 30 weltweit. Außerdem wurde der Flughafen mit vier von fünf Sternen ausgezeichnet.</p>
</div>
</article>
</main>
<?php } ?>
<footer id="pagefooter" class="pagefooter">
<p>Originaldiskussion: <a href="https://www.html.de/threads/div-mit-text-und-hintergrund-uber-bild.61892/">https://www.html.de/</a></p>
</footer>
</body>
</html>

MrMurphy · Heute um 16:23

Sobald ich aber alleine nur die Schleife einbaue für 3 x anzeigen, verschwindet das Bild und die Seite bleibt weiß.

Wie bereits geschrieben kenne ich mich mit PHP nicht aus. Deshalb kann ich dir nur an Hand deiner Informationen Beispiele für einen HTML- und CSS-Quelltext geben, den du dann mittels PHP erzeugen und in deine Seite musst.

Für mich neu ist das Bild und Text dreimal auf der Seite erscheinen sollen. Davon hast du bislang nichts geschrieben und aus den Bildern ging das auch nicht hervor. Beim zweiten Bild dachte ich, das wären drei unterschiedliche Versuche.

Die von dir gewünschte Darstellung wird auch Card-Layout genannt. Das funktioniert mit meinem Beispiel nicht.

Für jedes Bild nicht nur das HTML sondern auch das CSS anzupassen ist sehr aufwändig. Deshalb würde ich die Bilder bei einem Card-Layout ins HTML einbinden, obwohl sie in deinem Fall wahrscheinlich eigentlich Hintergrundbilder sind.

Bei meinem Beispiel ist dreimal das gleiche Bild eingebunden. Das deshalb, weil die Bilder gleichgroß sein müssen. Die eigenen Bilder musst du also so bearbeiten, das sie gleichgroß sind. Ansonsten funktioniert mein Beispiel nicht. Wenn deine Bilder eine andere Größe als in meinem Beispiel haben wirst du einmalig einige CSS-Angaben anpassen müssen.

Code:

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Cards</title>
   <meta name="description" content="Platzhalter - Ein kurze Beschreibung des Inhalts in Satzform">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <!-- <link href="../css/zentrale.css" rel="stylesheet"> -->

   <style>

   /* Überschriften - font-family: 'Roboto Slab', Serif; */
   @import url(https://fonts.googleapis.com/css?family=Roboto+Slab);

   /* Fließtext - font-family: 'Roboto', Sans-Serif"; */
   @import url(https://fonts.googleapis.com/css?family=Roboto);

   /* Zahlen* - font-family: 'Merriweather'; */
   @import url(https://fonts.googleapis.com/css?family=Merriweather);

   /* Basisangaben */
   @media all {
      * {
         /* box-sizing: border-box; */
         min-width: 1px;
      }
      html {
      }
      body {
         max-width: 1200px;
         margin: 0rem auto 0rem auto;
      }
   }

   /* Schriften */
   @media all {
      html {
         font-family: sans-serif;
         font-size: 120%;
         line-height: 1.3;
      }
      h1 {
         font-family: 'Roboto Slab', serif;
         font-size: 1.2rem;
         letter-spacing: 0.1rem;
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
      h2, h3, h4, h5, h6 {
         font-family: 'Roboto Slab', serif;
         font-size: 1rem;
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
      p, li, dt, dd, address {
         font-family: Roboto, sans-serif;
         font-size: 1rem;
         font-style: normal;
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
      a {
         /* darkblue */
         color: hsla(240, 100%, 27%, 1);
         text-decoration: none;
         outline: none;
         margin: 0rem 0rem 0rem 0rem;
      }
   }

   /* Grafiken */
   @media all {
      figure {
         text-align: center;
         min-width: 1px;
         max-width: 100%;
         min-height: 1px;
         margin: 0rem;
         display: inline-block;
      }
      img {
         min-width: 1px;
         display: block;
         max-width: 100%;
         border: 0px;
      }
      figcaption {
         text-align: left;
         display: inline-block;
      }
   }

   /* .cards */
   @media all {
      .cards {
         /*background-color: gold;*/
         padding: 1rem 1rem 1rem 1rem;
         display: grid;
         grid-template-columns: 1fr;
         gap: 1rem;
      }
      .cards article {
         box-shadow: 10px 10px 10px grey;
         /*padding: 1rem 1rem 1rem 1rem;*/
         border: 1px solid grey;
         border-radius: 0.5rem;
      }
      .cards article img {
         border-radius: 0.5rem 0.5rem 0rem 0rem;
      }
      .cards article div {
         position: relative;
         background-color: gold;
         background-color: white;
         width: 80%;
         padding: 1rem 1rem 1rem 1rem;
         margin: -3rem auto 0rem auto;
      }
      .cards article div p:nth-child(1) {
         margin-top: -0.5rem;
      }
   }
   @media only screen and (min-width: 650px) {
      .cards article div {
         margin: -5rem auto 0rem auto;
      }
   }
   @media only screen and (min-width: 900px) {
      .cards {
         grid-template-columns: 1fr 1fr 1fr;
      }
      .cards article div {
         margin: -3rem auto 0rem auto;
      }
   }

   </style>
</head>
<body>
   <header id="pageheader" class="pageheader">
      <h1>Cards</h1>
   </header>
   <main id="content" class="content">
      <section class="cards">
         <article>
            <img src="https://upload.wikimedia.org/wikipedia/commons/4/41/UPS_Boeing_747-400_in_Dubai_KvW.jpg" alt="Flugzeug von UPS">
            <div>
               <p>2024-11-07</p>
               <h2>Besichtigung UPS World Hub Köln</h2>
               <p>Der Flughafen Köln/Bonn dient als Drehkreuz für die Frachtfluggesellschaften UPS Airlines und FedEx sowie als Basis der Billigfluggesellschaft Eurowings. Auf dem Areal ist die Flugbereitschaft des Bundesministeriums der Verteidigung beheimatet.</p>
            </div>
         </article>
         <article>
            <img src="https://upload.wikimedia.org/wikipedia/commons/4/41/UPS_Boeing_747-400_in_Dubai_KvW.jpg" alt="Flugzeug von UPS">
            <div>
               <p>2024-12-06</p>
               <h2>Giessbachbahn</h2>
               <p>Wagen der Giessbachbahn im Berner Oberland in der Ausweiche. Wie bei den ersten Standseilbahnen üblich dient die Zahnstange als Notbremssystem.</p>
            </div>
         </article>
         <article>
            <img src="https://upload.wikimedia.org/wikipedia/commons/4/41/UPS_Boeing_747-400_in_Dubai_KvW.jpg" alt="Flugzeug von UPS">
            <div>
               <p>2024-12-24</p>
               <h2>Porsche 997</h2>
               <p>Porsche 997 ist die interne Modellbezeichnung von Porsche für das von 2004 bis Ende 2012 produzierte 911-Modell. Die sechste Generation des 911 ähnelt durch die Wiedereinführung der runden Scheinwerfer stärker dem Urelfer von 1963 als der Vorgänger vom Typ 996. </p>
            </div>
         </article>
      </section>
   </main>
   <footer id="pagefooter" class="pagefooter">
      <p>Originaldiskussion: <a href="https://www.html.de/threads/div-mit-text-und-hintergrund-uber-bild.61892/">https://www.html.de/</a></p>
   </footer>
</body>
</html>

msi · Heute um 16:25

thomas_aus_langenberg schrieb:
ich hab das jetzt mal 1:1 kopiert

Und das ist das Problem, wenn "fertige" Lösungen gepostet werden. Das kopieren klappt noch, aber verstanden wurde nichts.

Div mit Text und Hintergrund über bild

thomas_aus_langenberg

Neues Mitglied

Anhänge

threadi

Moderator

MrMurphy

Senior HTML'ler

thomas_aus_langenberg

Neues Mitglied

MrMurphy

Senior HTML'ler

msi

Aktives Mitglied

Neueste Beiträge