Bilder mit text horinzontal Anordnen

  • 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

  • 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.

  • 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.

  • 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.



    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.

  • @MrMurphy


    Darf ich mal Fragen warum du das


    Code
    1. figure {
    2. min-width: 1px;
    3. max-width: 100%;
    4. min-height: 1px;
    5. margin: 0rem;
    6. }


    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 :)