Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [PHP][CSS]Current Page CSS
Forum PHP.pl > Forum > Przedszkole
lgorek
Hello
W PHP nie jestem za dobry, zrobilem taka mala stronke ale zeby bylo ladniej utworzylem zmieniajacy sie przycisk pod CSS, najezdzanie wszystko dziala jednak ustawilem rowniez aby obecna strona byla innaczej odznaczona i tutaj musi byc zmieniona skladnia jednego odnoscnika.

  1. <?php if ( $_GET['strona'] == "home" ) {
  2. echo '<li id="nav-home"><a href="index.php?strona=home" class="current"></a></li></td><td>'; } else {
  3. echo '<li id="nav-home"><a href="index.php?strona=home"></a></li></td><td>'; } ?>
  4. <?php if ( $_GET['strona'] == "omnie" ) {
  5. echo '<li id="nav-omnie"><a href="index.php?strona=omnie" class="current"></a></li></td><td>'; } else {
  6. echo '<li id="nav-omnie"><a href="index.php?strona=omnie" ></a></li></td><td>'; } ?>
  7. <?php if ( $_GET['strona'] == "kontakt" ) {
  8. echo '<li id="nav-kontakt"><a href="index.php?strona=kontakt" class="current"></a></li></ul></div></td></tr>'; } else {
  9. echo '<li id="nav-kontakt"><a href="index.php?strona=kontakt"></a></li></div></td></tr>'; } ?>


Czyli jak widać powyżej aby byla zaznaczony odpowiedni button musi byc ustawiona odpowiednia klasa. Czy da sie jakos skrocic owy kod aby mozna latwo dodawac wiecej linkow lub usuwac.
piotrooo89
http://olaszewski.com/2009/01/01/aktualna-strona-w-css/ coś mojego chyba możesz dostosować do swoich potrzeb.
lgorek
Piotrek

Ale u mnie dziala juz CSS poradzilem sobie kod wygląda tak jak:

Kod w HTML
  1. <div id="nav-main">
  2. <li id="nav-home"><a href="index.php?strona=home" class="current"></a></li>
  3. <li id="nav-omnie"><a href="index.php?strona=omnie" ></a></li>
  4. <li id="nav-kontakt"><a href="index.php?strona=kontakt"></a></li>
  5. </div>


Kod w CSS
  1.  
  2. #nav {
  3. height: 63px;
  4. margin-left: 370px;
  5. }
  6.  
  7. #nav-main{
  8. }
  9.  
  10. #nav-main ul {
  11. margin:0;
  12. padding:0;
  13. list-style:none;
  14. }
  15.  
  16. #nav-main li {
  17. float:left;
  18. margin:0;
  19. padding:0;
  20. }
  21.  
  22. #nav-main a {
  23. display:block;
  24. overflow: hidden;
  25. width: 90px;
  26. height: 28px
  27. }
  28.  
  29. #nav-main {
  30. text-indent: -9999px;
  31. }
  32.  
  33. #nav-main a.current {
  34. background-position: 0 -56px;
  35. }
  36.  
  37. #nav-home a { display:block; overflow: hidden; width: 104px;height: 28px}
  38. #nav-home a{background:url("03a.jpg") no-repeat right top;}
  39. #nav-home a:hover{background-position: 0 -28px;}
  40.  
  41. #nav-omnie a { display:block; overflow: hidden; width: 106px;height: 28px}
  42. #nav-omnie a{background:url("04a.jpg") no-repeat right top;}
  43. #nav-omnie a:hover{background-position: 0 -28px;}
  44.  
  45. #nav-kontakt a { display:block; overflow: hidden; width: 173px;height: 28px}
  46. #nav-kontakt a{background:url("07a.jpg") no-repeat right top;}
  47. #nav-kontakt a:hover{background-position: 0 -28px;}



Mi chodziu jak uproscic kod ktory podalem w moim poscie czy tak jak zrobilem moze byc.
piotrooo89
Cytat(lgorek @ 23.02.2009, 19:46:10 ) *
Mi chodziu jak uproscic kod ktory podalem w moim poscie czy tak jak zrobilem moze byc.


sory... nie doczytałem.

zamiast:
  1. #nav-home a { display:block; overflow: hidden; width: 104px;height: 28px}
  2. #nav-home a{background:url("03a.jpg") no-repeat right top;}
  3. #nav-home a:hover{background-position: 0 -28px;}
  4.  
  5. #nav-omnie a { display:block; overflow: hidden; width: 106px;height: 28px}
  6. #nav-omnie a{background:url("04a.jpg") no-repeat right top;}
  7. #nav-omnie a:hover{background-position: 0 -28px;}
  8.  
  9. #nav-kontakt a { display:block; overflow: hidden; width: 173px;height: 28px}
  10. #nav-kontakt a{background:url("07a.jpg") no-repeat right top;}
  11. #nav-kontakt a:hover{background-position: 0 -28px;}


może być:
  1. #nav-kontakt a, nav-omnie a, #nav-home a { background:url("07a.jpg") no-repeat right top; display:block; overflow: hidden; width: 173px;height: 28px}
  2. #nav-kontakt a:hover, #nav-omnie a:hover, #nav-home a:hover{background-position: 0 -28px;}


i błagam stosuj wcięcia.

//EDIT

w moim sposobie dodajesz tylko link i odpowiedni wpis do arkusza stylów.
lgorek
Piotrek ale chodzilo mi o uproszczenie tego

  1. <?php if ( $_GET['strona'] == "home" ) {
  2. echo '<li id="nav-home"><a href="index.php?strona=home" class="current"></a></li></td><td>'; } else {
  3. echo '<li id="nav-home"><a href="index.php?strona=home"></a></li></td><td>'; } ?>
  4. <?php if ( $_GET['strona'] == "omnie" ) {
  5. echo '<li id="nav-omnie"><a href="index.php?strona=omnie" class="current"></a></li></td><td>'; } else {
  6. echo '<li id="nav-omnie"><a href="index.php?strona=omnie" ></a></li></td><td>'; } ?>
  7. <?php if ( $_GET['strona'] == "kontakt" ) {
  8. echo '<li id="nav-kontakt"><a href="index.php?strona=kontakt" class="current"></a></li></ul></div></td></tr>'; } else {
  9. echo '<li id="nav-kontakt"><a href="index.php?strona=kontakt"></a></li></div></td></tr>'; } ?>
piotrooo89
Cytat(lgorek @ 23.02.2009, 21:21:28 ) *
Piotrek ale chodzilo mi o uproszczenie tego


dobrze ale po co wynajdować koło na nowo i to jeszcze tak na około?
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.