Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: menu kategorii na liscie ul
Forum PHP.pl > Forum > Po stronie przegl±darki > CSS
john_doe
31.07.2009, 15:00:04
Witam,
css
[HTML] pobierz, plaintext 
  1. #category {
  2. 	width: 136px;
  3. 	float:left;
  4. } 
  5.  
  6. #category ul
  7. {
  8. 	font-family: Arial, Helvetica, sans-serif;
  9. 	list-style-type: none;
  10. 	margin: 0;
  11. 	padding: 0;
  12. } 
  13.  
  14. #category li 
  15. {
  16. 	display: inline;
  17. 	/* dla IE5 and IE6 */
  18. } 
  19.  
  20. #category a
  21. {
  22. 	color: #000000;
  23. 	text-decoration: none;
  24. 	font-size: 12px;
  25. 	display: block;
  26. 	padding: 3px;
  27. 	width: 136px;
  28. 	background-color: #ffffff;
  29. 	border-bottom: 1px solid #eee;
  30. } 
  31.  
  32. #category a:hover
  33. {
  34. 	background-color: #87bf3b;
  35. 	color: #fff;
  36. }
  37.  
  38. #category #current
  39. {
  40. 	border-bottom: 3px solid #ffac4a;
  41. 	/* background: #87bf3b; */
  42. }
[HTML] pobierz, plaintext 


[PHP] pobierz, plaintext 
  1. <?php
  2. $resultCat = connect( $SELECT_CATEGORIES );
  3.                 print '<div id="category">';
  4.                 print '<ul>';
  5.                 print '<li><a href="#"><b>KATEGORIE</b></a></li>';
  6.                 while( $row = mysql_fetch_array( $resultCat ) )
  7.                 {
  8. //<img src="../img/categoryArrow.png" />&nbsp;&nbsp;
  9.                     if( $row[0] == (int)$_GET['id'] )
  10.                     {
  11.                         print '<li>
  12.                     <a href="index.php?id=' . $row[0] . '&page=0" id="current">' . $row[1] . '</a></li>';
  13.                     }else
  14.                     print '<li><a href="index.php?id=' . $row[0] . '&page=0">' . $row[1] . '</a></li>';
  15.                     
  16.                  }                
  17.                 print '</ul>';
  18.                 print '</div>';
  19. ?>
[PHP] pobierz, plaintext


zakomentowałem linijke z obrazem. T± linijkę chce wpakować w petli while zaraz po <li> tak aby moje menu wygladało tak:
> opcja1
> opcja2
> opcja3

a robi to tak
>
opcja1
>
opcja2
>
opcja3

jak to zmienić?
janusz85
3.08.2009, 10:17:54
Może masz za mało miejsca w poziomie, by pozycja listy i obrazek zmie¶ciły się w jednej linii? Popatrz na to "width" div'a "category".
Pawel_W
3.08.2009, 10:53:23
wrzuć to na serwer bo tak to nie mogę powiedzieć co jest Ľle
john_doe
3.08.2009, 21:08:12
nie mam narazie jak niestety wrzucic.
nie chodzi o width, o którym pisał janusz85.
zmieniłem #category ul 

[HTML] pobierz, plaintext 
  1. #category ul
  2. {
  3. 	font-family: Arial, Helvetica, sans-serif;
  4. 	list-style-image: url('../img/categoryArrow.png');
  5. 	margin: 0;
  6. 	padding: 0;
  7. }
[HTML] pobierz, plaintext


i nie działa

gdy zrobie tak o z na boku gdzie¶ 
[HTML] pobierz, plaintext 
  1. <ul style="list-style-image:url(../img/categoryArrow.png)">
  2.  <li>punkt 1
  3.  <li>punkt 2
  4. </ul>
[HTML] pobierz, plaintext

to jest git wrrrrrrrrrrr
Pawel_W
3.08.2009, 21:19:42
no to zobacz odpal u siebie ten kod i nam wklej Ľródło winksmiley.jpg
john_doe
4.08.2009, 23:19:05
mam nadzieje, że o to Ci chodziło Paweł.
kod strony

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4.  
  5. 	<head>
  6.  		<title>Jukon</title>
  7. 		 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  8. 		 <meta http-equiv="Content-Language" content="pl" />
  9. 		 <meta name="description" content="Jukon" />
  10. 		 <meta name="author" content="Krystian Cwiklak" />
  11.  
  12. 		 <meta name="Copyright" content="Copyright (c) 2009 Krystian Cwiklak" />
  13. 		 <meta name="keywords" content="Jukon, artykuły po¶cielowe" />
  14.  
  15. 		 <style type="text/css" media="all">@import "../css/main.css";</style>
  16.  
  17. 		 <script type="text/javascript" src="../js/swfobject.js"></script>
  18. 	</head>
  19.  
  20. <body>
  21.  
  22. <div id="header">
  23.  
  24.  
  25.      <script type="text/javascript">
  26.  
  27.             var so = new SWFObject("../banner.swf", "header", "770", "141", "6", "#DA251C");
  28.  
  29. 			so.addParam("wmode", "opaque");
  30. 			so.addParam("movie", "../banner.swf");
  31. 			so.addParam("quality", "high");
  32. 			so.write("header");
  33.  
  34. 	</script>
  35. </div>
  36.  
  37. <div id="menu">
  38.  
  39.  
  40. 	<ul id="main-menu">
  41.  
  42.  
  43. 		<li>
  44. 			<a href="/Jukon/contact.php" title="Skontaktuj się z firm± Jukon">
  45. 				<img src="/Jukon/img/contact.png" alt="Skontaktuj się z firm± Jukon" border="0"/>
  46. 			</a>
  47.  
  48. 		</li>
  49. 		<li>
  50. 			<a href="/Jukon/offers/index.php?action=view" title="jaki¶ title">
  51. 				<img src="/Jukon/img/offer.png" alt="jaki¶ alt" border="0"/>
  52. 			</a>
  53. 		</li>
  54. 		<li>
  55. 			<a href="#" title="jaki¶ title">
  56. 				<img src="/Jukon/img/about.png" alt="jaki¶ alt" border="0"/>
  57.  
  58. 			</a>
  59. 		</li>		
  60. 		<li>
  61. 			<a href="/Jukon/index.php" title="Strona domowa">
  62. 				<img src="/Jukon/img/home.png" alt="Strona domowa" border="0"/>
  63. 			</a>
  64. 		</li>
  65.  
  66.  
  67. 	</ul> 	
  68.  
  69. </div>
  70.  
  71.  
  72. <br />
  73.  
  74. <div id="wrapper">
  75.  
  76. 	<div id="left">
  77.  
  78. 			<div id="category">
  79. 				<ul>
  80. 					<li><b>KATEGORIE</b></li>
  81. 					<li>
  82. 						<a href="index.php?id=27&page=0">Ręczniki</a>
  83. 					</li>
  84. 					<li>
  85. 						<a href="index.php?id=28&page=0">Ręczniki</a>
  86. 					</li>
  87. 					<li>
  88. 						<a href="index.php?id=29&page=0">Ręczniki</a>
  89. 					</li>
  90. 				</ul>
  91. 			</div>
  92.  
  93. 	</div>
  94.  
  95. 	<div id="content">
  96.  
  97. <br /><br /><br /><br /><img src="../img/chooseCat.png" />	 
  98. 	</div>
  99. 	<div id="pager">
  100.  
  101.  
  102. 	</div>
  103. 	<div id="clearFooter"></div>
  104. </div>
  105. <div id="dfooter">
  106.  
  107.  
  108. 	<div id="copyright">
  109. 		&copy; <b>www.jukon.pl</b>. Wszelkie prawa zastrzeżone.
  110. 	</div>
  111.  
  112. </div>
  113.  
  114. <br />
  115.  
  116. <ul style="list-style-image:url(../img/categoryArrow.png)"> // gdy zrobie tak z buta to lista ma img jednak wyżej na li //z listy lipa
  117.  <li>punkt 1
  118.  <li>punkt 2
  119. </ul>
  120.  
  121. </body>
  122.  
  123. </html>
[HTML] pobierz, plaintext


kod css

[HTML] pobierz, plaintext 
  1. #category {
  2. 	width: 136px;
  3. 	float:left; 
  4. } 
  5.  
  6. #category ul
  7. {
  8. 	font-family: Arial, Helvetica, sans-serif;
  9. 	list-style-image: url('../img/categoryArrow.png');
  10. 	margin: 0;
  11. 	padding: 0;
  12. } 
  13.  
  14. #category li 
  15. {
  16. 	display: inline;
  17. 	/* dla IE5 and IE6 */
  18. } 
  19.  
  20. #category a
  21. {
  22. 	color: #000000;
  23. 	text-decoration: none;
  24. 	font-size: 12px;
  25. 	display: block;
  26. 	padding: 3px;
  27. 	width: 124px;
  28. 	background-color: #ffffff;
  29. 	border-bottom: 1px solid #eee;
  30. } 
  31.  
  32. #category a:hover
  33. {
  34. 	background-color: #87bf3b;
  35. 	color: #fff;
  36. }
  37.  
  38. #category #current
  39. {
  40. 	border-bottom: 3px solid #ffac4a;
  41. 	/* background: #87bf3b; */
  42. }
[HTML] 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.