Top-Kommentatoren-Übersicht: Bilder verschieben sich bei Mouse over

  • Hallo zusammen!

    Mit folgendem Code habe ich mir eine Kommentatoren-Übersicht zusammengebaut:

    Die CSS-Daten sehen so aus:

    Nun sind dort aber noch 2 mehr oder minder hässliche Fehler enthalten:

    1. Beim Mouseover über ein Bild verschieben sich die anderen Bilder auch, zwar nur geringfügig, aber man bemerkt es
    2. Ist die Darstellung der restlichen Seite verbogen. Statt weiß ist die Übersicht grau unterlegt und die Sidebar komplett unter die Darstellung gerutscht.

    Jemand einen Vorschlag, wie ich das hinbekomme?

    Danke im voraus.

    Marcus

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • dir ist ein kleiner Fehler unterlaufen

    Code
    <style="margin-right: 20px;">

    müsste so

    Code
    <div style="margin-right: 20px;">

    aussehen

    ob das dein Darstellungsproblem(hover) löst, hab ich jetzt aber nicht getestet

  • Hallo ArtofPic!

    Vielen Dank für die Antwort.

    Jetzt zieht es die Darstellung noch weiter auseinander. statt in drei Reihen untereinander, werden in der ersten Zeile 4 Bilder dargestellt, und in den nächsten nur jeweils eines.

  • nun dann nimm diese falsche Formatierung ganz raus denn so löst sie ja nur eine Kettenreaktion an Fehlern aus

    siehe Quelltext

    Code
    <style="margin-right: 20px;"=""> </style="margin-right:>
    </style="margin-right:>
    </style="margin-right:>

    und das wiederholt und verdoppelt sich immer weiter

    das verschieben bei hover kommt von

    Code
    .walloffame_stage {
        border: [COLOR="#FF0000"]0[/COLOR] solid #BBBBBB;
    Code
    .walloffame_stage:hover {
        border: [COLOR="#FF0000"]1px[/COLOR] solid #888888;

    folglich wird das div bei hover rundum 1px breiter/höher

  • Hallo ArtofPic!

    Vielen Dank für die Hilfe. Sie hat mir schon sehr weiter geholfen.

    Was - meiner Ansicht nach - jetzt nur noch querschlägt, ist die Breite der Zeilen, in der die Bilder dargestellt werden. Die reichen laut Firebug in den Sidebarbereich hinein. Da weiß ich jetzt nicht so wirklich, wie ich den eingrenzen kann.

  • du hast immer noch die falsche Formatierung drin

    PHP
    [COLOR="#FF0000"]<style="margin-right: 20px;">[/COLOR]
                <?php
                $i++;
                if($i%3==0) { ?>
               [COLOR="#FF0000"] </div>[/COLOR]

    das kann nicht funktionieren

    Code
    <[COLOR="#FF0000"]style[/COLOR]="margin-right: 20px;">   </[COLOR="#FF0000"]div[/COLOR]>

    dadurch wird ein div geschlossen, was deine Sidebar aus der Seite wirft

    also wie schon geschrieben ändern

    wenn die 20px nicht sein sollen dann weglassen

    PHP
    <div>
                <?php
                $i++;
                if($i%3==0) { ?>
              </div>

    siehe Bild

    Einmal editiert, zuletzt von Tutrix (21. April 2014 um 21:33)

  • Es ist komisch: wenn ich das style=margin rausnehme, zerhaut es mir die Darstellung, wenn ich es drinlasse, wird es korrekt dargestellt...

    Werd ich nicht so richtig schlau draus. Aber das liegt wahrscheinlich an meinen mangelnden CSS-Kenntnissen :(

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!