Prikazi cijelu temu 30.01.2015 20:04
zxz Van mreze
Administrator
Registrovan od:03.02.2009
Lokacija:Tuzla


Predmet:Pravljenje menija
PreuzmiIzvorni kôd (HTML):
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3.   <head>
  4.  
  5.     <title>Navigation</title>
  6.     <style type="text/css" media="screen">
  7.  
  8. body { text-align:center; background:#a8cff0; font-size:90%; font-family:Verdana, Geneva, Arial, Helvetica, sans-serif; margin:0; padding:0; }
  9.  #page { width:50em; text-align:left; background:#FFF; border:4px solid #ecf3f9; margin:32px auto; padding:2em; }
  10. h1 { font-family:"Trebuchet MS", Verdana, Geneva, Arial, Helvetica, sans-serif; font-weight:normal; margin:0 0 0.5em 0; }
  11. .clear { clear:both; }
  12.  
  13.           /*###################*/
  14.  
  15.           /* Navigacija */
  16.  
  17.           /*###################*/
  18.  
  19. #navi, #navi ul { list-style-type:none; margin:0; padding:0; } /* Style-Reset */
  20. #navi li { width:128px; float:left; } /* Horizontale Anordnung */
  21. #navi li ul { display:none; } /* Normalzustand eingeklappt */
  22. #navi li:hover ul { display:block; } /* Ausgeklappt */
  23.  
  24.       /*###################*/
  25.  
  26.           /* Stil */
  27.  
  28.        /*###################*/
  29. #navcontainer { height:16px; position:relative; }
  30. #navi { position:absolute; }
  31. #navi li { border:1px solid #000; margin:0 32px 0 0; }
  32. #navi ul li { border:none; margin:0; }
  33. #navi a { font-weight:bold; text-align:center; display:block; padding:0.1em; }
  34. #navi a:link, #navi a:visited { color:#FFF; background:#A8CFF0; text-decoration:underline; }
  35. #navi a:active, #navi a:hover { color:#000; background:#FFF; text-decoration:none; }
  36. <!--[if lte IE 6]>
  37. <style type="text/css" media="screen">#navi { behavior:url("csshover.htc"); }</style>
  38. <![endif]-->
  39. </head>
  40.  <body>
  41. <div id="page">
  42. <h1>Navigacioni meni</h1>
  43. <div id="navcontainer">
  44. <ul id="navi">
  45.     <li><a href="ovdje link">Dobro doÅ¡li</a></li>
  46.     <li><a href="ovdje link">Neki naslov</a>
  47. <ul>
  48.     <li><a href="ovdje link">Nesto</a></li>
  49.     <li><a href="ovdje link">nesto drugo</a></li>
  50.     <li><a href="ovdje link">Nesto</a></li>
  51. </ul>
  52.      </li>
  53.      <li><a href="ovdje link">neki drugi naslov</a>
  54. <ul>
  55.       <li><a href="ovdje link">nesto</a></li>
  56.        <li><a href="ovdje link">nesto</a></li>
  57.        <li><a href="ovdje link">nesto</a></li>
  58. </ul>
  59.       </li>
  60.       <li><a href="ovdje link">Impressum</a></li>
  61. </ul>
  62. </div>
  63.  
  64. <div class="clear"></div>
  65.  
  66. <p>
  67.  CSS (cascading style sheets) nam omogucuje razdvajanje izgleda stranice od njenog sadržaja:
  68.  <li>
  69. informacije s web-stranica nalaze se u HTML datotekama
  70. <li>
  71. podaci o prikazu stranice nalaze se u CSS datotekama
  72. Korištenjem CSS-a definiramo prikaz pojedinih elemenata stranice (npr. da svi naslovi budu u istoj boji i sl.). Možemo takodje definirati i klase, koje odredjuju svojstva nekog elementa (sve elemente oznacene istom klasom tada prikazujemo na isti nacin).
  73. </p>
  74. <p>
  75. Postoje dva CSS standarda: CSS1 iz 1996. i CSS2 iz 1998 godine (sadrži i sva CSS1 svojstva).
  76. Tri su mogunosti korištenja CSS-a:
  77. izrada tekstualne datoteke sa sufiksom .css u koju spremamo podatke o prikazu stranice
  78. datoteke povezujemo sa stranicama na ciji izgled želimo da utjece sljedecim kodom unutar HEAD taga:
  79. <link rel=stilsit type=text/css href=style.css >
  80. CSS ima nasljedna svojstva (npr. td tag ce naslijediti svojstva body taga ukoliko kod njega ta     svojstva nisu posebno definirana)
  81. stil je moguce definirati i u samom kodu HTML stranice, tako da sadržaj CSS datoteke umetnemo unutar STYLE taga (takodjer unutar HEAD taga):
  82. <style type=text/css> ... </style>
  83. klasu definiramo pomocu tacke (npr. .napomena) a pozivamo je pomocu rijeci class unutar pojedinog taga:
  84. </p>
  85. <div class="clear"></div>
  86. </div>
  87. </body>
  88. </html>

Podrška samo putem foruma, jer samo tako i ostali imaju koristi od toga.