Ten blog nie jest już rozwijany. Wraz ze wszystkimi artykułami zostały przeniesiony pod adres wmroczkowski.pl

Czy chcesz przejść pod nowy adres?

sobota, 20 czerwca 2009

Szablon strony HTML z podziałem na nagłówek, treść, prawe menu i stopkę zbudowany za pomocą CSS

Dzisiaj pokażę jak zrobić prosty i przejrzysty szablon strony zbudowany za pomocą CSS. Szablon będzie wyglądał mniej więcej tak:



Aby go zrobić zaczniemy od utworzenie struktury strony, a więc od utworzenia pliku index.html. Kod wygląda następująco:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

  2.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

  3. <html xmlns="http://www.w3.org/1999/xhtml" lang="pl" xml:lang="pl">

  4. <head>

  5. <title>Szablon strony w CSS</title>

  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

  7. <meta http-equiv="Content-Language" content="pl" />

  8. <link rel="stylesheet" type="text/css" href="style.css">

  9. </head>

  10. <body>

  11.  

  12. <div id="naglowek">

  13. <h1>Nagłówek strony</h1>

  14. </div>

  15.  

  16. <div id="menu">

  17. <h2>Menu:</h2>

  18. <ul>

  19. <li>Link 1</li>

  20. <li>Link 2</li>

  21. <li>Link 3</li>

  22. <li>Link 4</li>

  23. <li>Link 5</li>

  24. <li>Link 6</li>

  25. <li>Link 7</li>

  26. </ul>

  27. </div>

  28.  

  29. <div id="tresc">

  30. <p> Tutaj umieszczamy główną treść strony, a więc wszystko co ma znaleźć się
    w środkowej części naszej strony.

  31. </p>

  32. </div>

  33.  

  34. <div id="stopka">

  35. &copy; 2009 <a href="http://spaceofcode.blogspot.com">spaceofcode.blogspot.com</a>

  36. </div>

  37. </body>

  38. </html>

  39.  



A teraz przechodzimy do określenia prezentacji strony, a więc tworzymy plik style.css i umieszczamy w nim następujący kod:

  1. body

  2. {

  3. background-color: #b5a789;

  4. font-family: Georgia, "Times New Roman", Times, serif;

  5. font-size: small;

  6. margin: 0px;

  7. }

  8.  

  9. #naglowek

  10. {

  11. background-color: #675c47;

  12. margin: 10px;

  13. height: 70px;

  14. text-align:center;

  15. padding: 20px;

  16. }

  17.  

  18. #tresc

  19. {

  20. background-color: #efe5d0;

  21. font-size: 105%;

  22. padding: 15px;

  23. margin: 0px 250px 10px 10px;

  24. line-height: 150%;

  25. }

  26.  

  27. #menu

  28. {

  29. background-color: #efe5d0;

  30. font-size: 105%;

  31. padding: 15px;

  32. margin: 0px 10px 10px 10px;

  33. width: 200px;

  34. float: right;

  35. }

  36. a:link

  37. {

  38. color:#b76666;

  39. }

  40.  

  41. a:visted

  42. {

  43. color: #675c47;

  44. }

  45.  

  46. #stopka

  47. {

  48. background-color: #675c47;

  49. color: #efe5d0;

  50. text-align: center;

  51. padding: 15px;

  52. margin: 10px;

  53. font-size: 90%;

  54. clear: right;

  55. }

  56. #stopka a

  57. {

  58. color: #efe5d0;

  59. }

  60.  

  61.  



Standarodowo, nic skomplikowanego. Jeżeli są jakieś pytania to proszę pytać.
Autor: Admin w sobota, czerwca 20, 2009 0 komentarze

piątek, 19 czerwca 2009

[CSS] Jak zrobić w CSS poziome menu zbudowane z zakładek

Dzisiaj odrobina wizualizacji ;) Jeżeli potrzebujesz poziomego menu, które ma wygląd zakładek (jak w teczkach) to być może to będzie coś w sam raz dla Ciebie. Menu o którym mowa wygląda tak:

Całość składa się tylko z listy wypunktowanej i odrobiny kodu CSS. Wydaję mi się, że nie ma tam nic trudnego, ale jakbyście mieli jakieś pytanie odnośnie do kodu to piszcie w komentarzach. Na wszystkie pytania chętnie odpowiem.
  1. <style>

  2. ul, ul li {

  3.         display: block;


  4.         list-style: none;

  5.         margin: 0;


  6.         padding: 0;

  7. }

  8.  

  9. ul {

  10.         border-bottom: 1px solid #888;


  11.         float: left;

  12.         width: 100%;


  13.         padding-left: 20px;

  14.        


  15. }

  16.  

  17. ul li {

  18.         float: left;

  19.         margin-right: 10px;


  20. }

  21.  

  22.  

  23. ul a:link, ul a:visited {

  24.   width: 100px;


  25.         text-decoration: none;

  26.         display: block;


  27.         background-color: navy;

  28.         color: white;


  29.         padding: 5px 10px;

  30.         border: 1px solid #888;


  31.         position: relative;

  32.         top: 1px;


  33.         font-weight: bold;

  34. }

  35.  

  36.  #current a {

  37.         background-color: #fff;


  38.         border-bottom-color: #fff;

  39.         color: black;


  40. }

  41.  

  42. ul a:hover {

  43.         background-color: #fff;


  44.         border-bottom-color: #fff;

  45.         color: black;


  46.         border-bottom: 1px solid #888;

  47. }

  48. </style>

  49. <ul>


  50. <li><a href="#">Zapasy</a></li>

  51. <li id="current"><a href="#">Zakupy</a></li>


  52. <li><a href="#">Sprzedaż</a></li>

  53. <li><a href="#">Logistyka</a></li>


  54. </ul>

Autor: Admin w piątek, czerwca 19, 2009 2 komentarze

czwartek, 18 czerwca 2009

[JS] Jak zrobić podwójny formularz wyboru w którym drugie pole zmienia się w zależności od wyboru w pierwszym

Ostatnio potrzebowałem formularza z dwoma polami wybory w których drugie pole zmienia się w zależności od wybranej wartości w pierwszym polu. W moim przypadku chodziło o to, żeby mieć możliwość wyboru domyślnej klasy maski sieci w pierwszej polu, tak żeby w drugim polu wyświetlały się dostępny. Rozwiązałem to w następujący sposób:

  1. <form name="form" action="index.php" method="get">

  2. <select name="classes" onChange="switch_m(this.options.selectedIndex)">


  3.   <option>Klasa A</option>

  4.   <option>Klasa B</option>

  5.   <option>Klasa C</option>


  6. </select>

  7. <select name="mask"></select>

  8. <input type="submit" value="wyślij" />


  9. </form>

  10.  

  11. <script language="javascript" type="text/javascript">

  12. <!--

  13.  

  14. function switch_m(wybor) {


  15.   l2=document.form.mask;

  16.   for (i=0;i<l2.options.length;i++) l2.options[i]=null;


  17.   for (i=0;i<opcje[wybor].length;i++)

  18.     l2.options[i]=new Option(opcje[wybor][i].value,opcje[wybor][i].text);


  19. }

  20.  

  21. ile_lista1=document.form.classes.options.length;

  22. opcje=new Array(ile_lista1)


  23. for (i=0;i<ile_lista1;i++) opcje[i]=new Array();


  24.  

  25. opcje[0][0]=new Option("8","255.0.0.0")

  26. opcje[0][1]=new Option("9","255.128.0.0")


  27. opcje[0][2]=new Option("10","255.192.0.0")

  28. opcje[0][3]=new Option("11","255.224.0.0")


  29. opcje[0][4]=new Option("12","255.240.0.0")

  30. opcje[0][5]=new Option("13","255.248.0.0")


  31. opcje[0][6]=new Option("14","255.252.0.0")

  32. opcje[0][7]=new Option("15","255.254.0.0")


  33.  

  34. opcje[1][0]=new Option("16","255.255.0.0")

  35. opcje[1][1]=new Option("17","255.255.128.0")


  36. opcje[1][2]=new Option("18","255.255.192.0")

  37. opcje[1][3]=new Option("19","255.255.224.0")


  38. opcje[1][4]=new Option("20","255.255.240.0")

  39. opcje[1][5]=new Option("21","255.255.248.0")


  40. opcje[1][6]=new Option("22","255.255.252.0")

  41. opcje[1][7]=new Option("23","255.255.254.0")


  42.  

  43. opcje[2][0]=new Option("24","255.255.255.0")

  44. opcje[2][1]=new Option("25","255.255.255.128")


  45. opcje[2][2]=new Option("26","255.255.255.192")

  46. opcje[2][3]=new Option("27","255.255.255.224")


  47. opcje[2][4]=new Option("28","255.255.255.240")

  48. opcje[2][5]=new Option("29","255.255.255.248")


  49. opcje[2][6]=new Option("30","255.255.255.252")

  50. opcje[2][7]=new Option("31","255.255.255.254")


  51.  

  52.  

  53. switch_m(0);

  54. // -->

  55. </script>

Autor: Admin w czwartek, czerwca 18, 2009 0 komentarze
Subskrybuj: Posty (Atom)