Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [css]lista podswietlana
Forum PHP.pl > Forum > Przedszkole
gibonik
jeszcze mam problem z wyswietleniem menu:
chciałabym alby elementy listy były wyswietlane w formie menu, po najechaniu podwietla sie pole.

  1.  
  2. <div class="boxzawartosc">
  3.  
  4.  
  5. <br />
  6. <h2 class="lista">
  7. pobranie listy z bazy<br/>
  8. </h2></div>
  9.  
  10. .boxzawartosc {
  11. background:#e4e0c7;
  12. height: auto;
  13. width: auto;
  14. padding-top: 0px;
  15. padding-right: 3px;
  16. padding-bottom: 8px;
  17. padding-left: 3px;
  18. }
  19.  
  20. .lista{
  21. font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
  22. font-size: 12px;
  23. font-weight: normal;
  24. color: #039;
  25. margin-bottom: 0px;
  26. margin-top: 0px;
  27. font-style: normal;
  28. line-height: 18px;
  29. }
  30. .lista li h2 {
  31. font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
  32. font-style:italic;
  33. font-variant:normal;
  34. font-weight:normal;
  35. font-size:11px;
  36. color:#C93;
  37. margin-bottom:1px;
  38. display: block;
  39. line-height:15px;
  40. }
  41. .lista li h2 a{
  42. color:#006;
  43. }
  44. .lista li h2 a:hover{
  45. color:#F60;
  46.  
  47. }
  48. .lista li h2 a:visited{
  49. color::#006;
  50.  
qrzysztof
Chyba bym zaczął od usunięcia klasy "lista" z <h2> i utworzenia listy nieuporządkowanej <ul> lub uporządkowanej <ol>. Wtedy sprawdź dopiero czy podświetlanie działa.

<h2> to nagłówek. Ten, który posiada klasę "lista" jest niepotrzebny (powinien być zastąpiony przez listę <ul> lub <ol>). Co do racji bytu tych, które są potomkami elementu li też mam spore wątpliwości. Samo <li> powinno chyba wystarczyć.

Podaj cały kod, łącznie z zawartością listy. Wtedy będzie łatwiej.
gibonik
zminiłam i poza przesunieciem listy na srodek nic sie nie dzieje
  1.  
  2. .zawartosc #zawartoscMenu{
  3. }
  4.  
  5. #kontenerzawartoscMenu ul.MenuBarVertical
  6. {
  7. margin: 0;
  8. padding: 0;
  9. list-style-type: none;
  10. cursor: default;
  11. font-size:120%;
  12. width:241px;
  13. }
  14.  
  15. #kontenerzawartoscMenu ul.MenuBarActive
  16. {
  17. z-index: 1000;
  18. }
  19.  
  20. #kontenerzawartoscMenu ul.MenuBarVertical li
  21. {
  22. margin: 0;
  23. padding: 0;
  24. list-style-type: none;
  25. position: relative;
  26. cursor: pointer;
  27. width:241px;
  28. font-size:100%;
  29. font-family:Tahoma, Geneva, sans-serif;
  30. font-style:normal;
  31. font-weight:normal;
  32. text-align:left;
  33. border-bottom:1px dotted #cbcebf;
  34. border-top:1px dotted #cbcebf;
  35. background-color:#f4f5de;
  36.  
  37. }
  38.  
  39. #zawartoscMenu ul.MenuBarVertical ul
  40. {
  41. padding: 0;
  42. list-style-type: none;
  43. position: absolute;
  44. z-index: 1020;
  45. cursor: default;
  46. top: 0;
  47. margin:-5% 0 0 95%;
  48. left:-1000em;
  49. font-size:100%;
  50. width:19.2em;
  51. }
  52.  
  53. #zawartoscMenu ul.MenuBarVertical ul.MenuBarSubmenuVisible
  54. {
  55. left:0;
  56. }
  57.  
  58. #zawartoscMenu ul.MenuBarVertical ul li
  59. {
  60. width:19.2em;
  61. }
  62.  
  63.  
  64. #zawartoscMenu ul.MenuBarVertical a
  65. {
  66. display: block;
  67. cursor: pointer;
  68. padding: 0.35em 0.5em;
  69. text-decoration:none;
  70. color:#000000;
  71. border-left:6px solid #aabdc7;
  72. border-right:1px solid #cbcebf;
  73. }
  74.  
  75. #zawartoscMenu ul.zawartoscMenu a:hover, ul.MenuBarVertical a:focus
  76. {
  77. background-color:#1e65d8;
  78. color:#FFF;
  79. }
  80.  
  81. #zawartoscMenu ul.MenuBarVertical a.MenuBarItemHover,#zawartoscMenu ul.MenuBarVertical a.MenuBarItemSubmenuHover,#zawartoscMenu ul.MenuBarVertical a.MenuBarSubmenuVisible
  82. {
  83. background-color:#1e65d8;
  84. color:#FFF;
  85. }
  86.  
  87.  
  88. #zawartoscMenu ul.MenuBarVertical a.MenuBarItemSubmenu
  89. {
  90. background-image:url(SpryMenuBarRight.gif);
  91. background-position:95% 50%;
  92. background-repeat: no-repeat;
  93. }
  94.  
  95.  
  96. #zawartoscMenu ul.MenuBarVertical a.MenuBarItemSubmenuHover
  97. {
  98. background-image:url(SpryMenuBarRightHover.gif);
  99. background-position:95% 50%;
  100. background-repeat: no-repeat;
  101. }
  102.  
  103.  
  104. #zawartoscMenu ul.MenuBarVertical iframe
  105. {
  106. position: absolute;
  107. z-index: 1010;
  108. filter:alpha(opacity:0.1);
  109. }
  110.  
  111.  






wyswietlanie menu
<div class="boxzawartosc">


<br />
<ul id="zawartoscMenu">

<?//baza
?>

<a href="<? //link ?>"><? echo $nazwa;?></a><br/>
<?
}
?>
</ul>

</div>
qrzysztof
CSS podałaś kompletny (choć nieźle tam jest namieszane), ale dlaczego HTML sam szkielet?

Wklej całość, wszystkie te elementy pobierane z bazy, bez php (włącz po prostu stronę w przeglądarce i skopiuj źródło). Bez tego ciężko powiedzieć co i dlaczego się nie podświetla.

Jakby jakiś JavaScript był dołączany zewnętrznie do tego to też wklej.
gibonik
zrodlo strony
<div class="tlo">


<br />
<ul id="zawartoscMenu">


<a href="XXX.htm">Kategoria 1</a><br/>

<a href="XXX2.htm">Kategoria 2</a><br/>
</ul>

</div>


qrzysztof
To co tu ma się podświetlać? Te kategorie? W CSS widzę całą strukturę menu, a tu 2 linki? Musi być tego więcej albo jakiś Javascript jest dołączany, który tworzy coś dynamicznie.
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.