Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] Podświetlane menu
Forum PHP.pl > Forum > Przedszkole
romarta
29.07.2009, 15:04:55
Mam taką stronkę www.amp.sklep.pl/metal/index.html i problem polega na tym że mimo iż w css mam ustwione że po kliknięciu w daną zakładke zmieniła ona tło nie zmienia.

Tak mam to zrobione w CSS
CODE

.mix_08 a:link{
display:block;
background-image:url(images/metal_mix_08.jpg);
height:62px;
width:201px;
}
.mix_08 a:visited{
display:block;
background-image:url(images/metal_mix_08.jpg);
height:62px;
width:201px;
}
.mix_08 a:hover{
display:block;
background-image:url(images/metal_mix_08a.jpg);
height:62px;
width:201px;
}
.mix_08 a:active{
background-image:url(images/metal_mix_08a.jpg);
height:62px;
width:201px;
}


co mam źle?
viking
29.07.2009, 15:32:58
Przecież działa. Jeśli masz na myśli aktywny link w sensie przechodzisz do podstrony, jest zaznaczony jako aktywny to nie tędy droga.
Marcuez
29.07.2009, 15:36:10 
[HTML] pobierz, plaintext 
  1. .mix_08 a:visited{
  2. display:block;
  3. background-image:url(images/metal_mix_08a.jpg);
  4. height:62px;
  5. width:201px;
  6. }
[HTML] pobierz, plaintext
romarta
29.07.2009, 16:05:02
Tak działa, jak najadę myszką to mi zmienia tło, ale chodzi mi o to że jak kliknę i jestem w zakładce np. o firmie to żeby na ten czas co przeglądam daną zakładkę się zmieniło, po klinieciu w inną ta inną się zmienia a tamta wraca to pierwotnej.
Loped
29.07.2009, 17:10:53
To już chyba za pomocą GET musisz zrobić ;p
Fafu
29.07.2009, 17:22:40
Musisz sobie dorobić klasę np. ".current" i dodawać ją do aktywnego linka (w każdej podstronie trzeba to zaznaczyć, ale masz tylko 3 więc nie powinno być problemu)
romarta
31.07.2009, 08:05:29
Fafu możesz napisać coś więcej?
janusz85
31.07.2009, 09:52:19
W CSS masz zdefiniowane:

Kod
.mix_07 a:hover {
background-image:url(images/metal_mix_07a.jpg);
display:block;
height:62px;
width:201px;
}


i teraz wystarczy, że napiszesz:

Kod
a.activeSubPage {
background-image:url(images/metal_mix_07a.jpg);
display:block;
height:62px;
width:201px;
}


lub do pierwszego kodu dopiszesz:

Kod
.mix_07 a:hover, a.activeSubPage {


I przy linku, który ma być aktywny dodasz klasę:
[HTML] pobierz, plaintext 
  1. <a href="costam" class="activeSubPage">Coś tam</a>
[HTML] pobierz, plaintext
romarta
31.07.2009, 14:20:11
janusz niestety nie działa sad.gif
Sky_walker
31.07.2009, 14:46:44
.mix_08 a:hover, .mix_08 .activeSubPage {
romarta
31.07.2009, 14:53:39
nadal bez rezultatu sad.gif
Sky_walker
31.07.2009, 15:06:18
dałeś .mix_08 a:hover, a.activeSubPage { zamiast .mix_08 a:hover, .mix_08 .activeSubPage {
romarta
31.07.2009, 15:38:59
ale ja zmniełam na .mix_08 a:hover, .mix_08 .activeSubPage {i nadal nic
Sky_walker
31.07.2009, 15:49:36
może dodaj !important; na końcu linii przy definicji .activeSubPage?

bez przecinka to raczej na 100% nie zadziała.
romarta
31.07.2009, 15:53:04
zrobiłam bez przecinka nie działa,
dodałam na końcu: .mix_08 a:hover, .mix_08 .activeSubPage !important; i nadal bez efektu sad.gif(((
iVorIus
31.07.2009, 17:19:21
Jaki efekt chcesz dokładnie uzyskać?

Przykładowo: znajdujesz się na stronie "Kontakt" - jest podświetlona zakładka kontakt, tak?
romarta
31.07.2009, 17:36:58
tak dokładnie, przechodzę na inną podstronę i ta inna się podświetla
iVorIus
31.07.2009, 17:38:17
Spróbuj tego:

index.php :
[PHP] pobierz, plaintext 
  1. <?php
  2. $adres_strony = $_SERVER['REQUEST_URI'];
  3.  
  4. if( eregi('ofirmie', $adres_strony) ){
  5.  
  6.     $ofirmie_klasa = ' class="activeSubPage" ';
  7.     $katalog_klasa = '';
  8.     $kontakt_klasa = '';
  9. }
  10.  
  11. if( eregi('katalog', $adres_strony) ){
  12.  
  13.     $ofirmie_klasa = '';
  14.     $katalog_klasa = ' class="activeSubPage" ';
  15.     $kontakt_klasa = '';
  16. }
  17.  
  18. if( eregi('kontakt', $adres_strony) ){
  19.  
  20.     $ofirmie_klasa = '';
  21.     $katalog_klasa = '';
  22.     $kontakt_klasa = ' class="activeSubPage" ';
  23. }
  24.  
  25. ?>
  26.  
  27. <tr>
  28.         <td>
  29.            <div class="mix_06"><a href="index.html"<?php echo $ofirmie_klasa; ?>> <!--    <img src="images/metal_mix_06.jpg" width="199" height="62" border="0" alt="Metal-Mix">--></a></div></td>
  30.         <td>
  31.           <div class="mix_07"><a href="katalog.html"<?php echo $katalog_klasa; ?>> <!--<img src="images/metal_mix_07.jpg" border="0" width="201" height="62" alt="Metal-Mix">--></a></div></td>
  32.         <td colspan="3">
  33.  
  34.                  <div class="mix_08"><a href="kontakt.php"<?php echo $kontakt_klasa; ?>> <!--    <img src="images/metal_mix_08.jpg" width="201" height="62" border="0" alt="Metal-Mix">--></a></div></td>
  35.         <td>
  36.             <img src="images/metal_mix_09.jpg" style="width:14px; height:62px" alt="Metal-Mix"></td>
  37.     </tr>
[PHP] pobierz, plaintext
romarta
31.07.2009, 17:46:18
Czy w Css'ie ,mam coś zmieniać? bo jeżeli nie to nie działa sad.gif, albo ja już mam za bardzo namieszane
iVorIus
31.07.2009, 17:59:29
CSS:

[HTML] pobierz, plaintext 
  1. .mix_06 a:link, a:visited, a:active, {
  2. display:block;
  3. background-image:url(images/metal_mix_06.jpg);
  4. height:62px;
  5. width:199px;
  6. padding:0,0,0,0;
  7. margin:0,0,0,0;
  8. }
  9.  
  10. .mix_06 a:hover, .mix_06 .activeSubPage {
  11. background-image:url(images/metal_mix_06a.jpg);
  12. height:62px;
  13. width:199px;
  14. border:none;
  15. padding:0,0,0,0;
  16. margin:0,0,0,0;
  17. }
  18.  
  19. .mix_07 a:link, a:visited, a:active{
  20. display:block;
  21. background-image:url(images/metal_mix_07.jpg);
  22. height:62px;
  23. width:201px;
  24. }
  25.  
  26. .mix_07 a:hover, .mix_07 .activeSubPage{
  27. display:block;
  28. background-image:url(images/metal_mix_07a.jpg);
  29. height:62px;
  30. width:201px;
  31. }
  32.  
  33. .mix_08 a:link, a:visited, a:active {
  34. display:block;
  35. background-image:url(images/metal_mix_08.jpg);
  36. height:62px;
  37. width:201px;
  38. }
  39.  
  40. .mix_08 a:hover, .mix_08 .activeSubPage{
  41. display:block;
  42. background-image:url(images/metal_mix_08a.jpg);
  43. height:62px;
  44. width:201px;
  45. }
[HTML] pobierz, plaintext


A ten cały kod wstaw do pliku index.php :

[PHP] pobierz, plaintext 
  1. <?php
  2.  
  3. $adres_strony = $_SERVER['REQUEST_URI'];
  4.  
  5. if( eregi('ofirmie', $adres_strony) ){
  6.  
  7.     $ofirmie_klasa = ' class="activeSubPage" ';
  8.     $katalog_klasa = '';
  9.     $kontakt_klasa = '';
  10. }
  11.  
  12. if( eregi('katalog', $adres_strony) ){
  13.  
  14.     $ofirmie_klasa = '';
  15.     $katalog_klasa = ' class="activeSubPage" ';
  16.     $kontakt_klasa = '';
  17. }
  18.  
  19. if( eregi('kontakt', $adres_strony) ){
  20.  
  21.     $ofirmie_klasa = '';
  22.     $katalog_klasa = '';
  23.     $kontakt_klasa = ' class="activeSubPage" ';
  24. }
  25. ?>
  26.  
  27. <tr>
  28.         <td>
  29.            <div class="mix_06"><a href="index.html"<?php echo $ofirmie_klasa; ?>> <!--    <img src="images/metal_mix_06.jpg" width="199" height="62" border="0" alt="Metal-Mix">--></a></div></td>
  30.         <td>
  31.           <div class="mix_07"><a href="katalog.html"<?php echo $katalog_klasa; ?>> <!--<img src="images/metal_mix_07.jpg" border="0" width="201" height="62" alt="Metal-Mix">--></a></div></td>
  32.         <td colspan="3">
  33.  
  34.                  <div class="mix_08"><a href="kontakt.php"<?php echo $kontakt_klasa; ?>> <!--    <img src="images/metal_mix_08.jpg" width="201" height="62" border="0" alt="Metal-Mix">--></a></div></td>
  35.         <td>
  36.             <img src="images/metal_mix_09.jpg" style="width:14px; height:62px" alt="Metal-Mix"></td>
  37.     </tr>
[PHP] pobierz, plaintext
romarta
31.07.2009, 20:05:42
zrobiłam tak, ale teraz to już się wszystko pochrzaniło sad.gif, sam zobacz
iVorIus
31.07.2009, 20:47:33
Jakiej przeglądarki używasz?

Pod Firefoxem 3.0 jest wszystko okej .

Popraw w index.php :

[PHP] pobierz, plaintext 
  1. <?php
  2.  
  3. $adres_strony = $_SERVER['REQUEST_URI'];
  4.  
  5. if( eregi('index', $adres_strony) ){
  6.  
  7.    $ofirmie_klasa = ' class="activeSubPage" ';
  8.    $katalog_klasa = '';
  9.    $kontakt_klasa = '';
  10. }
  11.  
  12. if( eregi('katalog', $adres_strony) ){
  13.  
  14.    $ofirmie_klasa = '';
  15.    $katalog_klasa = ' class="activeSubPage" ';
  16.    $kontakt_klasa = '';
  17. }
  18.  
  19. if( eregi('kontakt', $adres_strony) ){
  20.  
  21.    $ofirmie_klasa = '';
  22.    $katalog_klasa = '';
  23.    $kontakt_klasa = ' class="activeSubPage" ';
  24. }
  25. ?>
  26.  
  27. <tr>
  28.        <td>
  29.           <div class="mix_06"><a href="index.php"<?php echo $ofirmie_klasa; ?>> <!--    <img src="images/metal_mix_06.jpg" width="199" height="62" border="0" alt="Metal-Mix">--></a></div></td>
  30.        <td>
  31.          <div class="mix_07"><a href="katalog.php"<?php echo $katalog_klasa; ?>> <!--<img src="images/metal_mix_07.jpg" border="0" width="201" height="62" alt="Metal-Mix">--></a></div></td>
  32.        <td colspan="3">
  33.  
  34.                 <div class="mix_08"><a href="kontakt.php"<?php echo $kontakt_klasa; ?>> <!--    <img src="images/metal_mix_08.jpg" width="201" height="62" border="0" alt="Metal-Mix">--></a></div></td>
  35.        <td>
  36.            <img src="images/metal_mix_09.jpg" style="width:14px; height:62px" alt="Metal-Mix"></td>
  37.    </tr>
[PHP] pobierz, plaintext


Przejrzyj css i html, pokombinuj, skrypt w php działa, sam z niego korzystam.

Powodzenia smile.gif
romarta
31.07.2009, 21:00:46
działa, ale musiała każdą pseudoklasę rozpisać osobno. Najważnijesze że działa . Dziękuję.smile.gif
iVorIus
31.07.2009, 21:34:24
Ciesze się, że pomogłem,

Pozdrawiam winksmiley.jpg
romarta
31.07.2009, 22:25:33
Ja również się cieszę smile.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.