Bilder mit text horinzontal Anordnen

weev

Hallo an Alle,
Ich habe eine Möglichkeit Bild und Text zusammen auf meine Webseite zu bringen:
<div style="width: 234px;">
<img src="banner.png" width="234" height="60" border="0" alt="Banner">
<p>
Text unterhalb einer Grafik, dessen Breite auf die der Grafik begrenzt ist.<br> Hier ist der Text in einem Absatz, was zu geinem größeren Abstand zum Bild führt. Der Abstand kann durch Zuweisung eines margin-top-Wertes korrigiert werden.
</p>
</div>

Nun möchte ich gern auf meine Webseite mehrere Bilder mit Text nebeneinander auf meine Seite anzeigen lassen. Ich kenn mich mit den Div's nicht oder schlecht aus.
Weiß jemand Rat?
Lg weev

Sailor

Versuche es mit Flex-Box.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

weev

Tja Englisch. Also ich habe kein einziges scr img gesehen - wie soll man da Bilder einbauen?
Ich habe in meinem Skript einen Div und den wollte ich bei behalten weil das genau das sein würde wenn ich mehrere nebeneinander kriege.

MrMurphy

Das was du willst wird inoffiziell als Card-Layout umschreiben. Bilder mit Text die symetrisch angeordnet werden.

Um es gleich mal direkt zu schreiben: Dir fehlen offensichtlich noch viele Grundlagen. Selbst wenn wir dir helfen wirst du mit deinem Vorwissen und deinen Vorstellungen damit wenig anfangen können. Das Thema erfordert zwar nur wenig Quelltext, ist schon ziemlich komplex.

Zudem scheinst du nach einer vollkommen veralteten Lernquelle zu lernen. Das erschwert unsere Hilfe zusätzlich. Zudem kennen wir weder deine realen Bilder noch den dazugehörigen Text. Davon hängt aber auch eine endgültige Lösung ab.

Zum Beispiel: div sind einfach nur Container, die nach den HTML-Regeln nur noch in Ausnahmefällen verwendet werden dürfen. Falls es im HTML-Sprachschaft geeignetere Container wie figure, dl, section, article, ... gibt sollen die verwendet werden.

Oder: Das br-Element soll nicht mehr zum Layouten verwendet werden. Es hat eine Bedeutung bekommen. Wenn die nicht gegeben ist (und das ist sie in deinem Beispiel nicht) soll es nicht verwendet werden. In deinem Beispiel wären zwei einzelne Absätze (p-Elemente) korrekt. Die Abstände (auch zum Bild) werden dann über CSS angepasst.

Oder: Internes CSS im HTML-Quelltext ist zu vermeiden. Dafür gibt es die Möglichkeit einer externen CSS-Datei oder grade für Testseiten das style-Element im header des Quelltextes.

Oder: Eine absolute Größe von Bildern soll nicht durch CSS bestimmt werden. Es gehört zum guten Stil Bilder mit einem Grafikprogramm so zu skalieren (also deren Größe anzupassen) wie sie maximal auf der Webseite angezeigt werden.

Oder: Deine Angaben zum Bild ( width="... ) mit HTML stammen aus der Zeit vor CSS, sollen also bereits seit fast 20 Jahren überhaupt nicht mehr verwendet werden. Auch wenn die Browser abwärtskompatibel sind und versuchen solche Angaben korrekt umzusetzen.

Oder: Du weißt offensichtlich nicht mal, dass sich die CSS-Angaben auf viele Elemente anwenden lassen. Wenn Flexbox an Hand eines section-Containers beschreiben wird lassen sich die Beispiele genau so gut auf article-, dl- oder viele andere Elemente anwenden.

Mit aktuellem HTML und CSS, wenn die Seite wahrscheinlich sogar auf Geräten mit kleinem Bildschirm funktionieren soll, hat das nicht zu tun.

Du solltest dir also zunächst aktuelles Lehrmaterial anschaffen. Dazu gehört bereits seit längerem auch Flexbox. Also ins Inhaltsverzeichnis oder die Beschreibung schauen. Wenn dort nichts von Flexbox steht gleich wieder entsorgen oder gar nicht erst kaufen. Noch besser und aktueller sollte auch CSS-Grid beschrieben werden.

weev

Hmm, du stellst mich als idiot dar. Wozu ist ein Hilfeforum? Kennt sich jemand da aus braucht er keine.

MrMurphy

Nein, das interpretierst du vollkommen falsch. Unwissenheit hat überhaupt nichts mit Idiotie oder sonstigen negativen Eigenschaften zu tun.

HTML und CSS haben überhaupt nichts mit Lebenserfahrung, Geschicklichkeit, angeborenen Fähigkeiten und ähnlichem zu tun. Sondern die sind sehr lebensfremd. Deshalb muss das gelernt werden. Vor der Einführung von CSS war das noch relativ einfach möglich. Die Zeiten sind aber schon lange vorbei.

Um das Lernen der Grundlagen kommst du deshalb nicht herum. Und erst wenn du die Grundlagen kennst kann dir bei einzelnen Problemen sinnvoll geholfen werden.

Ich kann dir gerne eine Beispielseite zur Verfügung stellen, die ich mal für einen anderen Fragesteller geschrieben habe. Du musst den Quellcode nur in einer UTF-Datei abspeichern, kannst die Seite dann direkt im Browser aufrufen und ausprobieren. Zum Beispiel was bei schmaleren Fenstern passiert.

Ich wage aber zu bezweifeln dass dir die weiterhilft.

HTML

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Cardlayout 01 Flexbox</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 {
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         /*box-sizing: border-box;*/
         min-width: 1px;
      }
      html {
      }
      body {
         padding: 1rem 0.5rem 2rem 0.5rem;
         margin: 0rem 0rem 0rem 0rem;
      }
   }


   /*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, dl, dt, 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 {
         min-width: 1px;
         max-width: 100%;
         min-height: 1px;
         margin: 0rem;
      }
      img {
         min-width: 1px;
         display: block;
         max-width: 100%;
         /*max-height: 100vh;*/
         border: 0px;
      }
   }


   /*Listen dl*/
   @media all {
      dl {
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
      dt,
      dd {
      }
      dt {
         font-weight: bold;
         margin: 0rem 0rem 0rem 0rem;
      }
      dt:nth-of-type(1n+2) {
         margin: 1rem 0rem 0rem 0rem;
      }
      dd {
         margin: 0rem 0rem 0rem 0rem;
      }
      dd p {
         margin: 0rem 0rem 0rem 0rem;
      }
   }


   /*.cardlayout*/
   @media all {
      .cardlayout {
         border: 2px solid grey;
         display: flex;
         flex-wrap: wrap;
      }
      .cardlayout img {
         min-width: 1px;
         display: block;
         max-width: 100%;
         border: 0px;
      }
      .cardlayout h3 {
         margin: 0.1rem 0.5rem 0rem 0.5rem;
      }
      .cardlayout p {
         margin: 0.1rem 0.5rem 0rem 0.5rem;
      }
      .cardlayout p:last-child {
         margin-bottom: 1.0rem;
      }
   }
   @media only screen and (min-width: 600px) {
      .cardlayout>* {
         width: calc(50% - 0.25rem);
      }
      .cardlayout>*:not(:nth-child(2n+2)) {
         margin-right: 0.5rem;
      }
   }
   @media only screen and (min-width: 900px) {
      .cardlayout>* {
         width: calc(33.3333% - 0.3333rem);
      }
      .cardlayout>*:not(:nth-child(2n+2)) {
         margin-right: 0rem;
      }
      .cardlayout>*:not(:nth-child(3n+3)) {
         margin-right: 0.5rem;
      }
   }
   @media only screen and (min-width: 1100px) {
      .cardlayout>* {
         width: calc(25% - 0.375rem);
      }
      .cardlayout>*:not(:nth-child(3n+3)) {
         margin-right: 0rem;
      }
      .cardlayout>*:not(:nth-child(4n+4)) {
         margin-right: 0.5rem;
      }
   }
   @media only screen and (min-width: 1300px) {
      .cardlayout>* {
         width: calc(20% - 0.401rem);
      }
      .cardlayout>*:not(:nth-child(4n+4)) {
         margin-right: 0rem;
      }
      .cardlayout>*:not(:nth-child(5n+5)) {
         margin-right: 0.5rem;
      }
   }


   </style>
</head>
<body>
   <header id="pageheader" class="pageheader">
      <h1>Cardlayout mit Flexbox</h1>
   </header>
   <nav id="navigation" class="navigation">
   </nav>
   <main id="content" class="content">
      <h2>Aufgabe</h2>
      <p>Die Bilder sollen linksbündig angeordnet sein. In jeder Zeile sollen die Bilder links- und rechtsbündig ohne Abstand am Containerrand / Bildschirmrand stehen und sie sollen durch einen Abstand getrennt sein.</p>
      <p>Eine Lösung mit "justify-content: space-between" kommt nicht in Betracht, da dann die Bilder nicht immer linksbündig angeordnet werden.</p>
      <h2>Lösung mit Flexbox</h2>
      <article class="cardlayout">
         <section>
            <img src="http://lorempixel.com/600/300/transport/2">
            <h3>Ein Flugzeug</h3>
            <p>EP ⋅ 859712829535</p>
         </section>
         <section>
            <img src="http://lorempixel.com/600/300/transport/5">
            <h3>Der Porsche</h3>
            <p>EP ⋅ 859712829535</p>
         </section>
         <section>
            <img src="http://lorempixel.com/600/300/transport/8">
            <h3>Das Mini</h3>
            <p>EP ⋅ 859712829535</p>
         </section>
         <section>
            <img src="http://lorempixel.com/600/300/nature/2">
            <h3>Eine Insel mit zwei Bergen</h3>
            <p>EP ⋅ 859712829536</p>
         </section>
         <section>
            <img src="http://lorempixel.com/600/300/nature/10">
            <h3>Der Wasserhahn tropft</h3>
            <p>EP ⋅ 859712829537</p>
         </section>
         <section>
            <img src="http://lorempixel.com/600/300/abstract/1">
            <h3>Nach der Feier</h3>
            <p>EP ⋅ 859712829538</p>
         </section>
         <section>
            <img src="http://lorempixel.com/600/300/animals/8">
            <h3>Ein Hund bellt - oder auch nicht</h3>
            <p>EP ⋅ 859712829539</p>
         </section>
      </article>
   </main>
   <aside class="sidebar">
   </aside>
   <footer id="pagefooter" class="pagefooter">
      <p>Originaldiskussion: <a href="https://www.html.de/threads/problem-div-container-fuer-responsive-seite-richtig-einrichten.59028/">https://www.html.de/</a></p>
   </footer>
</body>
</html>

Alles anzeigen

Ohne div-Elemente, weil die nach den aktuellen HTML-Regeln nicht zulässig sind. Bildergrößen und und und können natürlich mit ganz normalem CSS natürlich geändert und den persönlichen Wünschen angepasst werden.

basti1012

@MrMurphy

Darf ich mal Fragen warum du das

Code

figure {
         min-width: 1px;
         max-width: 100%;
         min-height: 1px;
         margin: 0rem;
      }

mit den mín-height , min-width mit den 1PX machst ?

Ich habe da jetzt mal etwas rum gespielt und gemacht , habe aber noch kein sinn da drinn gefunden.
Da ich dich ja schon etwas kenne gehe ich davon aus das du keinen Code verwendest den man nicht brauch , oder sinnlos wäre.

Das ist doch bestimmt ein CSS-Hack oder nicht ?
Danke schon mal für deine Antwort. Laßt mich nicht dumm sterben

Tags