Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [HTML][CSS]Hover w menu z li, Nie chce zamieniać
RifleMan
post
Post #1





Grupa: Zarejestrowani
Postów: 31
Pomógł: 0
Dołączył: 14.02.2008

Ostrzeżenie: (0%)
-----


Witam

Otóż mam taki kod:
  1. <ul id="nav">
  2. <li id="menu1"><a href="#"><img src="images/menu_01.png"></img></a></li>
  3. <li id="menu2"><a href="#"><img src="images/menu_02.png"></img></a></li>
  4. <li id="menu3"><a href="#"><img src="images/menu_03.png"></img></a></li>
  5. <li id="menu4"><a href="#"><img src="images/menu_04.png"></img></a></li>
  6. <li id="menu5"><a href="#"><img src="images/menu_05.png"></img></a></li>
  7. </ul>


i CSS

  1. li#menu1:hover {
  2. background: url(images/hover_03.png) no-repeat;
  3. }


Jak najerzdzam na ten przycisk to mi się nie zmienia obrazek. Proszę o pomoc.
Go to the top of the page
+Quote Post
JoShiMa
post
Post #2





Grupa: Zarejestrowani
Postów: 1 374
Pomógł: 149
Dołączył: 1.03.2006

Ostrzeżenie: (0%)
-----


A to pewnie zależy w jakiej przeglądarce (IMG:style_emoticons/default/winksmiley.jpg)

hover stosuj do <a/> a nie do <li/>
Go to the top of the page
+Quote Post
RifleMan
post
Post #3





Grupa: Zarejestrowani
Postów: 31
Pomógł: 0
Dołączył: 14.02.2008

Ostrzeżenie: (0%)
-----


To jak to by przerobić. Fakt że umieszczenie obrazka bezpośrednio w dokumencie html to pomyłka i chyba musęe to zmienić ale jak?
Go to the top of the page
+Quote Post
t4keda
post
Post #4





Grupa: Zarejestrowani
Postów: 57
Pomógł: 10
Dołączył: 14.10.2009

Ostrzeżenie: (0%)
-----


  1. #nav li a{
  2. display: block;
  3. width: ...; /*szerokość obrazka*/
  4. height: ...;/*wysokość obrazka*/
  5. backgorund: ...;
  6. }
  7. #nav li a:hover{
  8. background: ...;
  9. }


Usuń te id z li, raczej są zbędne. I usuń obraz z wnętrza odnośnika (bo on ci przykrywa tło).

Ten post edytował t4keda 24.10.2009, 07:50:04
Go to the top of the page
+Quote Post
RifleMan
post
Post #5





Grupa: Zarejestrowani
Postów: 31
Pomógł: 0
Dołączył: 14.02.2008

Ostrzeżenie: (0%)
-----


Musi być id ponieważ obrazek ma w sobie treść np. Kontakt itd. I dlatego musze jakoś przez id dojść do tego. Obrazek ma być linkiem.
Go to the top of the page
+Quote Post
JoShiMa
post
Post #6





Grupa: Zarejestrowani
Postów: 1 374
Pomógł: 149
Dołączył: 1.03.2006

Ostrzeżenie: (0%)
-----


Nie wiem jak się ta metoda nazywa, ale wstawia się img podwójny i nadaje mu się połowę wysokości. Dla hover poprzez nadanie odpowiedniej wartości marginesu (ujemnej) przesuwa się obrazek, tak, żeby było widać druga polówkę. Może ktoś podpowie jak się ta metoda nazywa.
Go to the top of the page
+Quote Post
t4keda
post
Post #7





Grupa: Zarejestrowani
Postów: 57
Pomógł: 10
Dołączył: 14.10.2009

Ostrzeżenie: (0%)
-----


Jeśli ich potrzebujesz to nie usuwaj. OK, obrazek ma być linkiem, ale jeśli nie dasz go jako tło to będzie ci przykrywał tło, które ustawiasz w CSS.
Możesz przecież zrobić tak, że dla każdego linku masz inne tło:
  1. #menu1 a{
  2. display: block;
  3. width: ...; /*szerokość obrazka*/
  4. height: ...;/*wysokość obrazka*/
  5. backgorund: ...;
  6. }
  7. #menu1 a:hover{
  8. background: ...;
  9. }

Dla każdego linku możesz coś takiego zrobić.
Wtedy będziesz miał pole nad przyciskiem (co będzie wyglądało jakby grafika była przyciskiem) i będzie działało.
Go to the top of the page
+Quote Post
RifleMan
post
Post #8





Grupa: Zarejestrowani
Postów: 31
Pomógł: 0
Dołączył: 14.02.2008

Ostrzeżenie: (0%)
-----


Mam teraz tak:

  1. #nav li {
  2. display: inline;
  3. }
  4.  
  5. #menu1 a{
  6. display: inline;
  7. width: 59px; /*szerokość obrazka*/
  8. height: 32px;/*wysokość obrazka*/
  9. background: url(images/menu_01.png) no-repeat;
  10. }
  11.  
  12.  
  13. #menu1 a:hover{
  14. background: url(images/hover_03.png) no-repeat;
  15. }
  16.  
  17. #menu2 a{
  18. display: inline;
  19. width: 89px; /*szerokość obrazka*/
  20. height: 32px;/*wysokość obrazka*/
  21. background: url(images/menu_02.png) no-repeat;
  22. }
  23.  
  24. #menu1 a:hover{
  25. background: url(images/hover_04.png) no-repeat;
  26. }
  27.  
  28. #menu3 a{
  29. display: inline;
  30. width: 90px; /*szerokość obrazka*/
  31. height: 32px;/*wysokość obrazka*/
  32. background: url(images/menu_03.png) no-repeat;
  33. }
  34.  
  35. #menu1 a:hover{
  36. background: url(images/hover_05.png) no-repeat;
  37. }
  38.  
  39.  
  40. #menu4 a{
  41. display: inline;
  42. width: 89px; /*szerokość obrazka*/
  43. height: 32px;/*wysokość obrazka*/
  44. background: url(images/menu_04.png) no-repeat;
  45. }
  46.  
  47. #menu1 a:hover{
  48. background: url(images/hover_06.png) no-repeat;
  49. }
  50.  
  51. #menu5 a{
  52. display: inline;
  53. width: 89px; /*szerokość obrazka*/
  54. height: 32px;/*wysokość obrazka*/
  55. background: url(images/menu_05.png) no-repeat;
  56. }
  57.  
  58. #menu1 a:hover{
  59. background: url(images/hover_07.png) no-repeat;
  60. }
  61.  
  62. #nav img {
  63. border: 0px;
  64. }


  1. <ul id="nav">
  2. <li id="menu1"><a href="#"></a></li>
  3. <li id="menu2"><a href="#"></a></li>
  4. <li id="menu3"><a href="#"></a></li>
  5. <li id="menu4"><a href="#"></a></li>
  6. <li id="menu5"><a href="#"></a></li>
  7. </ul>


No ale nic nie widać. Menu ma iść poziomo wieć inline.

Ten post edytował RifleMan 24.10.2009, 08:23:00
Go to the top of the page
+Quote Post
t4keda
post
Post #9





Grupa: Zarejestrowani
Postów: 57
Pomógł: 10
Dołączył: 14.10.2009

Ostrzeżenie: (0%)
-----


Może być potrzebne jeszcze coś takiego:

  1. ul#nav {
  2. list-style: none
  3. }
  4.  
  5. #nav li{ /*lub dla a-> #nav li a*/
  6. float: left;
  7. }
  8.  
  9. menu1 a{
  10. display: block; /*a musi być wyświetlane blokowo, żeby objął wymiarami obrazek*/
  11. width: 59px; /*szerokość obrazka*/
  12. height: 32px;/*wysokość obrazka*/
  13. background: url(images/menu_01.png) no-repeat;
  14. }
  15.  
  16.  


Ten post edytował t4keda 24.10.2009, 09:00:49
Go to the top of the page
+Quote Post
RifleMan
post
Post #10





Grupa: Zarejestrowani
Postów: 31
Pomógł: 0
Dołączył: 14.02.2008

Ostrzeżenie: (0%)
-----


Coś nie za bardzo mi to działa strona z menu . Nie wiem czym to jest związane. Proszę o dalszą pomoc ale i tak daję pomógł bo się wiele nauczyłem. Oczekuję odpowiedzi.
Go to the top of the page
+Quote Post
piotrooo89
post
Post #11


Newsman


Grupa: Moderatorzy
Postów: 4 005
Pomógł: 548
Dołączył: 7.04.2008
Skąd: Trzebinia/Kraków




  1. ul, li
  2. {
  3. display: block;
  4. list-style: none;
  5. margin: 0;
  6. padding: 0;
  7. float: right;
  8. }
  9. li
  10. {
  11. float: left;
  12. }
  13. #menu1 a
  14. {
  15. display: block;
  16. width: 59px;
  17. height: 32px;
  18. background: url('images/menu_01.png') no-repeat;
  19. }
  20. #menu1 a:hover
  21. {
  22. width: 59px;
  23. height: 32px;
  24. background: url("images/hover_03.png") no-repeat;
  25. }
  26. #menu2 a
  27. {
  28. display: block;
  29. width: 89px;
  30. height: 32px;
  31. background: url('images/menu_02.png');
  32. background-repeat: no-repeat;
  33. }
  34. #menu2 a:hover
  35. {
  36. width: 89px;
  37. height: 32px;
  38. background: url('images/hover_04.png') no-repeat;
  39. }
  40. #menu3 a
  41. {
  42. display: block;
  43. width: 90px;
  44. height: 32px;
  45. background: url('images/menu_03.png') no-repeat;
  46. }
  47. #menu3 a:hover
  48. {
  49. width: 90px;
  50. height: 32px;
  51. background: url('images/hover_05.png') no-repeat;
  52. }
  53. #menu4 a
  54. {
  55. display: block;
  56. width: 89px;
  57. height: 32px;
  58. background: url('images/menu_04.png') no-repeat;
  59. }
  60. #menu4 a:hover
  61. {
  62. width: 89px;
  63. height: 32px;
  64. background: url('images/hover_06.png') no-repeat;
  65. }
  66. #menu5 a
  67. {
  68. display: block;
  69. width: 89px;
  70. height: 32px;
  71. background: url('images/menu_05.png') no-repeat;
  72. }
  73. #menu5 a:hover
  74. {
  75. width: 89px;
  76. height: 32px;
  77. background: url('images/hover_07.png') no-repeat;
  78. }
  79. #nav img
  80. {
  81. border: 0px;
  82. }


proszę. aha robienie od razu napisów na obrazkach nie jest zbyt dobrym pomysłem, będziesz chciał zmienić jakiś dział, lub dodać nowy to będzie problem... mało przenośne to jest.
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 13.10.2025 - 22:52