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

Czy chcesz przejść pod nowy adres?

Pokazywanie postów oznaczonych etykietą CSS. Pokaż wszystkie posty
Pokazywanie postów oznaczonych etykietą CSS. Pokaż wszystkie posty

poniedziałek, 7 września 2009

Dlaczego układ na tabelkach jest głupi?

Poniżej znajduje się bardzo interesująca prezentacja tłumacząca dlaczego układ na tabelkach jest głupi :) Zapraszam do lektury!

Dlaczego układ na tabelkach jest głupi?
Autor: Admin w poniedziałek, września 07, 2009 0 komentarze

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

niedziela, 17 sierpnia 2008

Podstawy HTML i CSS - wideo tutorial

Serfując w sieci znalazłem bardzo interesujący tutorial - można się z niego w 40 minut nauczyć podstaw HTML i kilka naprawdę istotnych rzeczy na temat CSS. Jeżeli ktoś zaczyna zabawę z tymi językami to naprawdę gorąco polecam zacząć od tego - to tylko 40 minut!


źródło: http://pl.youtube.com/watch?v=GwQMnpUsj8I&feature=rec-fresh
Autor: Admin w niedziela, sierpnia 17, 2008 0 komentarze
Subskrybuj: Posty (Atom)