Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [CSS] Div Który nie przesuwa innych.
Monter08
post
Post #1





Grupa: Zarejestrowani
Postów: 237
Pomógł: 22
Dołączył: 16.09.2010
Skąd: Lubaczów

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


Witam,
Próbuje zrobić menu które tnie sobie obrazek i ustawia element normalny hover, i mam mały problem z ustawieniem pozycji każdego elementu w menu, otóż przycisk hover jest trochę szerszy niż w spoczynku i podczas gry najeżdżam myszką na element przycisk się powiększa i przesuwa inne divy, jest to strasznie uciążliwe i nie mam pomysłu jak sobie z tym poradzić. Czy jest jakiś sposób aby ustawić żeby div nie działał na inne (tzn nie przesuwał ich). Jeszcze jedno pytanie z innej beczki, jaki sposób jest najlepszy to pozycjonowania elementów, position: relative to dobry pomysł?
Go to the top of the page
+Quote Post
 
Start new topic
Odpowiedzi
jg44
post
Post #2





Grupa: Zarejestrowani
Postów: 122
Pomógł: 14
Dołączył: 14.07.2011
Skąd: Gliwice / Wrocław

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


Aa, to trzeba było mówić od razu, że wokół loga (IMG:style_emoticons/default/wink.gif)
W takim układzie zrobiłbym to tak, że każdy element, który ma być linkiem (czyli pozycją menu) wstawiłbym do odpowiedniego pudełka (czyli tyle pudełek, ile linków) i wszystko wypozycjonował wokół loga.
Oczywiście wielkość pudełka musi być odpowiednia, żeby chmurki Ci się mieściły i nie powodowały podskoczeń inncyh warstw. Przykładowy kod dla 6 linków (w tym przypadku zamiast position: relative; lepiej użyć float: left/right;):
  1. #strona
  2. {
  3. width: 600px;
  4. height: 300px;
  5. background: yellow;
  6. margin: 20px auto;
  7. }
  8.  
  9. #logo
  10. {
  11. width: 100px;
  12. height: 50px;
  13. background: green;
  14. float: left;
  15. }
  16.  
  17. #gora
  18. {
  19. width: 100px;
  20. height: auto;
  21. background: #099;
  22. margin-left: 50px;
  23. }
  24.  
  25. #srodek
  26. {
  27. width: 200px;
  28. height: auto;
  29. background: #079;
  30. clear: both;
  31. }
  32.  
  33. #dol
  34. {
  35. width: 100px;
  36. height: auto;
  37. background: #059;
  38. clear: both;
  39. margin-left: 50px;
  40. }
  41.  
  42. #link1
  43. {
  44. width: 50px;
  45. height: 20px;
  46. background: cyan;
  47. float: left;
  48. }
  49.  
  50. #link2
  51. {
  52. width: 50px;
  53. height: 20px;
  54. background: magenta;
  55. float: right;
  56. }
  57.  
  58. #link3
  59. {
  60. width: 50px;
  61. height: 20px;
  62. background: blue;
  63. float: left;
  64. margin-top: 15px;
  65. }
  66.  
  67. #link4
  68. {
  69. width: 50px;
  70. height: 20px;
  71. background: red;
  72. float: right;
  73. margin-top: 15px;
  74. }
  75.  
  76. #link5
  77. {
  78. width: 50px;
  79. height: 20px;
  80. background: grey;
  81. float: left;
  82. }
  83.  
  84. #link6
  85. {
  86. width: 50px;
  87. height: 20px;
  88. background: orange;
  89. float: right;
  90. }


Strona:
  1. <article id="strona">
  2. <section id="gora">
  3. <section id="link1">
  4. Link 1
  5. </section>
  6.  
  7. <section id="link2">
  8. Link 2
  9. </section>
  10. </section>
  11.  
  12. <section id="srodek">
  13. <section id="link3">
  14. Link 3
  15. </section>
  16.  
  17. <section id="logo">
  18. Logo
  19. </section>
  20.  
  21. <section id="link4">
  22. Link 4
  23. </section>
  24. </section>
  25.  
  26. <section id="dol">
  27. <section id="link5">
  28. Link 5
  29. </section>
  30.  
  31. <section id="link6">
  32. Link 6
  33. </section>
  34. </section>
  35. </article>

Chyba że nie o to Ci chodzi, to krzycz (IMG:style_emoticons/default/wink.gif)

Ten post edytował jg44 6.02.2012, 10:15:57
Go to the top of the page
+Quote Post

Posty w temacie


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: 15.10.2025 - 20:00