Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Jak zrobić takie menu w ul li, żeby border był na cala dlugosc li
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
Agape
24.09.2009, 15:57:20
Chcę zrobić takie menu jak na tej stronie: http://www.astoralarm.pl/start
dokładnie to pierwsze, "menu zabezpieczenia".
Chodzi mi o to, że jak robię tak jak jest w źródle:

[PHP] pobierz, plaintext 
  1. <h3>Menu Zabezpieczenia</h3>
  2.  
  3. <ul class="menu">
  4.     <li class="item36"><a href="http://www.astoralarm.pl/"><span>Start</span></a></li>
  5.     <li class="item32"><a href="/index.php?Itemid=32&amp;option=com_virtuemart"><span>Nasza Oferta</span></a></li>
  6.     <li class="item76"><a href="/nowosci/"><span>Nowości</span></a></li>
  7.     <li class="parent item92"><a href="/artykuly-techniczne/"><span>Artykuły techniczne</span></a></li>
  8.     <ul>
  9.         <li class="item95"><a href="/systemy-sygnalizacji-pozaru-sap-dso/"><span>Systemy pożarowe</span></a></li>
  10.         <li class="item96"><a href="/telewizja-dozorowa-cctv/"><span>Telewjzja dozorowa</span></a></li>
  11.         <li class="item97"><a href="/systemy-sygnalizacji-wlamania-i-napadu-sswin/"><span>Systemy SSWiN</span></a></li>
  12.         <li class="item98"><a href="/kontrola-dostepu-acc/"><span>Kontrola Dostępu</span></a></li>
  13.         <li class="item101"><a href="/domofony-i-videodomofony/"><span>Videodomofony</span></a></li>
  14.     </ul>
  15. </ul>
[PHP] pobierz, plaintext


i wezmę border-bottom na li to pokazuje się już przesunięte w prawo a muszę mieć na 100% długości
erix
24.09.2009, 16:38:44
A tak troszkę jaśniej...? Trochę ciężko coś wywnioskować z Twojego opisu...

Cytat
i wezmę border-bottom na li to pokazuje się już przesunięte w prawo a muszę mieć na 100% długości

Który poziom masz na myśli?
Agape
25.09.2009, 16:44:32
Drugi poziom, ja mam też menu takie:
[PHP] pobierz, plaintext 
  1.   	ul{
  2. 		padding-left: 11px; 
  3.   	}
  4.   	li{
  5. 		list-style-type:none;
  6. 		border-bottom: 1px solid black;				
  7.   	}
[PHP] pobierz, plaintext


i border'y sa nie na cala szerokosc strony, szczegolnie to widac przy kolejnych poziomach a moje menu ma 3 poziomy ;/ i nie wiem jak zrobic wlasnie te linie ktore sa na 100% width po każdym li

EDIT:
Ok już mam. Rozebrałem stronę do naga i wyszło coś takiego:

[PHP] pobierz, plaintext 
  1. <head>
  2. <style type="text/css">
  3. .module_menu {
  4.        width:182px;
  5. }
  6. .module_menu ul {
  7.        margin:0 0 0px 0;
  8.        list-style:none;
  9. }
  10.               .module_menu ul li {
  11.                      border-left:1px solid #CCC;
  12.                      border-right:1px solid #CCC;
  13.               }
  14. .module_menu ul li a {
  15.        padding:0 0 0 18px;
  16.        margin:0;
  17.        display:block;
  18.        border-bottom:1px solid red;
  19. }
  20. .module_menu ul ul li a {
  21.        padding:0 0 0 30px;
  22.        margin:0;
  23.        display:block;
  24.        border-bottom:1px solid red;
  25. }
  26. </style>
  27.  
  28. </head>
  29. <body>
  30.  
  31. <div class="module_menu">
  32.  
  33. <ul class="menu">
  34. <li><a href="#">Start</a></li>
  35. <li><a href="#">Nasza Oferta</a></li>
  36. <li><a href="#">Nowości</a></li>
  37. <li><a href="#">Artykuły techniczne</a></li>
  38.   <ul>
  39.   <li><a href="#">Systemy pożarowe</a></li>
  40.   <li><a href="#">Telewjzja dozorowa</a></li>
  41.   <li><a href="#">Systemy SSWiN</a></li>
  42.   <li><a href="#">Kontrola Dostępu</a></li>
  43.   <li><a href="#">Videodomofony</a></li>
  44.   </ul>
  45. </ul>
  46.  
  47. </div>
  48.  
  49. </body>
[PHP] pobierz, plaintext


Chodziło o to, że każdy kolejny poziom ma ustalone (dla taga a) większy left-padding. W praktyce sprawia to ograniczenie, będzie możliwe poprawne wyświetlenie tylko tylu poziomów ile zdefiniuje a menu można zmieniać dowolnie w panelu ... poza tym kod trochę wydaje mi sie nie profesionalny biorąc pod uwagę, że mam 4 poziomy. Może znacie jakiś sposób, żeby to lepiej wyglądało albo jakiś jeden styl dla wszystkich tagów a, żeby każdy miał większe left-padding? W tym momencie mam coś takiego:

[CSS] pobierz, plaintext 
  1.   	#menu ul{
  2. 		padding: 0px;
  3. 		margin: 0px;
  4. 		list-style:none; 
  5.   	}
  6. 						  	.menu ul li{
  7. 								list-style-type:none;
  8. 								border-bottom: 1px solid black;				
  9. 						  	}
  10. 	#menu ul li a{
  11. 		border-bottom: 1px solid black;
  12. 		padding:0 0 0 18px;
  13.        	margin:0;
  14.        	display:block;		
  15. 	}
  16. 	#menu ul ul li a{
  17. 		border-bottom: 1px solid black;
  18. 		padding:0 0 0 30px;
  19.        	margin:0;
  20.        	display:block;
  21. 	}
  22. 	#menu ul ul ul li a{
  23. 		border-bottom: 1px solid black;
  24. 		padding:0 0 0 42px;
  25.        	margin:0;
  26.        	display:block;
  27. 	}
  28. 	#menu ul ul ul li a{
  29. 		border-bottom: 1px solid black;
  30. 		padding:0 0 0 54px;
  31.        	margin:0;
  32.        	display:block;
  33. 	}
  34.  
  35.  
  36.  
  37.  
  38.  
  39.  
  40.  
  41.  
  42.  
  43.  
  44. 	#menu ul ul ul ul li a{
  45. 		border-bottom: 1px solid black;
  46. 		padding:0 0 0 68px;
  47.        	margin:0;
  48.        	display:block;
  49. 	}
  50. 	#menu ul ul ul ul li a{
  51. 		border-bottom: 1px solid black;
  52. 		padding:0 0 0 80px;
  53.        	margin:0;
  54.        	display:block;
  55. 	}
[CSS] pobierz, plaintext

2 ostatnie są "na zapas", jak by ktoś zdefiniował jeszcze 2 poziomy czego nie chcę wykluczać.
erix
25.09.2009, 16:53:19
Cytat
Może znacie jakiś sposób, żeby to lepiej wyglądało albo jakiś jeden styl dla wszystkich tagów a, żeby każdy miał większe left-padding? W tym momencie mam coś takiego:

A nie wystarczy "rekurencyjnie"?

[HTML] pobierz, plaintext 
  1. <ul id="menu">
  2. <li><a href="">asd</a></li>
  3. <li><a href="">asd</a></li>
  4. <li><a href="">asd</a>
  5. <ul><li><a href="">asd</a></li></ul>
  6. </li>
  7. </ul>
[HTML] pobierz, plaintext 


[CSS] pobierz, plaintext 
  1. #menu { ... }
  2. #menu ul
  3. {margin-left: 20px;}
[CSS] pobierz, plaintext


I jeśli niczego nie pomyliłem, każdy poziom menu powinien być odpowiednio wcięty. ;] Możesz mieć kategorii ile chcesz.

Jeśli chcesz jednak, żeby było na całej szerokości klikalne, to się zaczną schody - w czystym CSS chyba tego nie osiągnie; trzeba się skryptami męczyć...
Agape
25.09.2009, 17:01:01
Ok, dzięki za pomoc, zostanę chyba przy kodzie jaki mam chyba;/ bo raczej potrzebuje na całej szerokości.
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.