2 Bilder nebeneinander

  • Guten Abend,


    ich wollte mich mal erkundigen wie ich 2 Bilder nebeneinander machen kann, mit einem Text.



    Derzeit sieht es bei mir so aus:


    [Blockierte Grafik: https://abload.de/img/bild1ousx6.png]



    ich möchte allerdings das die beiden nebeneinander sind, inkl. Text.




    Mein HTML Code:


    Code
    <!-- Hier fängt die 'Manager' Gruppe an! -->
      <div class="rush"><br />
      <p>Server Managment</p><br />
      <img src="img/RushLP.png" alt="" border="0">  </div>
      <p class="name2">GleichZeitig_YT</p>
    
      <div class="cloud">
      <img src="img/RushLP.png" alt="" border="0">  </div>
      <p class="name2">GleichZeitig_YT</p>
    <!-- Hier endet die 'Manager' Gruppe! -->



    Hier mein CSS Code:




    Liebe Grüße!

  • Hi CuzImCloud,


    ich bin hier nicht als Experte im Forum bekannt, aber es gibt viele Wege die nach Rom führen.

    Durch die Verwendung der <p> und <div> Tags auf die einzelnen Zeilen gibst Du dem Ganzen quasi einen >Return< und das nächste Element positioniert sich darunter. Probiere einfach mal die <p> und <div> tags rauszulassen und dann siehst Du was ich meine.


    Code
    <p>Server Managment</p><br />
      <img src="XXX.png" alt="" border="0" width="100">
      GleichZeitig_YT
    
      
      <img src="XXX.PNG" alt="" border="0" width="100">
      <p class="name2">GleichZeitig_YT</p>

    Das kann man sicher dann für Dein Gusto codieren.


    <figure> wäre eine Möglichkeit. Hier ein Beispiel: https://wiki.selfhtml.org/wiki/CSS/Tutorials/Bilder_mit_Bildunterschriften

    Man kann aber sicher auch mit <float> in CSS was machen.


    Wie gesagt: Viele Wege nach Rom. Es kommt halt darauf an was Du am Besten brauchst.


    Just my 5 Cents.

  • Vielen Dank!!


    Ich habe es geschafft die Bilder zu zentrieren, jedoch die letzte Frage:


    Wie kann ich den Abstand zwischen den beiden verringern?

    Zentriert habe ich es mit "margin: auto;"


    Aber dann ist ein sehr großer Abstand dazwischen.




    Gruß!

  • Vielen Dank.


    Ich muss echt noch ein wenig lernen.


    Ich habe jetzt das mit "child" gemacht.


    Wie muss ich des machen wenn ich noch ein 3 Teammitglied hinzufügen möchte?


    Nutze derzeit wie gesagt:


    Code
     nth-child(2) {


    Wie in deinem Link

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!