Hover verschibt sich immer einer Zeile nach unten.

[Nerdy]

Hallo,

ich habe jetzt einen hover drück effekt für bilder eingefügt nun wenn ich auf das letzte bild in einer zeile gehe, geht das bild immer eine zeile tiefer im hover. Schaut es euch doch an. http://diamondkey.de/shooter-game-key/ wie mach ich das weg?

Mein HTML code

<link rel="stylesheet" type="text/css" href="/games/liste-style.css" />

<a href="http://diamondkey.de/call-of-duty-ghosts-key-kaufen/"><img class="transparenz" src="/games/shooter/call-of-duty-ghosts/cover_call-of-duty-ghosts.jpg" alt="Bild" width="190" height="250" border="5px"></a> <a href="http://diamondkey.de/dayz-standelone/"><img class="transparenz" src="/games/shooter/dayz-standelone/cover_dayz-standelone.jpg" alt="Bild" width="190" height="250" border="5px"></a> <a href="http://diamondkey.de/tomb-raider-key-kaufen/"><img class="transparenz" src="/games/action/tomb-raider/cover_tomb-raider.jpg" alt="Bild" width="190" height="250" border="5px"></a> <a href="http://diamondkey.de/payday-2-key-kaufen/"><img class="transparenz" src="/games/action/payday-2/cover_payday-2.png" alt="Bild" width="190" height="250" border="5px"></a> <a href="http://diamondkey.de/outlast-key-kaufen/"><img class="transparenz" src="/games/action/outlast/cover_outlast.jpg" alt="Bild" width="190" height="250" border="5px"></a> <a href="http://diamondkey.de/mount-blade-key-kaufen/"><img class="transparenz" src="/games/action/mount-blade/cover_mount-blade.jpg" alt="Bild" width="190" height="250" border="5px"></a> <a href="http://diamondkey.de/max-payne-3-key-kaufen/"><img class="transparenz" src="/games/action/max-payne-3/cover_max-payne-3.jpg" alt="Bild" width="190" height="250" border="5px"></a> <a href="http://diamondkey.de/counter-strike-global-offensive-key-kaufen"><img class="transparenz" src="/games/action/counter-strike-global-offensive/cover_counter-strike-global-offensive.jpg" alt="Bild" width="190" height="250" border="5px"></a>

mein CSS code

/* --- Aussehen der verkleinerten Bilder --- */
.transparenz {
  float: left;
  width: 150px;
  padding: 10px;
  margin-right: 20px;
  margin-bottom: 20px;
  background-color: #FFFFFF; }

/* --- Hover Effekt --- */
.transparenz:hover {
  width: 150px;
  padding: 8px;
  margin-right: 21px;
  margin-bottom: 21px;
}

 

[bdt600]

Ähm, ich würde dieses Geflimmere komplett rausnehmen, das stört mehr, als es optisch was bringt. Und wenn man die Seite mal mit Firebug untersucht, muss man feststellen, dass der Quellcode eher eine div-Suppe als lesbarer Code ist.

 

[bdt600]

Weiterhin soltest du die Bilder verkleinert auf dem Server ablegen und nicht per HTML skalieren. Und hier hast du mal etwas, was deutlich besser für deine Zwecke ist und nicht soviel Geflackere verursacht: http://www.ohne-css.gehts-gar.net/0023.php

 

[Nerdy]

Ahh, cool besten dank. :)