Witam,
Aktualnie uczę się php i mysql, ale również skrobię sobie coś w html i css. Zrobiłem sobie takie menu, po najechaniu zmienia się wielkość obrazka.


Przesunąłem sobie tekst obrazka za pomocą padding-top: wartość. Problem w tym, że tak jakby opuszcza się to co było wcześniej pod tekstem i wystarczy najechać 45px pod obrazkiem aby się podświetlił.

jak coś to tu jest kod (na testy tylko jedna grafika)

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html>
  3. <head>
  4. <link rel="stylesheet" href="styles.css" type="text/css" />
  5. <meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
  6. <meta />
  7. </head>
  8. <body>
  9.  
  10. <div id="menu-bar">
  11. <a id="szukaj" href="index.html">Szukaj</a>
  12. <a id="szukaj" href="index.html">Szukaj</a>
  13. <a id="szukaj" href="index.html">Szukaj</a>
  14. <a id="szukaj" href="index.html">Szukaj</a>
  15. <a id="szukaj" href="index.html">Szukaj</a>
  16. <a id="szukaj" href="index.html">Szukaj</a>
  17. <a id="szukaj" href="index.html">Szukaj</a>
  18. </div>
  19.  
  20. </body>
  21. </html>
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. html {
  2. background-color: #ffffff;
  3. }
  4.  
  5. body {
  6. height: 500px;
  7. width: 800px;
  8. margin-top: 0;
  9. margin-left: auto;
  10. margin-right: auto;
  11. background-color: #08214b;
  12. }
  13.  
  14. a {
  15. border: 0;
  16. text-decoration: none;
  17. }
  18.  
  19. a#szukaj {
  20. height: 50px;
  21. width: 50px;
  22. float: left;
  23. color: #ffffff;
  24. font-family: Verdana, sans-serif;
  25. font-size: 12px;
  26. padding-top: 45px;
  27. text-align: center;
  28. display: block;
  29. height: 50px;
  30. width: 50px;
  31. background: url('images/szukaj.png');
  32. background-repeat: no-repeat;
  33. }
  34.  
  35. a#szukaj:hover {
  36. height: 50px;
  37. width: 50px;
  38. float: left;
  39. color: #ffffff;
  40. font-family: Verdana, sans-serif;
  41. padding-top: 50px;
  42. text-align: center;
  43. display: block;
  44. background: url('images/szukaj-hover.png');
  45. background-repeat: no-repeat;
  46. }
[HTML] pobierz, plaintext



Chyba doszedłem do tego jak to rozwiązać ale proszę o radę czy to jest najlepszy sposób. Zmienic css dla menu-bar, nadać mu height i overflow: hidden. Czy to dobry sposób?