• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Mehrere Bilder mit Abstand nebeneinander

Y

Yogilein

Member
Hallo,

folgendes Problem: Ich möchte mehrere Bilder nebeneinander darstellen und zwar mit Abstand, aber nicht am Anfang und am Ende. Da das Ganze mit verschiedenen Bildschirmgrößen funktionieren soll, weiß ich natürlich nicht, wieviel Bilder nebeneinander passen, ansonsten könnte ich immer das letzte Bild in einer Zeile ohne margin-right darstellen.

Ich stehe jetzt echt auf dem Schlauch und Google hat bis jetzt auch nicht geholfen. Hat jemand eine Idee?
 
Sorry, aber ich bekomme es nicht hin.

Bei den Bilder handelt es sich um Banner in der halben Größe also 234 x 60 px. Die einzelnen Banner sind responsive und verkleinern sich automatisch, falls die Breite für ein Bild nicht ausreicht.

Die Anordnung ist nebeneinander, nur geht in jeder Zeile der letzte Banner nicht bis zum Ende, sondern bricht vorher um, da er ein margin-right hat.

Ich habe es auch mit einer Listendarstellung probiert, komme aber auch da nicht weiter. Gibt es einen einfachen Tipp dazu?

Mit einer Tabelle will es auch nicht klappen.

Ich will einfach einen Abstand zwischen mehreren Bannern in einer Zeile, aber trotzdem sollen sie links- und rechtsbündig ohne Abstand angeordnet sein.
 
Einfacher Tipp? Nicht das ich wüsste. Design ist auch nicht mein Steckenpferd. Aber wenn du ein reduziertes Skelett in Fiddle einstellst kann man sich daran gemeinsam probieren.
 
Ich glaube, dass ich es jetzt gelöst habe.

Ich mache den Abstand einfach über mehrere Leerzeichen (eigentlich mache ich so etwas ungern), die ich mit "white-space: pre-wrap;" per CSS formatiert habe.

Ich habe nun zwischen den Bannern einen Abstand und am Ende der Zeile reicht jeweils der letzte Banner genau bis zum Ende.
 
Solche Abstände kannst du mit Flexbox machen.
Da gibt es was das nennt sich
align-content: space-around;
justify-content: space-around;
dann kann der Fusch mit den Leerzeichen weg.
Da sind die Bilschirmgrößen egal , das regelt alles Flexbox für dich.
Poste doch einfach mal deinen jetzigen HTML und CSS Code , dann kann ich dir das mal zeigen wie ich das meine
 
Hier mal ein lauffähiges Code-Schnipsel, das das gewünschte Ergebnis bringt. Es wäre echt super, wenn das gleiche Ergebnis mit einer Flexbox zu erzielen wäre.

Code: 
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
*{margin:0;padding:0;}
body{margin:0 5px;cursor:default;font-size:100%}
.sponsor{width:100%;max-width:234px;max-height:60px;margin:0 0 20px 0;border:1px solid black;}
.banner{font:normal normal 16px/22px Arial;text-decoration:none;white-space:pre-wrap;}
</style>
</head>
<body>
<?php
$sp[0]="<a class='banner' href='https://www.yogizaehler.de/' target='_blank'><img class='sponsor' src='https://www.yogizaehler.de/Images/Test.gif' alt='Link zu YogiZähler'>     </a>";
$sp[1]="<a class='banner' href='https://www.yogizaehler.de/' target='_blank'><img class='sponsor' src='https://www.yogizaehler.de/Images/Test.gif' alt='Link zu YogiZähler'>     </a>";
$sp[2]="<a class='banner' href='https://www.yogizaehler.de/' target='_blank'><img class='sponsor' src='https://www.yogizaehler.de/Images/Test.gif' alt='Link zu YogiZähler'>     </a>";
$sp[3]="<a class='banner' href='https://www.yogizaehler.de/' target='_blank'><img class='sponsor' src='https://www.yogizaehler.de/Images/Test.gif' alt='Link zu YogiZähler'>     </a>";
$sp[4]="<a class='banner' href='https://www.yogizaehler.de/' target='_blank'><img class='sponsor' src='https://www.yogizaehler.de/Images/Test.gif' alt='Link zu YogiZähler'>     </a>";
$sp[5]="<a class='banner' href='https://www.yogizaehler.de/' target='_blank'><img class='sponsor' src='https://www.yogizaehler.de/Images/Test.gif' alt='Link zu YogiZähler'>     </a>";
$sp[6]="<a class='banner' href='https://www.yogizaehler.de/' target='_blank'><img class='sponsor' src='https://www.yogizaehler.de/Images/Test.gif' alt='Link zu YogiZähler'>     </a>";
$sp[7]="<a class='banner' href='https://www.yogizaehler.de/' target='_blank'><img class='sponsor' src='https://www.yogizaehler.de/Images/Test.gif' alt='Link zu YogiZähler'>     </a>";
$sp[8]="<a class='banner' href='https://www.yogizaehler.de/' target='_blank'><img class='sponsor' src='https://www.yogizaehler.de/Images/Test.gif' alt='Link zu YogiZähler'>     </a>";
$sp[9]="<a class='banner' href='https://www.yogizaehler.de/' target='_blank'><img class='sponsor' src='https://www.yogizaehler.de/Images/Test.gif' alt='Link zu YogiZähler'>     </a>";
shuffle($sp);
for($i=0;$i<count($sp);$i++)echo $sp[$i];
?>
</body>
</html>
 
Ich weiß nicht wie du es genau wolltest.
Sollen sich die Bilder untereinander odnen wenn es zu wennig Platz gibt.
Ode sollen sie kleiner werden.?

Kuck erstmal und sag mal ob du da noch was geändert haben willst

[url]https://basti1012.bplaced.net/index.php?ordner=forum.jswelt&name=Mehrere_Bilder_mit_Abstand_nebeneinander
forum.jswelt-63.png
[/URL]

Hie de Code weil man php bei codepen nicht nutzen kann
HTML: 
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    display: flex;
    flex-wrap: wrap;
    width: 100vw;
    height: 100vh;
    align-content: space-around;
    justify-content: space-around;
}
.banner {
    /* flex: 1; */
    display: flex;
    min-width: 100px;
    width: auto;
    margin: 10px;
    max-width: 234px;
    font: normal normal 16px/22px Arial;
    text-decoration: none;
}
.sponsor {
    width: 100%;
    border: 1px solid hsl(0deg 0% 0%);
}
</style>
</head>
<body>
<?php
// link , bild ,alt teext
$links=[
['https://www.yogizaehler.de','https://www.yogizaehler.de/Images/Test.gif','Link zu YogiZähler1'],
['https://www.yogizaehler.de','https://www.yogizaehler.de/Images/Test.gif','Link zu YogiZähler2'],
['https://www.yogizaehler.de','https://www.yogizaehler.de/Images/Test.gif','Link zu YogiZähler3'],
['https://www.yogizaehler.de','https://www.yogizaehler.de/Images/Test.gif','Link zu YogiZähler4'],
['https://www.yogizaehler.de','https://www.yogizaehler.de/Images/Test.gif','Link zu YogiZähler5'],
['https://www.yogizaehler.de','https://www.yogizaehler.de/Images/Test.gif','Link zu YogiZähler6'],
['https://www.yogizaehler.de','https://www.yogizaehler.de/Images/Test.gif','Link zu YogiZähler7'],
['https://www.yogizaehler.de','https://www.yogizaehler.de/Images/Test.gif','Link zu YogiZähler8'],
['https://www.yogizaehler.de','https://www.yogizaehler.de/Images/Test.gif','Link zu YogiZähler9'],
['https://www.yogizaehler.de','https://www.yogizaehler.de/Images/Test.gif','Link zu YogiZähler10']
];

shuffle($links);
for($i=0;$i<count($links);$i++){
echo "<a class='banner' href='".$links[$i][0]."' target='_blank'>
           <img class='sponsor' src='".$links[$i][1]."' alt='".$links[$i][2]."'>
      </a>";
}
?>
</body>
</html>
 
Zuletzt bearbeitet:
Eigentlich wollte ich:

- linksbündig ausgerichtet
- immer gleicher Abstand zwischen den einzelnen Bannern
- am Anfang und am Ende einer Zeile keinen Abstand
- verkleinern erst, wenn ein einzelner Banner zu groß für eine Zeile ist

Ich habe mal mein Skript hochgeladen:

https://www.dimono.de/Test.php

Das macht genau das, was ich will, allerdings über Leerzeichen gesteuert.
 
Yogilein schrieb:
Eigentlich wollte ich:

- verkleinern erst, wenn ein einzelner Banner zu groß für eine Zeile ist
Zum Vergrößern anklicken....

Das verstehe ich nicht ganz.Wenn ich deine Seite verkleinere weden die Banner nicht kleiner .Die Spingen dann in de nächste Zeile.

Mit den rechts und linksbündig gibt es space-beetween.
Schau mal
**Link entfernt, weil Seite nicht mehr erreichbar **
Das oben und unten Bündig kannst du einfach weg machen wenn du die Zeile mit den
align-content: space-between; löscht. Ggf muss man auch das Parent Eleent ändern , jenachdem wie viel Abstand man will.
In mein Fall einfach die Höhe des Bodys löschen, dann sollte es so aussehen wie bei di.

Spiel doch einfach mal in der Console rum , die neueen Browser versionen haben in de Css , hinte den display:flex jetzt ein Mini- Popup wo du alle Flexbox Funktionen auf die einzelne Elemente testen kannst.

Wenn hier von 3 Bilde in einer reihe ,zu 2 Bilder in eine reiher springt, hast du bei den rechts und links bündig ja etwas Platz in der Mitte. Das könnte man auch noch schöne machen wenn man dann die Banner größer macht , bzw wenn es noch 3 sind erst kleine machen.
Zb so in der Art
**Link entfernt, weil Seite nicht mehr erreichbar **
Aber das mußt du wissen wie du es gerne hättest
 
Zuletzt bearbeitet:
daniel220786 schrieb:
Das verstehe ich nicht ganz.Wenn ich deine Seite verkleinere weden die Banner nicht kleiner .Die Spingen dann in de nächste Zeile.
Zum Vergrößern anklicken....

Richtig, denn ich schrieb: - verkleinern erst, wenn ein einzelner Banner zu groß für eine Zeile ist. D. h., wenn die Zeilenbreite unter 234 Pixel geht, wird der Banner geschrumpft. Ziel ist ja, die Banner, wenn möglich, größtmöglich zu halten, damit sie auf einem Handy noch gut lesbar und auswählbar sind.

Mit Flex bin ich aber immer noch nicht weitergekommen, irgendwie schaffe ich es nicht, es so hinzubekommen, wie in meiner Vorgabe. Aktuell scheitere ich an den gewünschten, immer gleichen Abständen.

Und einen Fehler habe ich auch noch gefunden (und bereinigt): Durch das margin wurde der anklickbare Bereich nach unten vergrößert, was so nicht geplant war.
 
Ich sehe gerade das meine Links gar nicht meh gehen.
Habe etwas umgebaut.
Das mit den gleichen Abständen und mit den echts und Links anordnen verstehe ich so.


Mehrere Bilder mit Abstand nebeneinander 2

Das die Banner unter 234Px schrumpfen sollen hat ja ein sinn.
Ich überlege gerade ob es Handys gibt die unter 234 Pixel kommen ?
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben