Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jQuery][xHTML] Menu
Forum PHP.pl > Forum > Po stronie przeglądarki
marcin86s
7.02.2010, 18:29:50
Nie mogę sobie poradzić z ustawieniem tego w taki sposób:



Pomoże ktoś? sadsmiley02.gif
Armstrong
7.02.2010, 19:02:17
1-sza poprawka pogrubiłem to co było źle.
[HTML] pobierz, plaintext 
  1. <div class="nav"> 
  2. <img style="float: left;" src="images/nav_left.gif" alt="" /> 
  3. <ul class="idTabs"> 
  4. 	<li><a href="#idTab1" class="selected">Tab 1</a></li> 
  5. 	<li><a href="#idTab2">Tab 2</a></li> 
  6. 	<li><a href="#idTab3">Tab 3</a></li> 
  7. 	<img style="float: right;" src="images/nav_right.gif" alt="" />
  8.  
  9. </ul>
[HTML] pobierz, plaintext
marcin86s
7.02.2010, 19:25:58
Ok, wielkie dzięki, nie wiesz może jeszcze co jest z tym tłem pod zawartością zakładek?
Armstrong
7.02.2010, 19:34:40
Stwórz sobie obrazek nav_bg2.gif (to kopia nav_bg.gif tylko pasek jest cały czarny)

[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. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <script type="text/javascript" src="jquery-1.4.1.min"></script>
  6. <script type="text/javascript" src="jquery.idTabs.min.js"></script>
  7. <style type="text/css">
  8. body { margin: 0px; padding: 0px; font: 10px Verdana, Arial, Tahoma, Helvetica, sans-serif;}
  9. </style>
  10. <link rel="stylesheet" href="tabs.css" type="text/css" /></head>
  11. <body>
  12.  
  13. <div class="nav"> 
  14. <img style="float: left;" src="images/nav_left.gif" alt="" /> 
  15. <ul class="idTabs"> 
  16. 	<li><a href="#idTab1" class="selected">Tab 1</a></li> 
  17. 	<li><a href="#idTab2">Tab 2</a></li> 
  18. 	<li><a href="#idTab3">Tab 3</a></li> 
  19. 	<img style="float: right;" src="nav_right.gif" alt="" />
  20.  
  21. </ul>
  22. <div style="clear:left;"></div>
  23. </div>
  24.  
  25. <div class="nav2">
  26. <img style="float: top;margin-left:10px; margin-top:0px" width="5px" height="37px" src="images/nav_bg2.gif" alt="" align="left" /> 
  27.  
  28. <div id="idTab1" style="display:block">Pierwsza</div> 
  29. <div id="idTab2" style="display:none;">Druga</div> 
  30. <div id="idTab3" style="display:none;">Trzecia</div> 
  31. </div>
  32. </body>
  33. </html>
[HTML] pobierz, plaintext


tabs.css:


[HTML] pobierz, plaintext 
  1. .nav {
  2. color: #111111;
  3. background-image: url('images/nav_bg.gif');
  4. width: 980px;
  5. }
  6. .nav li {
  7. list-style: none;
  8. float: left; 
  9. }
  10. .nav ul a {
  11. height: 27px;
  12. width: 82px;
  13. display: block;
  14. text-decoration: none;
  15. color: #FFFFFF;
  16. text-align: center;
  17. padding-top: 10px;
  18. }
  19. .nav ul a:hover {
  20. color: #FFFFFF;
  21. }
  22. .nav ul a.selected {
  23. color: #000000;
  24. background-image: url('images/nav_tab.gif');
  25. cursor: default;
  26. }
  27. .nav div {
  28. background-image: url('images/con_bg.gif');
  29. color: red;
  30. clear: left;
  31. padding 0px;
  32. font: 10pt Georgia;
  33. }
  34. .nav2{
  35. width: 980px;
  36. background-color: white;
  37. color: red;
  38. padding 0px;
  39. font: 10pt Georgia;
  40. clear:both;
  41.  
  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.