Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [HTML][CSS] Składanie szablonu
DarkAbso
post
Post #1





Grupa: Zarejestrowani
Postów: 60
Pomógł: 10
Dołączył: 17.11.2011

Ostrzeżenie: (0%)
-----

Witam,
jakiś czas temu zacząłem się uczyć PHP. Zdążyłem się "przeszkolić" z programowania strukturalnego i miałem właśnie zacząć naukę obiektowego, ale niestety zauważyłem u siebie duże braki w html i css (ostatni raz ich używałem jeszcze za czasów "tabelek"). Tak więc nie zrażony nauką postanowiłem w ramach ćwiczeń znaleźć jakiś prosty szablon, wziąć od niego tylko grafikę i go poskładać. Niestety ze względu na brak mojej wiedzy nie umiem odpowiedzieć na pytanie czy szablon jest dobrze poskładany. Co prawda przeszło walidator, ale wolę jak specjaliści rzucą na to oko. Proszę o wypisanie wszelkich uwag dotyczące poniższego kodu.
TUTAJ MOŻNA LUKNĄĆ NA STRONĘ CLICK!
Kod pliku html:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html 
  2. 	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  3. 	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
  5. <head>
  6. 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7. 	<meta name="Description" content="Tu wpisz opis zawartości strony" />
  8. 	<meta name="Keywords" content="Tu wpisz wyrazy kluczowe rozdzielone przecinkami" />
  9. 	<title>Tu wpisz tytuł strony</title>
  10. <link rel="stylesheet" type="text/css" href="styl2.css" />
  11. </head>
  12. <body>
  13. <div id="menu_poziome"><ul>
  14. <li><a href="nowy.html">Start</a></li>
  15. <li><a href="nowy.html">Start</a></li>
  16. <li><a href="nowy.html">Start</a></li>
  17. </ul></div>
  18. <div id="tresc">Lorem ipsum dolor sit amet, Proins</div>
  19. <div id="menu_lewe"><h2>MENU</h2></div>
  20. <div id="menu_lewe2">
  21. <ul>
  22. <li><a href="nowy.html">Start</a></li>
  23. <li><a href="nowy.html">Start</a></li>
  24. </ul>
  25. </div>
  26. </body>
  27. </html>
[HTML] pobierz, plaintext 

[CSS] pobierz, plaintext 
  1. body {
  2. background-color: black;
  3. color: white;
  4. background-image: url(logo_tlo.png);
  5. background-repeat: no-repeat;
  6. }
  7. h2 {
  8. margin: 0 0 0 15px;
  9. }
  10. a:link, a:visited, a:hover {
  11. color: white;
  12. }
  13. #menu_poziome {
  14. background-image: url(jt_tlo.png);
  15. background-repeat: repeat-x;
  16. width: 100%;
  17. height: 35px;
  18. left: 284px;
  19. position: absolute;
  20. top: 0;
  21. }
  22. #menu_lewe {
  23. background-image: url(luk_tlo.png);
  24. background-repeat: no-repeat;
  25. background-position: top right;
  26. width: 200px;
  27. height: 73px;
  28. top: 284px;
  29. left: 0;
  30. position: absolute;
  31. }
  32. #menu_lewe2 {
  33. top: 356px;
  34. left: 0;
  35. width: 144px;
  36. height: 300px;
  37. position: absolute;
  38. border: 3px solid;
  39. border-left-color: black;
  40. border-top: 0px;
  41. border-right-color: #001eff;
  42. border-bottom-color: #001eff;
  43. }
  44. #tresc {
  45. position: absolute;
  46. top: 38px;
  47. left: 290px;
  48. }
  49. #menu_poziome ul {
  50. list-style-type: none;
  51. padding: 5px 0 0 5px;
  52. margin: 0;
  53. }
  54. #menu_poziome ul li {
  55. display: inline;
  56. margin: 3px;
  57. }
  58. #menu_lewe2 ul {
  59. padding: 0;
  60. margin: 0 0 0 10px;
  61. list-style-type: none;
  62. }
  63.  
[CSS] pobierz, plaintext
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
DarkAbso
post
Post #2





Grupa: Zarejestrowani
Postów: 60
Pomógł: 10
Dołączył: 17.11.2011

Ostrzeżenie: (0%)
-----

Jeszcze jeden szablon mam do sprawdzenia. Także w miarę łatwy, ale na wszelki wypadek chciałbym, aby luknęło na to fachowe oko.
Także podkreślam, iż grafika szablonów nie jest moja (pobrana ze strony darmowych szablonów), a wykorzystuje ją tylko do ćwiczeń.
LINK DO ZŁOŻONEGO SZABLONU CLICK!
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html 
  2. 	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  3. 	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7. <meta name="Description" content="Tu wpisz opis zawartości strony" />
  8. <meta name="Keywords" content="Tu wpisz wyrazy kluczowe rozdzielone przecinkami" />
  9. <title>Tu wpisz tytuł strony</title>
  10. <link rel="stylesheet" type="text/css" href="style3.css" />
  11. </head>
  12. <body>
  13. <div id="kont">
  14. <div id="logo">
  15. <div id="menu">
  16. <ul>
  17. <li><a href="#">Strona Glowna</a></li>
  18. <li><a href="#">Inna Podstrona</a></li>
  19. <li><a href="#">Inna Podstrona</a></li>
  20. <li><a href="#">Inna Podstrona</a></li></ul>
  21. </div>
  22. </div>
  23. <div id="tresc_gora">
  24. </div>
  25. <div id="tresc">
  26. <h2>Darmowy Szablon.</h2>
  27. <p>Szablon pobrano ze strony <a href="http://www.flankerds.com/" target="_blank">flankerds.com</a></p>
  28. <h2>Lorem ipsum</h2>
  29. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis viverra elementum enim. Mauris a metus. Donec vulputate, sapien vitae eleifend ullamcorper.</p>
  30. <p>Aenean pretium. Pellentesque a nisi eu diam pretium rhoncus. In hac habitasse platea dictumst. Vestibulum consequat, enim vitae bibendum hendrerit, metus dui vestibulum sapien, a tempor sem nisl a lorem. Vestibulum orci elit, tincidunt ac, convallis in, euismod quis, dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed vestibulum. Praesent elementum eros at dolor. Sed imperdiet metus vitae metus. Suspendisse vitae dolor sit amet nulla sodales vehicula.</p>
  31. </div>
  32. <div id="tresc_dol"></div>
  33. <div id="stopka"><p>Design by</p></div>
  34. </div>
  35. </body>
  36. </html>
[HTML] pobierz, plaintext 

[CSS] pobierz, plaintext 
  1. body {
  2. background-image: url(images/tlo.jpg);
  3. color: #000000;
  4. margin: 0;
  5. padding: 0;
  6. }
  7. #kont {
  8. background-color: #6a7330;
  9. width: 780px;
  10. margin-left: auto;
  11. margin-right: auto;
  12. position: relative;
  13. border-right: solid #34381d 2px;
  14. border-left: solid #34381d 2px;
  15. }
  16. #logo {
  17. background-image: url(images/logo.jpg);
  18. width: 780px;
  19. height: 253px;
  20. position: relative;
  21. }
  22. #menu{
  23. background-image: url(images/menu.jpg);
  24. width: 780px;
  25. height: 44px;
  26. position: absolute;
  27. bottom: 0;
  28. }
  29. #menu ul {
  30. list-style-type: none;
  31. padding: 0;
  32. margin-top: 10px;
  33. text-align: center;
  34. }
  35. #menu ul li {
  36. display: inline;
  37. list-style: none;
  38. padding-left: 7px;
  39. padding-right: 7px;
  40. }
  41. #menu a:link, #menu a:visited, #menu a:hover {
  42. text-decoration: none;
  43. color: #fff;
  44. font-size: 16px;
  45. font-weight: bold;
  46. }
  47. #tresc_gora {
  48. background-image: url(images/tytul.jpg);
  49. background-repeat: no-repeat;
  50. height: 60px;
  51. width: 641px;
  52. margin-left: auto;
  53. margin-right: auto;
  54. margin-top: 20px;
  55. }
  56. #tresc {
  57. background-image: url(images/tlo_tekst.jpg);
  58. width: 641px;
  59. height: auto;
  60. margin-left: auto;
  61. margin-right: auto;
  62. background-repeat: no-repeat;
  63. margin-top: 0;
  64. margin-bottom: 0;
  65. padding: 0;
  66. }
  67. #tresc p {
  68. margin: 0 8px 0 8px;
  69.  
  70. }
  71. #tresc h2 {
  72. margin: 0 8px 0 8px;
  73. }
  74. #tresc a:link, #tresc a:visited, #tresc a:hover {
  75. text-decoration: none;
  76. color: #34381d;
  77. font-weight: bold;
  78. }
  79. #tresc_dol {
  80. background-image: url(images/podpis.jpg);
  81. background-repeat: no-repeat;
  82. height: 56px;
  83. width: 641px;
  84. margin-left: auto;
  85. margin-right: auto;
  86. }
  87. #stopka {
  88. background-image: url(images/stopka.jpg);
  89. height: 29px;
  90. width: 780px;
  91. margin-top: 20px;
  92. }
  93. #stopka p {
  94. text-align: center;
  95. font-size: 12px;
  96. color: #ffffff;
  97. padding-top: 8px;
  98. }
[CSS] pobierz, plaintext
Go to the top of the page
+Quote Post

Posty w temacie
- DarkAbso   [HTML][CSS] Składanie szablonu   17.11.2011, 10:11:37
- - Sephirus   Szablon jest prosty ale poprawny. Możesz ewentualn...   17.11.2011, 10:19:40
- - DarkAbso   Jeszcze jeden szablon mam do sprawdzenia. Także w ...   17.11.2011, 14:42:10
- - Sephirus   Hmm. podobnie jak w poprzednim layoucie - ogólnie ...   18.11.2011, 08:49:26
- - DarkAbso   Trochę poczytałem o tym i w powyższym przykładzie ...   18.11.2011, 10:29:18
- - Micchaleq   Ogólnie może nie konkretnie na temat, jednak szabl...   18.11.2011, 10:43:43
- - DarkAbso   Zgadza się, są to podstawy, ale czy nie na tym pol...   18.11.2011, 11:37:10
- - Micchaleq   Cytat(DarkAbso @ 18.11.2011, 11:37:10...   18.11.2011, 12:22:16

« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 3.10.2025 - 14:20
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn