Text soll sich im div wo möglich die volle Breite nehmen

Emess · 4. April 2024

Ich möchte gerne auf unserer Website einen guten Freund ehren. doch leider gelingt es mir nicht den Text das Bild umfließen zu lassen

Hier der Code:

HTML

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Traueranzeige</title>
    <style>
      .container {
        display: grid;
        grid-template-columns: auto 2fr;
        gap: 5px;
        width: 600px;
        height: auto;
        border: 5px solid #000;
        overflow: hidden;
      }

      .image {
        width: 100px;
        margin: 15px;
        grid-row: span 2;
      }

      .text {
        margin-top: 0px;
      }

      .text > h2 {
        font-family: Arial, Helvetica, sans-serif;
        font-size: medium;
        text-align: center;
        margin-bottom: 2px;
      }
      .text > h3 {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 0.7em;
        text-align: center;
        margin-bottom: 5px;
      }
      .text > p {
        font-family: Arial, Helvetica, sans-serif;
        font-size: small;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <img class="image" src="willi_fit.jpg" alt="Trauerbild" />
      <div class="text">
        <h2>Willi Ettl</h2>
        <h3>geb. 19.03.1948 gest. 23.03.2024</h3>
        <p>
          Im Alter von 76 Jahren ist unser guter Freund und langjähriges
          Mitglied, Willi Ettl, trotz bekannter Krankheit doch sehr unerwartet
          von uns gegangen. In über 30 Jahren, davon lange Zeit als
          Vereinsrechner hat er Geschichte bei den Angelfreunden-Fischbachtal
          geschrieben. Wir wünschen der Familie und den Angehörigen die nötige
          Kraft in dieser schweren Zeit. Wir werden Willi Ettl als Mensch stets
          in bester Erinnerung behalten und seinem Engagement für den Verein ein
          ehrendes Andenken bewahren. <p>Lieber Willi, danke für alles.</p> <p>Im Namen
          aller Mitglieder</p> 
          <p>Die Angelfreunde Fischbachtal.</p>
        </p>
      </div>
    </div>
  </body>
</html>

Alles anzeigen

so sieht es aus.

williettl.jpeg

Wie bekomme ich den text dazu das gesamte div einzunehmen. Also der Test soll unterhalb des Bildes auch linksbündig.

Mit Flexbox was ich bevorzugen würde bin ich mehrfach kläglich gescheitert. Das muss doch irgendwie gehen?

MrMurphy · 4. April 2024

Wenn ein Text andere Elemente (meist Bilder) umfließen soll, funktioniert das weder mit Flexbox noch mit CSS-Grid. Die sind ausschließlich dafür gedacht, Elemente, die sich in einer Zeile befinden, nebeneinander darzustellen.

Damit Text (in deinem Fall) ein Bild umfließen kann, ist in CSS float vorgesehen. Das gibt es bereits seit den ersten CSS-Versionen. Um es korrekt zu verwenden muss einiges bedacht werden, wobei die Anwendung in der Praxis dann nicht schwierig ist.

Infos zu float findest du zum Beispiel unter:

Die CSS float-Eigenschaft verstehen und anwenden

Elemente können mit CSS nach links oder rechts gefloatet werden, was dazu führt, dass Fließtexte auf der jeweils anderen Seite herumlaufen. Die Technik kann…

kulturbanause.de

Ich habe mal ein Beispiel auf deiner Grundlage erstellt. Da mir dein Bild nicht vorlag musste ich ein anders verwenden. Folge: Da dein Bild eine andere Größe hat musst du eventuell einige Größenangaben anpassen. Aber erst mal ersetzen und dann Änderungen vornehmen. Im CSS-Teil des Quelltextes habe ich Einträge von dir, die stören, auskommentiert und fehlende Angaben hinzugefügt:

HTML

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Float</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>

      body {
         max-width: 1200px;
         margin: 0rem auto 0rem auto;
      }
      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;
      }
      .container {
         /*display: grid;*/
         /*grid-template-columns: auto 2fr;*/
         /*gap: 5px;*/
         line-height: 1.4;
         width: 500px;
         height: auto;
         padding: 0 15px;
         border: 5px solid #000;
         overflow: hidden;
      }
      .image {
         /*width: 100px;*/
         /*margin: 15px;*/
         /*grid-row: span 2;*/
      }
      .text {
         margin-top: 0px;
      }
      .text > h2 {
         font-family: Arial, Helvetica, sans-serif;
         font-size: medium;
         text-align: center;
         margin-bottom: 2px;
      }
      .text > h3 {
         font-family: Arial, Helvetica, sans-serif;
         font-size: 0.7em;
         text-align: center;
         margin-bottom: 5px;
      }
      .text > p {
         font-family: Arial, Helvetica, sans-serif;
         font-size: small;
      }
      .container > figure {
         float: left;
         max-width: 95px;
         padding: 20px 15px 1px 0px;
      }

   </style>
</head>
<body>
   <header>
      <h1>Float - Beispiel</h1>
   </header>
   <main>
  <body>
      <div class="container">
         <figure>
            <img src="https://upload.wikimedia.org/wikipedia/commons/3/30/Cary_Grant_2_Allan_Warren.jpg" alt="Willi Ettl - Porträtbild">
         </figure>
         <div class="text">
            <h2>Willi Ettl</h2>
            <h3>geb. 19.03.1948 gest. 23.03.2024</h3>
            <p>Im Alter von 76 Jahren ist unser guter Freund und langjähriges
            Mitglied, Willi Ettl, trotz bekannter Krankheit doch sehr unerwartet
            von uns gegangen. In über 30 Jahren, davon lange Zeit als
            Vereinsrechner hat er Geschichte bei den Angelfreunden-Fischbachtal
            geschrieben. Wir wünschen der Familie und den Angehörigen die nötige
            Kraft in dieser schweren Zeit. Wir werden Willi Ettl als Mensch stets
            in bester Erinnerung behalten und seinem Engagement für den Verein ein
            ehrendes Andenken bewahren.</p>
            <p>Lieber Willi, danke für alles.</p>
            <p>Im Namen aller Mitglieder</p> 
            <p>Die Angelfreunde Fischbachtal.</p>
         </div>
      </div>
   </main>
   <footer>
      <p>Originaldiskussion: <a href="https://www.html-seminar.de/forum/thread/10563-text-soll-sich-im-div-wo-m%C3%B6glich-die-volle-breite-nehmen/">https://www.html-seminar.de/</a></p>
   </footer>
</body>
</html>

Alles anzeigen

Emess · 4. April 2024

Vielen Dank mit deinem Ansatz hab ich es doch noch schnell hinbekommen.

Flexbox halt also auch seine Grenzen. Doch wo man es einsetzen kann kommt man schnell zum Ziel.

Jedenfalls noch mal Danke. So können wir wenigst unserem Willi ein gedenken,

https://angelfreunde-fischbachtal.de/memo.html

Text soll sich im div wo möglich die volle Breite nehmen

Jetzt mitmachen!

Teilen

Tags