Jump to content

Css :hover


ExplodingCreeper
 Share

Recommended Posts

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;

}
Link to comment
Share on other sites

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! Edited by Drago
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...
B