Ergebnis 1 bis 12 von 12
Like Tree1Likes
  • 1 Post By daniel220786

Thema: Mehrere Bilder mit Abstand nebeneinander

  1. #1
    Yogilein ist offline Tripel-As
    registriert
    06-02-2014
    Beiträge
    198

    Mehrere Bilder mit Abstand nebeneinander

    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?
    ------------------
    Liebe Grüße
    Yogilein
    Meine Javascript-Spieleseite: YogiSpiele
    Meine Fotoseite: YogiFotos
    Meine Seite mit den kostenlosen Besucherzählern: YogiZähler
    Meine Seite über Bürstadts Wanderclub: Wanderfreunde-Bürstadt

  2. #2
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.897

    AW: Mehrere Bilder mit Abstand nebeneinander

    Ich würde die Bilder responsive machen, dann sieht es auf allen Anzeigen skaliert identisch aus.

    Ansonsten als waagerechte Liste mit Abständen oben/links und unten/rechts.
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png

  3. #3
    Yogilein ist offline Tripel-As
    registriert
    06-02-2014
    Beiträge
    198

    AW: Mehrere Bilder mit Abstand nebeneinander

    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.
    ------------------
    Liebe Grüße
    Yogilein
    Meine Javascript-Spieleseite: YogiSpiele
    Meine Fotoseite: YogiFotos
    Meine Seite mit den kostenlosen Besucherzählern: YogiZähler
    Meine Seite über Bürstadts Wanderclub: Wanderfreunde-Bürstadt

  4. #4
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.897

    AW: Mehrere Bilder mit Abstand nebeneinander

    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.
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png

  5. #5
    Yogilein ist offline Tripel-As
    registriert
    06-02-2014
    Beiträge
    198

    AW: Mehrere Bilder mit Abstand nebeneinander

    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.
    ------------------
    Liebe Grüße
    Yogilein
    Meine Javascript-Spieleseite: YogiSpiele
    Meine Fotoseite: YogiFotos
    Meine Seite mit den kostenlosen Besucherzählern: YogiZähler
    Meine Seite über Bürstadts Wanderclub: Wanderfreunde-Bürstadt

  6. #6
    daniel220786 ist offline Jungspund
    registriert
    29-11-2020
    Beiträge
    12

    AW: Mehrere Bilder mit Abstand nebeneinander

    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
    mikdoe likes this.

  7. #7
    Yogilein ist offline Tripel-As
    registriert
    06-02-2014
    Beiträge
    198

    AW: Mehrere Bilder mit Abstand nebeneinander

    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>
    ------------------
    Liebe Grüße
    Yogilein
    Meine Javascript-Spieleseite: YogiSpiele
    Meine Fotoseite: YogiFotos
    Meine Seite mit den kostenlosen Besucherzählern: YogiZähler
    Meine Seite über Bürstadts Wanderclub: Wanderfreunde-Bürstadt

  8. #8
    daniel220786 ist offline Jungspund
    registriert
    29-11-2020
    Beiträge
    12

    AW: Mehrere Bilder mit Abstand nebeneinander

    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
    https://codepen.io/basti1012/pen/jOmXQwO

    Hie de Code weil man php bei codepen nicht nutzen kann
    HTML-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;
        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>
    Geändert von daniel220786 (10-08-2021 um 16:06 Uhr)

  9. #9
    Yogilein ist offline Tripel-As
    registriert
    06-02-2014
    Beiträge
    198

    AW: Mehrere Bilder mit Abstand nebeneinander

    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.
    ------------------
    Liebe Grüße
    Yogilein
    Meine Javascript-Spieleseite: YogiSpiele
    Meine Fotoseite: YogiFotos
    Meine Seite mit den kostenlosen Besucherzählern: YogiZähler
    Meine Seite über Bürstadts Wanderclub: Wanderfreunde-Bürstadt

  10. #10
    daniel220786 ist offline Jungspund
    registriert
    29-11-2020
    Beiträge
    12

    AW: Mehrere Bilder mit Abstand nebeneinander

    Zitat Zitat von Yogilein Beitrag anzeigen
    Eigentlich wollte ich:

    - verkleinern erst, wenn ein einzelner Banner zu groß für eine Zeile ist
    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
    https://sebastian1012.bplaced.net/te...ausrichten.php
    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
    https://sebastian1012.bplaced.net/te...usrichten1.php
    Aber das mußt du wissen wie du es gerne hättest

  11. #11
    Yogilein ist offline Tripel-As
    registriert
    06-02-2014
    Beiträge
    198

    AW: Mehrere Bilder mit Abstand nebeneinander

    Zitat Zitat von daniel220786 Beitrag anzeigen
    Das verstehe ich nicht ganz.Wenn ich deine Seite verkleinere weden die Banner nicht kleiner .Die Spingen dann in de nächste Zeile.
    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.
    ------------------
    Liebe Grüße
    Yogilein
    Meine Javascript-Spieleseite: YogiSpiele
    Meine Fotoseite: YogiFotos
    Meine Seite mit den kostenlosen Besucherzählern: YogiZähler
    Meine Seite über Bürstadts Wanderclub: Wanderfreunde-Bürstadt

  12. #12
    daniel220786 ist offline Jungspund
    registriert
    29-11-2020
    Beiträge
    12

    AW: Mehrere Bilder mit Abstand nebeneinander

    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 ?

Ähnliche Themen

  1. Bilder Nebeneinander anzeigen lassen!!
    Von Janinejanine im Forum CSS und (X)HTML
    Antworten: 5
    Letzter Beitrag: 22-09-2009, 16:52
  2. bilder direkt nebeneinander
    Von norbert6 im Forum CSS und (X)HTML
    Antworten: 11
    Letzter Beitrag: 25-07-2009, 01:09
  3. Bilder nebeneinander zufällig wechseln lassen
    Von desaster_ im Forum JavaScript
    Antworten: 4
    Letzter Beitrag: 01-03-2009, 17:26
  4. abstand zwischen bilder...
    Von mine im Forum CSS und (X)HTML
    Antworten: 9
    Letzter Beitrag: 29-11-2006, 16:36
  5. mehrere Bildwechsel nebeneinander
    Von geierwalli im Forum JavaScript
    Antworten: 4
    Letzter Beitrag: 06-04-2006, 21:50

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •