Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: zakladki
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
trucksweb
2.11.2005, 17:14:16
czy ktos moze mi powiedziec jak zrobic cos podobnego do tych chyba zakladek questionmark.gif
a moze ktos ma juz gotowy przyklad to chetnie bym sie posilkowal tongue.gif
link >>
bela
2.11.2005, 17:16:40
Na alistapart jest kilka artykułow o tym
trucksweb
2.11.2005, 17:46:52
niestety nic nawet w 20% podobnego do tych zakladem nie widzialem, zreszta wogole zakladek tam nie widzialem sad.gif
mike
2.11.2005, 17:54:56
gosu.pl
css.maxdesign.com.au
trucksweb
2.11.2005, 18:49:49
udalo mi sie cos takiego wypocic:

[HTML] pobierz, plaintext 
  1. <style>
  2. .wszystko{
  3. position: relative; 
  4. width: 100%; 
  5. height: 200px; 
  6.  
  7. }
  8. .zakladka{
  9. float:left; 
  10. font-family: Verdana, Arial, Helvetica, sans-serif;
  11. size: 8px;
  12. color: white;
  13. weight: bold;
  14. background-image: url(..\1\zakladka.png);
  15. border:1px solid orange; 
  16. padding-left:5px; 
  17. padding-right:5px;
  18. cursor: pointer;
  19. width: 140px;
  20. }
  21. .ostatnia{
  22. background-color: white; 
  23. border:1px solid white;
  24. }
  25. .panel{
  26. padding:5px;
  27. display:none;
  28. text-align:left;
  29. border: 1px solid orange;
  30. }
  31. </style>
  32. <script>
  33. var ile=3;
  34.  
  35. function uaktywnij(P)
  36. {
  37.   for (var i=1;i<=ile;i++)
  38.   {
  39. 	var panel=document.getElementById('panel'+i);
  40. 	var zakladka=document.getElementById('zakladka'+i);
  41. 	if (i==P) 
  42.   {
  43.   panel.style.display='block';
  44.   zakladka.style.backgroundColor='orange';
  45.   zakladka.style.color='black';
  46.   }
  47. 	else 
  48.   {
  49.   panel.style.display='none';
  50.   zakladka.style.backgroundImage= "url(..\1\zakladka.png)";
  51.   zakladka.style.image='url(..\1\zakladka.png)';
  52.   }
  53.   }
  54. }
  55.  
  56. </script>
  57. </head>
  58. <body onLoad="uaktywnij(1);">
  59. <center>
  60. <div class="wszystko">
  61.   <div id="zakladka1" class="zakladka" onClick="uaktywnij(1);">Lorem Ipsum</div>
  62.   <div id="zakladka2" class="zakladka" onClick="uaktywnij(2);">Zakładka 2</div>
  63.   <div id="zakladka3" class="zakladka" onClick="uaktywnij(3);">Zakładka 3</div>
  64.   <div class="ostatnia">&nbsp;</div>
  65.  
  66.   <div class="panel" id="panel1" >Treść panelu związanego z pierwszą zakładką</div>
  67.   <div class="panel" id="panel2" >Dane dotyczące drugiej zakładki</div>
  68.   <div class="panel" id="panel3" >Treść trzeciej zakładki</div>
  69. </div>
  70.  
  71. </center>
[HTML] pobierz, plaintext


jednak jak zrobic aby w polu naglowka tj. tam gdzie pisze Lorem ipsum, zakladka 2, zakladka 3 byl obrazek, ktorego sciezke widac w skrypcie??mnie to niewychodzi sadsmiley02.gif


////
moj blad:)
(../1/bnazwa.png); :roll2:
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.