Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML] Obniżenie kolejnych elementów
Forum PHP.pl > Forum > Przedszkole
boro11
16.01.2014, 18:02:07
Witam!
Jakiś czas temu zrobiłem sobie menu wszystko było w porządku na każdej przeglądarce do dziś. Podejrzewam, że była jakaś aktualizacja tej przeglądarki i teraz wyświetla się nie poprawnie.

Mój CSS:

[HTML] pobierz, plaintext 
  1. #menu {
  2. 	margin-left: 360px;
  3. }
  4.  
  5. #menu ul {
  6. 	position: absolute;
  7. 	float: left;
  8. 	list-style-type:none;
  9. }
  10.  
  11. #menu li {
  12. 	display: inline;
  13. }
  14.  
  15. #menu a {
  16. 	background: url(../images/button_background.png);
  17. 	width: 128px;
  18. 	height: 85px;
  19. 	display: inline-block;
  20. 	text-align: center;
  21. 	float: left;
  22. 	color: #fff;
  23. 	font: 16px "Noto Sans";
  24. 	text-decoration: none;
  25. 	padding-top: 48px;
  26. 	margin-right: -20px;
  27. }
  28.  
  29.  
  30. #menu li:nth-child(1) a {
  31. 	background: url(../images/home_icon.png) 51px 22px no-repeat, url(../images/button_background.png) right bottom no-repeat;
  32. 	padding-right: 10px;
  33. }
  34.  
  35. #menu li:nth-child(1) a:hover {
  36. 	background: url(../images/home_icon.png) 51px 22px no-repeat, url(../images/button_background_hover.png) no-repeat;
  37. }
  38.  
  39. #menu li:nth-child(2) a {
  40. 	background: url(../images/sites_icon.png) 51px 22px no-repeat, url(../images/button_background.png)no-repeat;
  41. 	padding-right: 10px;
  42. }
  43.  
  44. #menu li:nth-child(2) a:hover {
  45. 	background: url(../images/sites_icon.png) 51px 22px no-repeat, url(../images/button_background_hover.png)no-repeat;
  46. }
  47.  
  48. #menu li:nth-child(3) a {
  49. 	background: url(../images/register_icon.png) 56px 22px no-repeat, url(../images/button_background.png)no-repeat;
  50. 	padding-right: 10px;
  51. }
  52.  
  53. #menu li:nth-child(3) a:hover {
  54. 	background: url(../images/register_icon.png) 56px 22px no-repeat, url(../images/button_background_hover.png)no-repeat;
  55. }
  56.  
  57. #menu li:nth-child(4) a {
  58. 	background: url(../images/login_icon.png) 55px 22px no-repeat, url(../images/button_background.png)no-repeat;
  59. 	padding-right: 10px;
  60. }
  61.  
  62. #menu li:nth-child(4) a:hover {
  63. 	background: url(../images/login_icon.png) 55px 22px no-repeat, url(../images/button_background_hover.png)no-repeat;
  64. }
  65.  
  66. #menu li:nth-child(5) a {
  67. 	background: url(../images/helpdesk_icon.png) 55px 22px no-repeat, url(../images/button_background.png)no-repeat;
  68. 	padding-right: 10px;
  69. }
  70.  
  71. #menu li:nth-child(5) a:hover {
  72. 	background: url(../images/helpdesk_icon.png) 55px 22px no-repeat, url(../images/button_background_hover.png)no-repeat;
  73. }
  74.  
  75. #menu li:nth-child(6) a {
  76. 	background: url(../images/forum_icon.png) 51px 22px no-repeat, url(../images/button_background.png)no-repeat;
  77. 	padding-right: 10px;
  78. }
  79.  
  80. #menu li:nth-child(6) a:hover {
  81. 	background: url(../images/forum_icon.png) 51px 22px no-repeat, url(../images/button_background_hover.png)no-repeat;
  82. }
[HTML] pobierz, plaintext


HTML:

[HTML] pobierz, plaintext 
  1. <div id="account_menu">
  2.  
  3. 		<ul>
  4. 			<li>
  5. 				<a href="#"><i></i>General</a>
  6. 				<ul class="closed">
  7. 					<li><a href="<?=$url?>account/" title='Account'>Account</a></li>
  8. 					<li><a href="<?=$url?>banner/" title='Banners'>Referrals Tools</a></li>
  9. 					<li><a href="<?=$url?>request/" title='Cashout'>Cashout</a></li>
  10. 					<li><a href="<?=$url?>upload/" title='Upload'>Upload Proof</a></li>
  11. 				</ul>
  12. 			</li>
  13.  
  14. 			<li>
  15. 				<a href="#"><i></i>Message</a>
  16. 				<ul class="closed">
  17. 					<li><a href="<?=$url?>pmw/" title='New Message'>New Message</a></li>
  18. 					<li><a href="<?=$url?>pm/" title='Inbox'>Inbox (<?=$rows['ile']?>) new</a></li>
  19. 					<li><a href="<?=$url?>pmo/" title='Outbox'>Outbox</a></li>
  20. 				</ul>
  21. 			</li>
  22.  
  23. 			<li>
  24. 				<a href="#"><i></i>Other</a>
  25. 				<ul class="closed">
  26. 					<li><a href="<?=$url?>upgrade/" title='Upgrade Packs'>Upgrade!</a></li>
  27. 					<li><a href="<?=$url?>checker/" title='Sites Checker'>Sites Checker</a></li>		
  28. 				</ul>
  29. 			</li>
  30.  
  31. 			<li>
  32. 				<a href="#"><i></i>Referrals</a>
  33. 				<ul class="closed">
  34. 					<li><a href="<?=$url?>referrals/" title='Direct'>Direct</a></li>
  35. 				</ul>
  36. 			</li>
  37.  
  38. 			<li>
  39. 				<a href="#"><i></i>Settings</a> 
  40. 				<ul class="closed">
  41. 					<li><a href="<?=$url?>personal/" title='Personal'>Personal Settings</a></li>
  42. 				</ul>
  43. 			</li>
  44.  
  45. 			<li>
  46. 				<a href="#"><i></i>History</a> 
  47. 				<ul class="closed">
  48. 					<li><a href="<?=$url?>history/" title='Payment'>Payment</li>
  49. 					<li><a href="<?=$url?>earnings/" title='Earnings'>Earnings</a></li>	
  50. 				</ul>
  51. 			</li>
  52. 		</ul>
  53.  
  54.     </div>
[HTML] pobierz, plaintext


Problemem jest to, że od drugiego elemntu cała reszta jest lekko w dół:



Powinno być tak:



Kombinowałem trochę w CSS, ale nie mam pojęcia co mogło to spowodować.
modern-web
16.01.2014, 18:18:13
Wygląda na to, że specyfikacja "background" się zmieniła, masz tam za dużo parametrów.

Pokażę Ci poprawiony skrawek, a Ty sobie przerób resztę.

[HTML] pobierz, plaintext 
  1. #menu li:nth-child(1) a {
  2. 	background: url(../images/home_icon.png) no-repeat, url(../images/button_background.png) right bottom no-repeat;
  3. 	padding-right: 10px;
  4. }
  5.  
  6. #menu li:nth-child(1) a:hover {
  7. 	background: url(../images/home_icon.png) no-repeat, url(../images/button_background_hover.png) no-repeat;
  8. }
  9.  
  10. #menu li:nth-child(2) a {
  11. 	background: url(../images/sites_icon.png) no-repeat, url(../images/button_background.png)no-repeat;
  12. 	padding-right: 10px;
  13. }
  14.  
  15. #menu li:nth-child(2) a:hover {
  16. 	background: url(../images/sites_icon.png) no-repeat, url(../images/button_background_hover.png)no-repeat;
  17. }
  18.  
  19. ...
[HTML] pobierz, plaintext


p.s. obstawiam, że sypną Ci się ikonki, które masz w tym menu, ale możesz je tam umieścić w znacznie lepszy sposób niż ten przedstawiony wyżej. rozbij je na warstwy najlepiej i odpowiednio ustaw pozycję.
com
16.01.2014, 18:26:20
Cytat
Wygląda na to, że specyfikacja "background" się zmieniła, masz tam za dużo parametrów.


hmm?

może tak mieć, ale to faktycznie tam chyba jest nie potrzebne wink.gif
modern-web
16.01.2014, 18:31:00
Włącz Chrome-a, wejdź na jego stronę (RefBackBank), włącz narzędzia developerskie, usuń te 2 wartości i zobaczysz jak tło trafia w swoje miejsce smile.gif
Skoro działało wcześniej, a nie działa po aktualizacji, znaczy że coś się zmieniło, w ilości parametrów może, nie wiem biggrin.gif
Ale jego zapis jest nieco specyficzny, rzadko widuje się taki kod wink.gif

btw. com, mogę Cię prosić o rzucenie okiem na mój problem (wątek z pozycjonowaniem div smile.gif)?
boro11
16.01.2014, 18:51:43
Witam,
Dziękuję za odpowiedzi, ale podane rozwiązanie niestety nie rozwiązało mojego problemu.
Ikony są oddzielnie od tła (są rozbite na warstwy jak to ująłeś) i pozycjonowane własnie tam w background. Skorzystałem z nowej opcji w CSS3 która umożliwia podanie dwóch linków tła i działało całkiem w porządk, do dziś. Jakieś inne pomysły? smile.gif
com
16.01.2014, 19:16:04
a reset masz dodany? może wartości domyślne bloków?

modern-web tutaj masz dokumentacje do tego rozwiązania http://www.css3.info/preview/multiple-backgrounds/ zapis coraz częściej spotykany, pozwala np 1 blokiem, oblecieć cale tło a kiedyś trzeba było je składać z kilu bardzo przydatne jak się wie jak użyć wink.gif
boro11
16.01.2014, 19:17:25
Witam,
mam reset:

[PHP] pobierz, plaintext 
  1. a, abbr, address, article, aside, audio, b, blockquote, body, canvas, 
  2. caption, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset,
  3. figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup,
  4. html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, 
  5. object, ol, p, pre, q, samp, section, small, span, strong, sub, summary, 
  6. sup, table, tbody, td, tfoot, th, thead, time, tr, ul, var, video {
  7.   margin: 0;
  8.   padding: 0;
  9.   border: 0;
  10.   font-size: 100%;
  11.   font-weight: inherit;
  12.   font-style: inherit;
  13.   vertical-align: baseline;
  14. }
  15.  
  16. article, aside, canvas, details, figcaption, figure, footer, header, 
  17. hgroup, menu, nav, section, summary {
  18.   display: block;
  19. }
  20.  
  21. mark {
  22.   background-color: transparent;
  23. }
  24.  
  25. a, ins, del {
  26.   text-decoration: none;
  27. }
  28.  
  29. ul, ol {
  30.   list-style: none;
  31. }
  32.  
  33. table {
  34.   border-spacing: 0;
  35.   border-collapse: collapse;
  36. }
  37.  
  38. caption, th {
  39.   text-align: left;
  40. }
  41.  
  42. q:after, q:before {
  43.   content: "";
  44. }
[PHP] pobierz, plaintext
com
16.01.2014, 19:25:44 
[CSS] pobierz, plaintext 
  1. #menu li:nth-child(2) a:{
  2. 	background: url(../images/home_icon.png) 51px 22px no-repeat, url(../images/button_background_hover.png) 0px 0px no-repeat;
  3. }
[CSS] pobierz, plaintext


itd wink.gif

a url wrzucaj raczej w ' ' wink.gif
boro11
16.01.2014, 19:43:33
Dziękuję serdecznie działa smile.gif
Wyszło moje niechlujstwo, wcześniej chrome to "łykało" ale widać poprawili i już nie chciało, a ciapki pododawałem smile.gif
com
16.01.2014, 19:47:52
widocznie to jego błąd... bo generalnie chodzi o to że musisz ustalić od jakiej pozycji ma to rysować a jak mu nie podałeś to brał względem pierwszego wink.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.