1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

Darstellungsproblem von Bildern auf der Haupseite der Homepage

Dieses Thema im Forum "Design" wurde erstellt von kusselin, 11. Oktober 2017.

  1. kusselin

    kusselin Well-Known Member

    Registriert seit:
    30. Mai 2016
    Beiträge:
    161
    Zustimmungen:
    1
    Hallo Zusammen,

    ich habe ein Darstellungsproblem der Sponsorenbilder auf unserer Homepage. Es sollen immer 6 Bilder in einer Reihe gezeigt und dargestellt werden im Format 150x150px.

    Leider wird das so nicht dargestellt wie man auf den Bildern sehen kann :( Zusätzlich habe ich mal den HTML-Code mit dazugepackt. Vielleicht ist ja möglich und einer der Experten hier kann mal drüberschauen und ev. den Fehler kurzfristig orten?

    Über eine Rückinfo was da falsch läuft danke ich Euch im Voraus. Die Homepage lautet: www.fvleutershausen.de und dann einfach runterscrollen bis zu den Werbepartnern.

    Gruss
    Kussel

    Hier der Code:
    HTML:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
     

    Anhänge:

  2. Sailor56

    Sailor56 Well-Known Member

    Registriert seit:
    13. Juni 2017
    Beiträge:
    794
    Zustimmungen:
    104
    Da stimmt etwas mit der Verschachtelung der div-Container nicht!
    Die 6 Bilder sollen jeweils in einem Container '<div class="su-column su-column-size-1-6">' schön nebeneinander innerhalb einer Zeile '<div class="su-row">' aufgelistet werden. In dem Bespielcode, den du eingefügt hast, tun die das auch... aber.... in den fraglichen Zeilen, in denen das eben nicht funktioniert, hast du Bilder innerhalb des Containers des vorherigen Bildes eingefügt!
    Etwas so...
    <div class="su-row">
    <div class="su-column su-column-size-1-6"></div>
    <div class="su-column su-column-size-1-6"></div>
    <div class="su-column su-column-size-1-6"></div>
    <div class="su-column su-column-size-1-6"></div>
    <div class="su-column su-column-size-1-6"><div class="su-column su-column-size-1-6"></div>
    </div>
    </div>


     
  3. kusselin

    kusselin Well-Known Member

    Registriert seit:
    30. Mai 2016
    Beiträge:
    161
    Zustimmungen:
    1
    Hallo Sailer56,
    danke für deine Info...den Anfang verstehe ich aber da wo du schreibst in "Etwa so"...verließen Sie Ihn.

    Ist es schlimm wenn z.B. ein Bild zum test 2mal angezeigt wird? das hatte ja mit dem Anzeigen nichts zu tun.

    Da ich noch nicht solange in Wordpress drin bin, wäre es nett wenn du mir eine Beispieldatei vorlegen könntest.

    Vielen herzlichen Dank vorab
     
  4. Sailor56

    Sailor56 Well-Known Member

    Registriert seit:
    13. Juni 2017
    Beiträge:
    794
    Zustimmungen:
    104
    Eine korrekte Beispieldatei hast du ja selbst... die ersten beiden Zeilen deiner Werbepartnerliste funktionieren ja tadellos. Ich weiß ja auch nicht, wie du diese Auflistung erstellt hast - irgendsoein Plugin? Von Hand mit HTML Code?
    Aber ich kann dir konkret an deinem Quellcode zeigen, wo der Fehler liegt... wie du ihn dann beseitigen kannst, hängt davon ab, wie diese Liste erstellt wurde.
    Hier mal ein Auszug aus deinem Quellcode und zwar genau die Stelle, an der der Fehler zum ersten Mal auftritt...

    .....
    <div class="su-column su-column-size-1-6"> hier ist noch alles richtig - Anfang div zum Einfügen eines Bildes
    <div class="su-column-inner su-clearfix"> ebenfalls richtig - Anfang eines inneren div, in dem das Bild eingefügt ist
    <img class="alignnone wp-image-316 size-thumbnail" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="http://fvleutershausen.de/wp-content/uploads/2015/06/gasthausrose-150x150.png" alt="gasthausrose" width="150" height="150" data-srcset="http://fvleutershausen.de/wp-content/uploads/2015/06/gasthausrose-150x150.png 150w, http://fvleutershausen.de/wp-content/uploads/2015/06/gasthausrose-300x300.png 300w, http://fvleutershausen.de/wp-content/uploads/2015/06/gasthausrose.png 400w" data-sizes="(max-width: 150px) 100vw, 150px" />
    </div> hier wird das innere div geschlossen - richtig so
    </div> hier wird das äußere div geschlossen - auch richtig so

    <div class="su-column su-column-size-1-6"> hier beginnt die Einfügung des nächsten Bildes... öffne div
    <div class="su-column-inner su-clearfix"> das innere div wird geöffnet - merke, jetzt sind 2 div's geöffnet!
    <a href="http://http://www.obsthof-volk.de/" rel="attachment wp-att-4415">
    <img class="alignnone wp-image-4415 size-thumbnail" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="http://fvleutershausen.de/wp-content/uploads/2016/04/Obsthof_Volk_Home-150x150.jpg" class="grouped_elements" rel="tc-fancybox-group2" alt="Obsthof_Volk_Home" width="150" height="150" data-srcset="http://fvleutershausen.de/wp-content/uploads/2016/04/Obsthof_Volk_Home-150x150.jpg 150w, http://fvleutershausen.de/wp-content/uploads/2016/04/Obsthof_Volk_Home-300x300.jpg 300w, http://fvleutershausen.de/wp-content/uploads/2016/04/Obsthof_Volk_Home.jpg 400w" data-sizes="(max-width: 150px) 100vw, 150px" />
    </a>
    </div> das innere div wird geschlossen... das Äußere ist aber noch auf! Alles weitere wird jetzt noch in dieses äußere div hinzugefügt!

    <div class="su-column su-column-size-1-6"> HIER ist der Fehler... das vorhergehende äußere div ist noch nicht geschlossen und du fügst ein weiteres Bild ein.
    <div class="su-column-inner su-clearfix">
    <img class="alignnone wp-image-269 size-thumbnail" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="http://fvleutershausen.de/wp-content/uploads/2015/06/voba-150x150.jpg" alt="" width="150" height="150" data-srcset="http://fvleutershausen.de/wp-content/uploads/2015/06/voba-150x150.jpg 150w, http://fvleutershausen.de/wp-content/uploads/2015/06/voba-300x300.jpg 300w, http://fvleutershausen.de/wp-content/uploads/2015/06/voba.jpg 400w" data-sizes="(max-width: 150px) 100vw, 150px" />
    </div>
    </div>

    ....
    Ich hoffe, du erkennst anhand der roten Beschreibung, wie dein Fehler zustande kommt.
    Sei aber etwas vorsichtig bei der Behebung des Fehlers - einfach ein schließendes div ( </div> ) hinzufügen klappt nicht. Diese div's müssen immer als Ganzes ( <div>...</div> ) betrachtet werden.
    Das Beste wird sein, wenn du die betreffenden 'Zeilen' nochmal komplett neu machst und dich daran hältst, wie du die ersten Beiden erstellt hast, denn die sind ja richtig.
     
  5. Sailor56

    Sailor56 Well-Known Member

    Registriert seit:
    13. Juni 2017
    Beiträge:
    794
    Zustimmungen:
    104
    Anscheinend ist mein letzter Beitrag in der Moderator-Prüfschleife gelandet - hmmm... der (meines Wissens einzige) Moderator hat sich allerdings gestern für 14 Tage in den Urlaub abgemeldet und 14 Tage auf die Freigabe zu warten erscheint mit zur Beantwortung einer Frage als nicht angebracht!
    @kusselin - Wenn du einverstanden bist, dann schicke ich dir die Antwort per PN und die öffentliche 'Antwort' kommt dann eben wenn Maxe wieder aus dem Urlaub zurück ist.
     
  6. kusselin

    kusselin Well-Known Member

    Registriert seit:
    30. Mai 2016
    Beiträge:
    161
    Zustimmungen:
    1
    Hallo Sailor56,

    ja klar..gerne kannst du mir die Antwort per PN senden!!

    Vielen herzlichen Dank
     
  7. kusselin

    kusselin Well-Known Member

    Registriert seit:
    30. Mai 2016
    Beiträge:
    161
    Zustimmungen:
    1
    Thread kann als gelöst markiert werden!!
     
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden