Weitere Informationen und den Download findest du auf der offiziellen Anlaufstelle de.wordpress.org
Ergebnis 1 bis 7 von 7
  1. #1
    PostRank: 2
    Registriert seit
    30.05.2016
    Beiträge
    82

    Darstellungsproblem von Bildern auf der Haupseite der Homepage

    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-Code:
    <h1>Unsere Werbepartner:</h1>
    <div class="su-row">
    <div class="su-column su-column-size-1-6">
    <div class="su-column-inner su-clearfix"><a href="http://gasthauszurbergstrasse.de" rel="attachment wp-att-4405"><img class="alignnone wp-image-4405 size-thumbnail" src="http://fvleutershausen.de/wp-content/uploads/2016/04/Logo-Gasthaus-zur-Bergstraße-neu-400x400-150x150.jpg" alt="Logo Gasthaus zur Bergstraße neu 400x400" width="150" height="150" /></a></div>
    </div>
    <div class="su-column su-column-size-1-6">
    <div class="su-column-inner su-clearfix"><a href="https://www.axa-betreuer.de/Andreas_Stadler" target="_blank" rel="noopener"><img class="alignnone wp-image-273 size-thumbnail" src="http://fvleutershausen.de/wp-content/uploads/2015/06/axastadler-150x150.jpg" alt="axastadler" width="150" height="150" /></a></div>
    </div>
    <div class="su-column su-column-size-1-6">
    <div class="su-column-inner su-clearfix"><a href="http://www.copyshop-druckerei-weinheim.de/http://"><img class="alignnone wp-image-1700 size-thumbnail" src="http://fvleutershausen.de/wp-content/uploads/2015/08/seydal-150x150.jpg" alt="seydal" width="150" height="150" /></a></div>
    </div>
    <div class="su-column su-column-size-1-6">
    <div class="su-column-inner su-clearfix"><img class="alignnone wp-image-316 size-thumbnail" src="http://fvleutershausen.de/wp-content/uploads/2015/06/gasthausrose-150x150.png" alt="gasthausrose" width="150" height="150" /></div>
    </div>
    <div class="su-column su-column-size-1-6">
    <div class="su-column-inner su-clearfix"><a href="http://http://www.obsthof-volk.de/" rel="attachment wp-att-4415"><img class="alignnone wp-image-4415 size-thumbnail" src="http://fvleutershausen.de/wp-content/uploads/2016/04/Obsthof_Volk_Home-150x150.jpg" alt="Obsthof_Volk_Home" width="150" height="150" /></a></div>
    <div class="su-column su-column-size-1-6">
    <div class="su-column-inner su-clearfix"><img class="alignnone wp-image-269 size-thumbnail" src="http://fvleutershausen.de/wp-content/uploads/2015/06/voba-150x150.jpg" alt="" width="150" height="150" /></div>
    </div>
    </div>
    <div class="su-row">
    <div class="su-column su-column-size-1-6">
    <div class="su-column-inner su-clearfix"><a href="http://fvleutershausen.de/muschelknautz/" target="_blank" rel="noopener"><img class="alignnone wp-image-261 size-thumbnail" src="http://fvleutershausen.de/wp-content/uploads/2015/06/muschelknautz-150x150.jpg" alt="muschelknautz" width="150" height="150" /></a></div>
    </div>
    <div class="su-column su-column-size-1-6">
    <div class="su-column-inner su-clearfix"><a href="http://http://metzgerei-schoene.de/" rel="attachment wp-att-4420"><img class="alignnone wp-image-4420 size-thumbnail" src="http://fvleutershausen.de/wp-content/uploads/2016/04/Metgerei-Schöne-neu-150x150.jpg" alt="Metgerei Schöne neu" width="150" height="150" /></a></div>
    </div>
    <div class="su-column su-column-size-1-6">
    <div class="su-column-inner su-clearfix"><a href="http://www.josefschnell.de/"><img class="alignnone wp-image-1285 size-thumbnail" src="http://fvleutershausen.de/wp-content/uploads/2015/07/schnell-150x150.jpg" alt="" width="150" height="150" /></a></div>
    </div>
    <div class="su-column su-column-size-1-6">
    <div class="su-column-inner su-clearfix"><a href="http://www.getraenke-ost.de/" target="_blank" rel="noopener"><img class="alignnone wp-image-262 size-thumbnail" src="http://fvleutershausen.de/wp-content/uploads/2015/06/ost-150x150.jpg" alt="ost" width="150" height="150" /></a></div>
    </div>
    <div class="su-column su-column-size-1-6">
    <div class="su-column-inner su-clearfix"><a href="http://www.gala-bau-schmitt.de/"><img class="alignnone wp-image-1283 size-thumbnail" src="http://fvleutershausen.de/wp-content/uploads/2015/07/schmitt-150x150.jpg" alt="" width="150" height="150" /></a></div>
    </div>
    <div class="su-column su-column-size-1-6">
    <div class="su-column-inner su-clearfix"><a href="http://www.elektro-probst.com/" target="_blank" rel="noopener"><img class="alignnone wp-image-263 size-thumbnail" src="http://fvleutershausen.de/wp-content/uploads/2015/06/probst-150x150.jpg" alt="probst" width="150" height="150" /></a></div>
    </div>
    </div>
    <div class="su-row">
    <div class="su-column su-column-size-1-6">
    <div class="su-column-inner su-clearfix"><a href="http://fvleutershausen.de/unsere-sponsoren/logo-stadtwerke-viernheim2/" rel="attachment wp-att-2318"><img class="alignnone wp-image-2318 size-thumbnail" src="http://fvleutershausen.de/wp-content/uploads/2015/08/Logo-Stadtwerke-Viernheim2-150x150.jpg" alt="Logo Stadtwerke Viernheim2" width="150" height="150" /></a></div>
    </div>
    <div class="su-column su-column-size-1-6">
    <div class="su-column-inner su-clearfix"><a href="http://www.tentastic.de/" rel="attachment wp-att-2245"><img class="alignnone wp-image-2245 size-thumbnail" src="http://fvleutershausen.de/wp-content/uploads/2015/06/tentastic-150x150.jpg" alt="tentastic" width="150" height="150" /></a></div>
    </div>
    <div class="su-column su-column-size-1-6">
    <div class="su-column-inner su-clearfix"><a href="http://fvleutershausen.de/wp-content/uploads/2017/09/Buessecker.jpg"><img class="alignnone wp-image-7252 size-thumbnail" src="http://fvleutershausen.de/wp-content/uploads/2017/09/Buessecker-150x150.jpg" alt="Buessecker_400x400" width="150" height="150" /></a></div>
    <div class="su-column su-column-size-1-6">
    <div class="su-column-inner su-clearfix"><a href="http://www.wetzelgefru.de/" rel="attachment wp-att-4435"><img class="alignnone wp-image-4435 size-thumbnail" src="http://fvleutershausen.de/wp-content/uploads/2016/04/Wetzel-150x150.jpg" alt="Wetzel" width="150" height="150" /></a></div>
    </div>
    <div class="su-column su-column-size-1-6">
    <div class="su-column-inner su-clearfix"><a href="https://www.avia.de/privatkunden.html" rel="attachment wp-att-4438"><img class="alignnone wp-image-4438 size-thumbnail" src="http://fvleutershausen.de/wp-content/uploads/2016/04/AVIA-Dietz-150x150.jpg" alt="AVIA-Dietz" width="150" height="150" /></a></div>
    </div>
    <div class="su-column su-column-size-1-6">
    <div class="su-column-inner su-clearfix"><a href="http://www.meinbeschrifter.de/" rel="attachment wp-att-4535"><img class="alignnone wp-image-4535 size-thumbnail" src="http://fvleutershausen.de/wp-content/uploads/2015/06/Proprint-150x150.jpg" alt="Proprint" width="150" height="150" /></a></div>
    </div>
    </div>
    <div class="su-row">
    <div class="su-column su-column-size-1-6">
    <div class="su-column-inner su-clearfix"><a href="http://mein.edeka.de/eh/de/suedwest/3522/index.jsp"><img class="alignnone wp-image-4986 size-thumbnail" src="http://fvleutershausen.de/wp-content/uploads/2016/07/Zeilfelder_400x400-150x150.jpg" alt="Zeilfelder_400x400" width="150" height="150" /></a></div>
    </div>
    Angehängte Grafiken Angehängte Grafiken


  2. #2
    PostRank: 3
    Registriert seit
    13.06.2017
    Ort
    Im hohen Norden
    Beiträge
    118
    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. #3
    PostRank: 2
    Registriert seit
    30.05.2016
    Beiträge
    82
    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. #4
    PostRank: 3
    Registriert seit
    13.06.2017
    Ort
    Im hohen Norden
    Beiträge
    118
    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...se-300x300.png 300w, http://fvleutershausen.de/wp-content...sthausrose.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...me-300x300.jpg 300w, http://fvleutershausen.de/wp-content..._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...ba-300x300.jpg 300w, http://fvleutershausen.de/wp-content...15/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. #5
    PostRank: 3
    Registriert seit
    13.06.2017
    Ort
    Im hohen Norden
    Beiträge
    118
    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. #6
    PostRank: 2
    Registriert seit
    30.05.2016
    Beiträge
    82
    Hallo Sailor56,

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

    Vielen herzlichen Dank

  7. #7
    PostRank: 2
    Registriert seit
    30.05.2016
    Beiträge
    82
    Thread kann als gelöst markiert werden!!

Berechtigungen

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