ForumCała strona

Nawigacja

Aktualnie online

Gości online: 39

Użytkowników online: 0

Łącznie użytkowników: 25,400
Najnowszy użytkownik: AlojzyBartek

Logowanie

Nazwa użytkownika

Hasło



Zarejestruj się

Odzyskaj hasło

Shoutbox

Musisz zalogować się, aby móc dodać wiadomość.

Zbigniew@
17.11.2024 11:33:24
Nie ten grzeszy kto pije, ale ten, kto się nie upije.

JazOOn
16.11.2024 20:46:18
tja

Zbigniew@
15.11.2024 18:58:17
Kto pije, ten nie bije.

JazOOn
31.10.2024 20:49:47
Kto pije?

piterus
30.10.2024 19:45:48
I będziemy śpiewać: "Kiedy 20 blisko, przebadaj wszystko, przebadaj wszystko..." Pfft

Pobierz nową wersję
Pobierz podręcznik
Zobacz inne oficjalne Supporty
Statystyki supportu
PHP-Fuson PL na Facebooku

RSS

Polecamy hosting SferaHost.pl

Zobacz temat

Polski Oficjalny Support PHP-Fusion » PHP-Fusion v7 Support » Tematy graficzne (skórki)
 Drukuj temat
Nakładający sie na siebie pasek (position: fixed) z przyciskami (Hover).
Padle
Wyżej  #1 Drukuj posta
Dodany dnia 02.04.2014 13:38:49
Witam mam problem z moim paskiem który zrobiłem w div position: fixed (jest on na same górze strony) i przyciskami stworzonymi w hover (umiejscowione obok Loga z prawej strony) otóż oba elementy nakładają się podczas przesuwania się strony można to zauważyć ww.beyze.pl .

Kod paska górnego css:

Pobierz kod źródłowy  GeSHi: CSS
  1. #pasek {
  2.     position: fixed;
  3.     top: 0;
  4.     left: 0;
  5.     right: 0;
  6.     height: 40px; /* opcjonalnie jaka? wysoko?ć */
  7.     font-weight: bold;
  8.     font-size: 20px;
  9.     text-align: right;
  10.     color: #fff;
  11.     height: 40px;
  12.     background-color: #d10902;
  13. }
  14.  
  15. #pasek ul{
  16.         margin: 0;
  17. 	padding: 0;
  18. }
  19.  
  20. #pasek ul li{
  21.         display: inline;
  22. }
Zinterpretowano w sekund: 0.005, wykorzystano GeSHi 1.0.8.10


Kod z przycisków koło loga css:

Pobierz kod źródłowy  GeSHi: CSS
  1. .news {
  2. 	float: right;
  3. 	position: relative;
  4. 	text-align: center;
  5. }
  6.  
  7. a.news-bg {
  8. 	background: #d10902 url(images/tab-icon-news.png);
  9. 	display: block;
  10. 	font-size: 12px;
  11. 	color: #fff;
  12. 	width: 120px;
  13. 	height: 120px;
  14. 	margin: 10px 0 10px 10px;
  15. }
  16.  
  17. a.news-bg:hover {
  18. 	background: #2e3539 url(images/tab-icon-news.png);
  19. 	text-decoration: none;
  20. }
  21.  
  22. .news span {
  23. 	display: block;
  24. 	padding-top: 80px;
  25. }
  26.  
  27. .download {
  28. 	float: right;
  29. 	position: relative;
  30. 	text-align: center;
  31. }
  32.  
  33. a.download-bg {
  34. 	background: #d10902 url(images/tab-icon-download.png);
  35. 	display: block;
  36. 	font-size: 12px;
  37. 	color: #fff;
  38. 	width: 120px;
  39. 	height: 120px;
  40. 	margin: 10px 0 10px 10px;
  41. }
  42.  
  43. a.download-bg:hover {
  44. 	background: #2e3539 url(images/tab-icon-download.png);
  45. 	text-decoration: none;
  46. }
  47.  
  48. .download span {
  49. 	display: block;
  50. 	padding-top: 80px;
  51. }
  52.  
  53. .faq {
  54. 	float: right;
  55. 	position: relative;
  56. 	text-align: center;
  57. }
  58.  
  59. a.faq-bg {
  60. 	background: #d10902 url(images/tab-icon-faq.png);
  61. 	display: block;
  62. 	font-size: 12px;
  63. 	color: #fff;
  64. 	width: 120px;
  65. 	height: 120px;
  66. 	margin: 10px 0 10px 10px;
  67. }
  68.  
  69. a.faq-bg:hover {
  70. 	background: #2e3539 url(images/tab-icon-faq.png);
  71. 	text-decoration: none;
  72. }
  73. .faq span {
  74. 	display: block;
  75. 	padding-top: 80px;
  76. }
  77.  
  78. .contact {
  79. 	float: right;
  80. 	position: relative;
  81. 	text-align: center;
  82. }
  83.  
  84. a.contact-bg {
  85. 	background: #d10902 url(images/tab-icon-contact.png);
  86. 	display: block;
  87. 	font-size: 12px;
  88. 	color: #fff;
  89. 	width: 120px;
  90. 	height: 120px;
  91. 	margin: 10px 0 10px 10px;
  92. }
  93.  
  94. a.contact-bg:hover {
  95. 	background: #2e3539 url(images/tab-icon-contact.png);
  96. 	text-decoration: none;
  97. }
  98. .contact span {
  99. 	display: block;
  100. 	padding-top: 80px;
  101. }
Zinterpretowano w sekund: 0.006, wykorzystano GeSHi 1.0.8.10


Styl obrazków zapożyczony ze skórki Metro

Jeżeli mam coś jeszcze wstawić proszę pisać :)
 
www.beyze.pl
Wścibski Gość
Dodany dnia 24.11.2024 17:35:05
Pan Kontekstualny

Postów: n^x
Data rejestracji: Zawsze

 Polecamy hosting SferaHost.pl
IP: localhost  
kura100214
Wyżej  #2 Drukuj posta
Dodany dnia 02.04.2014 13:41:20
Spróbuj z tym z-index Smile http://pl.html.ne...sson15.php <-- opisane.
 
Vanko
Wyżej  #3 Drukuj posta
Dodany dnia 02.04.2014 13:48:02
Siema, @kura100214 ma rację. Dodaj do stylu paska linijke:
Pobierz kod źródłowy  Rozwiń Kod źródłowy


a do stylu przycisków:
Pobierz kod źródłowy  Rozwiń Kod źródłowy
 
http://skyde.pl
Padle
Wyżej  #4 Drukuj posta
Dodany dnia 02.04.2014 14:15:59
Dzięki. Grin
Edytowane przez bogdan dnia 02.04.2014 17:07:43
 
www.beyze.pl
Przejdź do forum:
Created by Arox Copyright (C) 2004
Copyright (C) 2004 - 2018 Ekipa PHP-Fusion.pl