HTML, 2 Bilder in einer Reihe?

Hallo Leute,

Ich wollte gerade zwei Bilder in eine Reihe bringen. Des erste Bild auf die linke Seite zu bekommen und das zweite auf die rechte zu schieben, habe ich hinbekommen. Jetzt ist nur noch das Problem, dass die Bilder nicht nebeneinander, sondern untereinander sind.

Was muss ich hinzufügen, dass die Bilder in einer Reihe sind?

Pastebin.com/gccrXskr

11.04.2020, 16:20

Erste Frage beantwortet,

Jetzt noch mal ne kleine Frage xD

Also ich habe jetzt die beiden Bilder in die Tabelle eingefügt und jetzt sind dich auch so angeordnet wie ich es mir vorgestellt habe, aber: über den bilder ist ein preisschild und die bilder sind viel zu weit unten. Wie bringe ich die bilder weiter nach oben?

11.04.2020, 16:20

Preisschild im Sinne von einfachem Text (auch in einer Tabelle)

4 Antworten

Vom Beitragsersteller als hilfreich ausgezeichnet

Steffile

11.04.2020, 14:13

Da das Background-images sind, musst du die container, in denen sie sich befinden (.produkte1, .produkte2) , positionieren.

z.B.

.produkte1, .produkte2 {
display: block;
width: 50%;
float: left;
overflow: hidden
}

Oder statt float kannst du auch display: inline-block versuchen

NackterGerd

12.04.2020, 15:52

Anstatt Tabelle solltest du GRID verwenden.

Mit GRID kannst du dann ganz einfach auch Responsable Design erreichen

Mit Tabelle geht das nicht außerdem erwartet Google bei Tabelle Daten und würde Deine Seite nicht so gut in der Suche anzeigen

Lolwis111

11.04.2020, 14:06

In reinem HTML könnte man das mit einer Tabelle lösen. Ansonsten CSS und das “float”-Attribut.

Woher ich das weiß:Studium / Ausbildung – Student der Informatik an der HU Berlin

bycrix1

Beitragsersteller

11.04.2020, 14:08

Float: left; und float: right; funktioniert komischer weise gar nicht. Right wird immer noch auf der linken Seite gezeigt.

bycrix1

Beitragsersteller

11.04.2020, 14:21

Hab das in einer Tabelle gemacht und es hat geklappt. Danke für die schnelle Antwort!

RakonDark

11.04.2020, 15:16

@bycrix1

dann nimm lieber https://www.w3schools.com/css/css3_flexbox.asp
tabellen ist das letzte was man nimmt ausser es sind halt tabellen oder man muss Email HTML machen . alles andere wird dir früher oder später beim design auf die füße fallen.

bycrix1

Beitragsersteller

11.04.2020, 16:04

@RakonDark

Jetzt noch mal ne kleine Frage xD

RakonDark

11.04.2020, 14:09

2 wege ,

float:left , so das die also aus dem zeilenkontext gehoben werden und ganz nach links rutschen und das folgende auch nach links daneben rutscht.

<div style="float:left;"></div>
<div style="float:left;"></div>

oder

inline-block , dann verhält es sich wie ein zeichen .

<div style="display:inline-block;"></div>
<div style="display:inline-block;"></div>

RakonDark

11.04.2020, 14:26

beide lösungen brauchen genügend view breite , sonst passen sie sich an , halt wie wörter im text . ergo etwas drum rum was mindestens den platz bietet (ausser man arbeitet mit % angaben)

RakonDark

11.04.2020, 15:17

Lösung drei
https://www.w3schools.com/css/css3_flexbox.asp

Ähnliche Beiträge

Wie kann ich die HTML-Buttons untereinander anordnen?

Hey,

in einer while-Schleife habe ich einen Button erstellt. Doch sie werden nebeneinander angeordnet und nicht untereinander. Doch wie positioniere ich sie untereinander (Nein, <br> funktioniert nicht)?

  while ($row = mysqli_fetch_assoc($data)) {
?>
<p class="select_btn">
  <button class="lebensmittel-eintrag" data-value="<?php echo $row['lebensmittel']?>">
    <?php echo ($number).". ".$row['lebensmittel']."<br>"; ?>
  </button>
  <br>
</p>
<?php $number++; ?>
<?php
  }
?>

...zum Beitrag

Wie kann ich einstellen, dass die div-Boxen auf dem Handy untereinander dargestellt werden?

Guten Tag.

Mein Problem ist Folgendes: Auf dem PC werden die Boxen ganz normal und wie gewollt dargestellt, doch auf dem Handy wird alles in die Reihe gequetscht und man kann nichts erkennen. Wie kann ich nun einstellen, dass die div-Boxen untereinander dargestellt werden?

Quellcode:

<?php
  require('templates/header.php');
?>

<div class="content">
  <div class="row">
    <div class="col-md-12">
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">Kampagnen</h3>
        </div>
        <br><br>
        <div class="row">
          <div class="col-xs-12">
            <div class="box box-container">
              <div class="row">
                <div class="col-xs-12">
                  <div class="box-first box-container">
                    <div class="row">
                      <div class="col-xs-1">
                        <div class="row">
                          <div class="col-xs">
                            <div class="box-nested" text-align="center">
                              <img src="templates/XXX.png"/>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="col-xs-3">
                        <div class="box-nested">
                          <strong> XXX </strong>
                        </div>
                      </div>
                      <div class="col-xs-3">
                        <div class="box-nested">
                          <h4>
                            <span class="badge badge-pill badge-success">XXX: 1,10€</span>
                            <span class="badge badge-pill badge-secondary">XXX: 1,00€</span>
                          </h4>
                        </div>
                      </div>
                      <div class="col-xs-4">
                        <div class="box-nested">
                          <span>
                            <h4>
                              <font color="#400040">
                                <input name="text" id="myInput" id="text" width="100%;" ?>">
                                <button class="badge badge-pill badge-danger" onclick="myFunction()">Link Kopieren</button>
                              </h4>
                            </font>
                            <script>

                              function myFunction() {
                                var copyText = document.getElementById("myInput");
                                copyText.select();
                                document.execCommand("copy");
                              }
                            </script>
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="card-body all-icons">
          <div class="row">
            <div class="wrap-table100">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<?php
  require('templates/footer.php');
?>

Das CSS, welches zugegebener Weise sehr unübersichtlich ist^^, lautet wie folgt:

https://pastebin.com/hHsGJhFE

...zum Beitrag

Java 5 Sterne in einer Reihe?

Ich soll in Java 5 Sterne("*") in einer Reihe in einer for- Schleife programmieren. Untereinander schaffe ich fünf Sterne aber wie mach ich die nebeneinander ?

...zum Beitrag

Frage zur Formatierung in HTML (Bild, h1, h2) nebeneinander?

Hallo Liebe Community, ich habe ein Problem mit HTML... Könnte mir bitte jemand helfen.

Und zwar übe ich gerade ein bisschen mit HTML, und mir ist gerade aufgefallen, dass wenn in im Header ein Bild, eine Überschrift

und eine Zweite Überschrift habe, diese untereinander stehen, ich meine... Das wusste ich ja... Aber nun möchte ich wissen, wie ich diese drei nebeneinander darstellen kann... Ich habe leider auch nichts im Internet gefunden...
Skript:

...
xxx yyy

...

Ich habe auch schon alles in CSS versucht, aber habe es nicht hinbekommen...

mfg Alexander

...zum Beitrag

HTML/CSS, Footer, Divs werden untereinander und nicht nebeneinander platziert?

Guten Abend. :)

Ich beschäftige mich momentan viel mit HTML und CSS und habe eine eigene kleine Website zum Spaß gemacht.

Aus Jux und Tollerei wollte ich jetzt einen Facebook-Like und einen -Teilen-Button mit einbauen, und das in einem Footer. Die Buttons habe ich beide jeweils in ein Div gepackt und diesen per "float: left;" gesagt, das sie sich nebeneinander von links anordnen sollen. Zumindest stand in sehr vielen anderen Foren in denen ich mich umgesehen habe so ziemlich überall genau das.

Bei mir funktioniert das aus unerfindlichen Gründen leider nicht, die Buttons werden untereinander angeordnet.

Zur Seite kommt ihr hier: http://nyancatmarathon.tk/

(Am Besten auf Lautlos stellen, nervige Musik im Hintergrund, außerdem hat sich der Footer von ganz unten in die Mitte der Seite verschoben, als ich die Seite am Localhost bearbeitet habe war das noch nicht so, komisch...)

Ich hoffe jemand von euch weiß woran es liegt und kann mir helfen. :)

Vielen Dank und LG, Bluedragon1

...zum Beitrag

Bilder Nebeneinander?

Hallo Leute,

ich hatte eine Frage bezüglich meines Codes. Ich habe 5 Bilder mit 5 Buttons darunter wie kann ich das alles zusammen in eine Reihe bringen so das unter jedem Bild ein Text steht.

...zum Beitrag

Excel - Tabelle untereinander nebeneinander?

Hallo,

habe Excel mit A1 Name, A2 Geburtsdatum, A3 Ort, A4 Adresse, A5 Telefonnummer - dann kommt der nächste Datensatz nach gleichem Muster mit einer Zeile Abstand... A7 Name, A8 Geburtstatum....

gewünschtes Format: Nun wird die Tabelle quer benötigt mit folgenden Spalten: Name, Geburtsdatum, Ort, Adresse, Telefonnummer.

ES sind über 200 Namen ...

wie kann man die Tabelle in das gewünschte Format bringen?

DANKE vorab & LG

...zum Beitrag

Tabelle nebeneinander setzen (OpenOffice 4.1.1)

Hallo Community,

ich möchte 2 verschiedene Tabellen nebeneinander auf eine Seite schieben. Wisst ihr wie das geht?

Wäre toll wenn ihr mir weiter helfen könnt.

Vielen Dank.

...zum Beitrag

Website HTML und CSS Fehler?

Hallo,

ich soll als Hausaufgabe eine Website (nur HTML und CSS) programmieren (wir haben bis jetzt nur die Basics gemacht).

Ich habe nun die Grundstruktur in HTML so gemacht, wie ich es brauche und bin nun beim CSS Teil angekommen, welcher mir etwas Kopfschmerzen bereitet.

Ich habe mal Screenshots vom bisherigen Code eingefügt (Die Website soll laut Lehrer ganz einfach sein, das Impressum muss nur einen Beispieltext enthalten und den Code für den footer aus der Landingpage habe ich noch nicht an die anderen Seiten angepasst, da ich noch mit CSS am experimentieren war).

Falls der Code an sich besser weiterhilft, habe ich hier noch den Dropbox Link:
https://www.dropbox.com/scl/fi/fgwyg3w7m4hfqdnbl3f3n/Website.zip?rlkey=1ea3d4quzggbn8xgnk9x9gvk3&dl=0

Nun habe ich folgende Probleme/Dinge, die ich auf der Website haben möchte, aber nicht hinbekomme:

Ich möchte einen festen Header haben (wie der auf gutefrage), bei welchem die anderen Seiten mittig angeordnet sind
Der footer soll wie bei Amazon ganz unten sein und auch in einem farbigen Kasten, welcher sich über den ganzen Bildschirm zieht
Die Texte im Footer sollen einmal links(2023), mittig(impressum) und rechts(Namen) ausgerichtet sein (irgendwie konnte ich den Link zum Impressum nicht verschieben)
Die Seite muss nicht 100% responsible sein, sondern soll sich nur an verschiedene Browser anpassen (Laut Lehrer mit Hilfe von prozentualen Werten anstatt Pixeln)
Auf der Landingpage möchte ich das Hintergrundbild haben und der Text (welchen ich noch hinzufügen muss) soll erst nach dem Bild kommen, wenn man runter scrollt
Auf der Impressum Seite soll der Beispieltext zum Uhrheberrecht nicht von ganz links nach ganz rechts auf dem Bildschirm gehen, sondern nur bis zu etwa der Mitte und dann einen Zeilenumbruch (soll sich nicht verschieben, wenn ich es mit anderem Browser benutze)

Ich habe schon selbst versucht, die oben genannten Dinge irgendwie zu fixen, aber entweder klappt es nicht oder meine Website stellt sich einmal auf den Kopf. Da wir auch erst die Basics in CSS hatten, weiß ich leider nicht mehr, als das, was ich schon gemacht habe.

Es wäre sehr hilfreich, wenn mir einer, der sich damit auskennt, weiterhelfen könnte und mir erklären kann, wie ich die oben genannten Kriterien umsetzen kann.

Ich bedanke mich schonmal sehr bei euch.

Grüße Alex

...zum Beitrag

Auf tumblr die Bilder nebeneinander anordnen

wie kann ich die Bilder nebeneinander anordnen? Ich habe es schon bei den Templates versucht. Da habe ich dreispaltig genommen, aber sie sind trotzdem noch untereinander. Ich habe bis jetzt auch nur zwei Bilder und ein Text. Ist das vielleicht zu wenig? Wie kriege ich die Bilder nebeneinander?

...zum Beitrag

Suche nach einer Möglichkeit in HTML?

Hallo Leute. Ich habe noch eine Frage für euch, wenn jemand helfen kann, wäre das sehr korrekt.

Wenn Ich in HTML das hier mache:

kommen die Buchstaben untereinander. Wenn Ich es nebeneinander schreibe, passiert auch nichts.

Wie schaffe Ich es mit dieser Schreibweise die Buchstaben in eine Reihe zu bekommen.

Ich müsste die Buchstaben in Css alle seperat nochmal bearbeiten, deswegen die Klassen und so.

Boah das wäre echt nett, wenn jemand helfen könnte. Danke…

...zum Beitrag

Wie kann ich Wörter in Google Tabellen untereinander anordnen?

Hallo,

ich habe folgendes Problem:

Ich habe mir eine Tabelle in Google Tabellen erstellt und Werte eingetragen.

Leider sind nun manche Werte links und manche rechts an der Zelle angeordnet, wodurch meine Tabelle ziemlich unordentlich aussieht.

Hier mal ein Beispiel-Screenshot:

Wie kann ich die einzelnen Werte so anordnen, dass diese ordentlich untereinander stehen?

Vielen Dank,

MrAssistent

...zum Beitrag

Bilder im Handy auf einmal nebeneinander angezeigt?

Hallo,

bei meinem Samsung Handy (A3 2017) in der Gallerie App waren die Bilder bis jetzt untereinander angeordnet, jetzt auf einmal nebeneinander.

Kann man das irgendwie ändern, dass es wieder untereinander angezeigt wird?

...zum Beitrag

Elemente, die im Periodensystem untereinander stehen, nebeneinander stehen...

Elemente, die im Periodensystem untereinander stehen, bilden eine Hauptgruppe Was haben sie gemeinsam?

Elemente, die im Periodensystem nebeneinander stehen, bilden eine Periode Was haben sie gemeinsam?

...zum Beitrag

Was möchtest Du wissen?

Deinen Beitrag erstellen