Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS]Problem z MENU
Forum PHP.pl > Forum > Przedszkole
xSavage
24.07.2010, 12:22:12
Witam, mam problem. Mam menu, ale chciałbym się pozbyć tej ostatniej kreski przy "Kontakt". Teraz moje pytanie, jak to można zrobić?



[HTML] pobierz, plaintext 
  1. <div id="menu">
  2. 		<ul>
  3. 			<li><a href="index.html">News</a></li>
  4. 			<li><a href="#">O Nas</a></li>
  5. 			<li><a href="#">Team</a></li>
  6. 			<li><a href="#">Galeria</a></li>
  7. 			<li class="last"><a href="#">Kontakt</a></li>
  8. 		</ul>
  9.        </div>
[HTML] pobierz, plaintext 


[CSS] pobierz, plaintext 
  1. /* Menu */
  2.  
  3. #menu {
  4. 	float: left;
  5. 	width: 880px;
  6. 	height: 58px;
  7. 	background: url(images/img02.jpg) repeat-x left top;
  8. }
  9.  
  10. #menu ul {
  11. 	margin: 0;
  12. 	padding: 23px 0 0 20px;
  13. 	list-style: none;
  14. 	line-height: normal;
  15. }
  16.  
  17. #menu li {
  18. 	float: left;
  19. 	text-align: center;
  20. }
  21.  
  22. #menu a {
  23. 	display: block;
  24. 	padding: 0 50px;
  25. 	background: url(images/img03.jpg) no-repeat right 50%;
  26. 	text-decoration: none;
  27. 	text-transform: uppercase;
  28. 	font-size: 11px;
  29. 	color: #FFFFFF;
  30. }
  31.  
  32. #menu a:hover {
  33. 	color: #FFFFFF;
  34. }
  35.  
  36. #menu .current_page_item a {
  37. 	color: #FFFFFF;
  38. }
[CSS] pobierz, plaintext
sadistic_son
24.07.2010, 12:26:55
Jak widać Kontakt jest z innej klasy - last. Wrzuć jej kod.
bezimienny997
24.07.2010, 12:29:40
Albo spróbuj tak:

[HTML] pobierz, plaintext 
  1. <li><a href="index.html">News</a></li>
  2. 			<li><a href="#">O Nas</a></li>
  3. 			<li><a href="#">Team</a></li>
  4. 			<li><a href="#">Galeria</a></li>
  5. 			<li><a href="#">Kontakt</a></li>
  6.  
[HTML] pobierz, plaintext


edit:
A jednak nie. tak nie ma prawda działać ;x
xSavage
24.07.2010, 12:43:24
Cytat(sadistic_son @ 24.07.2010, 13:26:55 ) *
Jak widać Kontakt jest z innej klasy - last. Wrzuć jej kod.


CODE
.last{
border-right: 0px none #6b7272 !important;
}


Mam coś takiego, ale nie pomaga!
bastard13
24.07.2010, 12:49:35
Wydaje mi się, żę u ciebie za wyświetlenie tej kreski odpowiada: 
[HTML] pobierz, plaintext 
  1. background: url(images/img03.jpg) no-repeat right 50%;
[HTML] pobierz, plaintext

więc powinieneś w klasie last mieć coś takiego:
[HTML] pobierz, plaintext 
  1. .last {background: none;}
[HTML] pobierz, plaintext
xSavage
24.07.2010, 12:53:43
Cytat(bastard13 @ 24.07.2010, 13:49:35 ) *
Wydaje mi się, żę u ciebie za wyświetlenie tej kreski odpowiada: 
[HTML] pobierz, plaintext 
  1. background: url(images/img03.jpg) no-repeat right 50%;
[HTML] pobierz, plaintext

więc powinieneś w klasie last mieć coś takiego:
[HTML] pobierz, plaintext 
  1. .last {background: none;}
[HTML] pobierz, plaintext



Rozumiem już gdzie błąd popełniłem, teoretycznie to powinno działać. A praktycznie nie działa, może w złe miejsce w kodzie daje tą klasę, ale próbowałem już wszędzie.

[CSS] pobierz, plaintext 
  1. /* Menu */
  2.  
  3. #menu {
  4. 	float: left;
  5. 	width: 880px;
  6. 	height: 58px;
  7. 	background: url(images/img02.jpg) repeat-x left top;
  8. }
  9.  
  10. #menu ul {
  11. 	margin: 0;
  12. 	padding: 23px 0 0 20px;
  13. 	list-style: none;
  14. 	line-height: normal;
  15. }
  16.  
  17. .last {background: none;
  18. }
  19.  
  20. #menu li {
  21. 	float: left;
  22. 	text-align: center;
  23. }
  24.  
  25. #menu a {
  26. 	display: block;
  27. 	padding: 0 50px;
  28. 	background: url(images/img03.jpg) no-repeat right 50%;
  29. 	text-decoration: none;
  30. 	text-transform: uppercase;
  31. 	font-size: 11px;
  32. 	color: #FFFFFF;
  33. }
  34.  
  35. #menu a:hover {
  36. 	color: #FFFFFF;
  37. }
  38.  
  39. #menu .current_page_item a {
  40. 	color: #FFFFFF;
  41. }
[CSS] pobierz, plaintext
bastard13
24.07.2010, 13:04:44
class="last" powinieneś umieścić w znaczniku <a>, a nie <li>, ponieważ to do <a> masz przypisany background.
Ociu
24.07.2010, 13:44:13
@xSavage: Zacznij używać odpowiedniego bbCode.
krzysztof_kf
24.07.2010, 14:47:29
Odpowiedni Typ dokumentu musi być plus to .


[CSS] pobierz, plaintext 
  1. <style type="text/css">
  2.  
  3. /* Menu */
  4.  
  5. #menu {
  6. 	float: left;
  7. 	width: 880px;
  8. 	height: 58px;
  9. 	background: #00ff00 url(images/img02.jpg) repeat-x left top;
  10. }
  11.  
  12. #menu ul {
  13. 	margin: 0;
  14. 	padding: 23px 0 0 20px;
  15. 	list-style: none;
  16. 	line-height: normal;
  17. }
  18.  
  19. #menu li {
  20.         padding-left: 3px;
  21.         background: #ff0000;
  22.         float: left;
  23. 	text-align: center;
  24. }
  25.  
  26. #menu a {
  27. 	display: block;
  28. 	padding: 0 50px;
  29. 	background: #3399ff url(images/img03.jpg) no-repeat right 50%;
  30. 	text-decoration: none;
  31. 	text-transform: uppercase;
  32. 	font-size: 11px;
  33. 	color: #FFFFFF;
  34. }
  35.  
  36. #menu a:hover {
  37. 	color: #FFFFFF;
  38. }
  39.  
  40. #menu .last {
  41. clear: both;
  42. background: none;
  43. }
  44.  
  45. </style>
[CSS] pobierz, plaintext


i html 


[HTML] pobierz, plaintext 
  1.  
  2. <div id="menu">
  3. 		<ul>
  4. 			<li class="last"><a href="index.html">News</a></li>
  5. 			<li><a href="#">O Nas</a></li>
  6. 			<li><a href="#">Team</a></li>
  7. 			<li><a href="#">Galeria</a></li>
  8. 			<li><a href="#">Kontakt</a></li>
  9. 		</ul>
  10.        </div>
[HTML] pobierz, plaintext



pozdrawiam
xSavage
24.07.2010, 21:38:03
krzysztof_kf, niestety twoje rozwiązanie nie działa :/ robię wszystko żeby to usunąć ale nic z tego.
thomson89
24.07.2010, 21:50:17 
[CSS] pobierz, plaintext 
  1. <style type="text/css">
  2. #menu { float: left; width: 880px; height: 58px; background: #00ff00 url(images/img02.jpg) repeat-x left top; }
  3. #menu ul { margin: 0; padding: 23px 0 0 20px; list-style: none; line-height: normal; }
  4. #menu li { padding-left: 3px; background: #ff0000; float: left; text-align: center; }
  5. #menu a { display: block; padding: 0 50px; background: #3399ff url(images/img03.jpg) no-repeat right 50%; text-decoration: none; text-transform: uppercase; font-size: 11px; color: #FFFFFF; }
  6. #menu a:hover { color: #FFFFFF; }
  7. #menu li .last a { background: none; }
  8. </style>
[CSS] pobierz, plaintext 

[HTML] pobierz, plaintext 
  1. <div id="menu">
  2. 		<ul>
  3. 			<li><a href="index.html">News</a></li>
  4. 			<li><a href="#">O Nas</a></li>
  5. 			<li><a href="#">Team</a></li>
  6. 			<li><a href="#">Galeria</a></li>
  7. 			<li class="last"><a href="#">Kontakt</a></li>
  8. 		</ul>
  9. </div>
[HTML] pobierz, plaintext


A spróbuj tak dać. Lub w klasie last, bez tego li.
darophp
24.07.2010, 21:53:50
Ludzie ... na logikę. Nie można przecież ukryć kreski przez css ! To jest obrazek. Gdybyście mieli w li
Kod
border: 1px solid #FFF;
to by ukryło - i wgl. znacie coś takiego - :last-child ?
xSavage
25.07.2010, 10:27:04
Znalazłem takie rozwiązanie i wszystko działa. Dziękuje za pomoc!

[HTML] pobierz, plaintext 
  1.  <div id="menu">
  2. 			<ul>
  3. 			<li><a href="index.html">News</a></li>
  4. 			<li><a href="#">O Nas</a></li>
  5. 			<li><a href="#">Team</a></li>
  6. 			<li><a href="#">Galeria</a></li>
  7. 			<li class="last"><a href="#">Kontakt</a></li>
  8. 		</ul>
  9.     </div>
[HTML] pobierz, plaintext 


[CSS] pobierz, plaintext 
  1. /* Menu */
  2.  
  3. #menu {
  4. 	float: left;
  5. 	width: 880px;
  6. 	height: 58px;
  7. 	background: url(images/img02.jpg) repeat-x left top;
  8. }
  9.  
  10. #menu ul {
  11. 	margin: 0;
  12. 	padding: 23px 0 0 80px;
  13. 	list-style: none;
  14. 	line-height: normal;
  15. }
  16.  
  17. #menu ul li{
  18. 	display:inline;
  19. 	text-align:center;
  20. 	margin:auto;
  21. 	width:auto;
  22. 	border-right: 1px solid #FFFFFF;	
  23. }
  24.  
  25. .last{
  26. 	border-right: 0px none #FFFFFF !important;
  27. }
  28.  
  29. #menu li {
  30. 	float: left;
  31. 	text-align: center;
  32. }
  33.  
  34. #menu a {
  35. 	display: block;
  36. 	padding: 0 50px;
  37. 	text-decoration: none;
  38. 	text-transform: uppercase;
  39. 	font-size: 11px;
  40. 	color: #FFFFFF;
  41. }
  42.  
  43. #menu ul li a:hover {
  44. 	text-decoration:underline;
  45. }
  46.  
  47. #menu .current_page_item a {
  48. 	color: #FFFFFF;
  49. }
[CSS] pobierz, plaintext
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.