Css :hover

[ExplodingCreeper]

Eine kleine Frage zur Programierung. Wie ihr hier erkennen könnt habe ich eine Seite gemacht mit einigen Tabellen wo wenn man drüber fährt sich die Kästen vergrößern. Ich weiß das es ziemlich minderwertig ist weil ich halt noch nicht so viel kann. Aber ich fände es gut wenn ihr mir weiterhelfen könntet: ich möchte, dass sich die Kästen nicht alle nach unten bewegen wenn man drüberfährt weil das sieht minderwärtig aus. Ich möchte bitte keine Kommentare über den Inhalt lesen sondern wie ihr mir weiterhelfen könnt.

Spenden.php:

<div align="center" id="spendendiv">

  <table border="5">

  <tr><td>

  

  <a href="../Spenden/VIP.php" id="spenden"><table border="5">

  <tr><td><h3 align="center">VIP</h3></td><tr>

  </tr><td>

   Aufpreis: 10€</br>

   Monatlich: 0€</br>

   Prefix: <span style="color:orange">[</span><span style="color:yellow">VIP</span><span style="color:orange">]</span>

  </td><tr>

  </tr><td>

   Gesammtpreis: 10€

  </td></tr>

  </table></a>

  

  </td><td>

  

  <a href="../Spenden/Elite.php" id="spenden"><table border="5">

  <tr><td><h3 align="center">Elite</h3></td><tr>

   </tr><td>Aufpreis: 20€</br>

   Monatlich: 0€</br>

   Prefix: <span style="color:blue">[</span><span style="color:aqua">Elite</span><span style="color:blue">]</span>

  </td><tr>

  </tr><td>

   Gesammtpreis: 20€

  </td></tr>

  </table></a>

  

  </td><td>

  

  <a href="../Spenden/Mega.php" id="spenden"><table border="5">

  <tr><td><h3 align="center">Mega</h3></td><tr>

   </tr><td>Aufpreis: 30€</br>

   Monatlich: 0€</br>

   <span style="color:grey">coming soon</span>

  </td><tr>

  </tr><td>

   Gesammtpreis: 30€

  </td></tr>

  </table></a>

  

  </td><td>

  

  <a href="../Spenden/Supporter.php" id="spenden"><table border="5">

  <tr><td><h3 align="center">Supporter</h3></td><tr>

   </tr><td>Aufpreis: 20€</br>

   Monatlich: 10€</br>

   Prefix: <span style="color:black">[</span><span style="color:gray"><b>S</b>upporter</span><span style="color:black">]</span>

  </td><tr>

  </tr><td>

   kaufpreis: 50€

  </td></tr>

  </table></a>

  

  </td><td>

  

  <a href="../Spenden/Sponsor.php" id="spenden"><table border="5">

  <tr><td><h3 align="center">Sponsor</h3></td><tr>

   </tr><td>Aufpreis: 40€</br>

   Monatlich: 30€</br>

   Prefix: <span style="color:darkgreen">[</span><span style="color:green">Sponsor</span><span style="color:darkgreen">]</span>

  </td><tr>

  </tr><td>

   kaufpreis: 150€

  </td></tr>

  </table></a>

  

  </td><td>

  

  </table>

 </div>

style.css

#content

{

	clear: both;

	padding: 10px;

}


#spenden

{

	color: grey;

	font-size: 12px;

}


#spenden:hover

{

	color:black;

	font-size: 15px;

}


#spendendiv

{

	padding: 30px;

	clear: both;

	height: 150px;

	top: 50%;

	left: 50%;

}


#spenden table

{

	float: left;

	margin: 0 15px 0 0;

}

[Gelöscht_5133]

Also ersteinmal allgemein. Ich würde das ganze nicht mit einer Tabelle machen, sondern mit normalen div's oder halt gleich die link-blöcke (<a>).

Dann musst du einfach die einzelnen Kästchen untereinander nehmen und ihnen die css Eigenschaft geben:

display: inline-block;

Dann kannst du noch die Abstände zwischen den Blöcken, damit es besser aussieht definieren:

margin: 5px; /* Also nur ein Beispiel */

Und dann musst du nurnoch beim hovern dem ganzen folgendes geben:

a:hover {    transform: scale(1.2);/* Und für alternative Browser */    -webkit-transform: scale(1.2);    -moz-transform: scale(1.2);    -o-transform: scale(1.2);}

Das ganze würde auch nur mit dem letzten Teil gehen, aber ich würde von Tabellen abraten! bearbeitet 26. Juni 2014 von Drago

[ExplodingCreeper]

danke aber ich find die Tabellen sehr schön und würde sie sehr gerne behalten. Falls mir niemand anderes eine Lösung sagen kann werde ich wohl dann deins nutzen

vielen dank noch mal für die Mühe

[Gelöscht_5133]

Ok in der Tabelle klappt es doch nicht so wie ich dachte... ich schreib später nocheinmal einen besseren Vorschlag

bearbeitet 26. Juni 2014 von Drago