Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS] Co popawić
Forum PHP.pl > Forum > Przedszkole
GameMaker
9.11.2010, 20:09:28
Witam !
Wczoraj przeczytałem kurs XHTML + CSS i dzisiaj napisałem 2 stronkę, proszę o porady optymalizacyjne lub poprawę kodu.


[HTML] pobierz, plaintext 
  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="pl"> 
  3. <head> 
  4. <title>Portfel</title> 
  5. <meta name="description" content="" /> 
  6. <meta name="keywords" content="" /> 
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  8. <meta name="revisit-after" content="30 days" /> 
  9. <meta http-equiv="content-language" content="pl" /> 
  10. <meta name="Author" content="" /> 
  11. <link rel="stylesheet" href="css/style.css" type="text/css" />
  12.  
  13. </head> 
  14. <body>
  15.  
  16. <!-- MENU START -->
  17. <div id="menu">
  18. 	<ul>
  19. 		<li><a href="index.html">? Home</a></li>
  20. 		<li><a href="index.html">? Zamów</a></li>
  21.  
  22. 	</ul>
  23. </div>
  24. <!-- MENU KONIEC -->
  25.  
  26. <!-- HEADER START -->
  27. <div id="header">
  28. 	<div class="suitcase"></div>
  29. 	<h1>Nazwa firmy</h1>
  30. 	<h2>Przeprowadzki</h2>
  31. </div>
  32. <!-- HEADER KONIEC -->
  33.  
  34. <!-- FRAME START -->
  35. <div id="frame">
  36. 	<div id='tresc'>
  37. 	SLOGAN - SLOGAN - SLOGAN - SLOGAN -<br />
  38. 	SLOGAN - SLOGAN - SLOGAN - SLOGAN -<br />
  39. 	SLOGAN - SLOGAN - SLOGAN - SLOGAN -<br />
  40. 	SLOGAN - SLOGAN - SLOGAN - SLOGAN -
  41. </div>
  42.  
  43. <div id="sms">
  44. <strong class="h1">Kontakt</strong><br />
  45. <div class='text'>Telefon : <strong class="prz">XXX-XXX-XXX</strong><br />
  46. Fax &nbsp&nbsp&nbsp&nbsp&nbsp : <strong class="prz">XXX-XXX-XXX</strong></div>
  47. <strong class="h1">Adres</strong><br />
  48. <div class='text'>Ulica&nbsp&nbsp&nbsp&nbsp : <strong class="prz">Ulica</strong><br />
  49. Kod pocztowy: <strong class="prz">XX-XXX</strong><br />
  50. Miasto&nbsp : <strong class="prz">Miejscowość</strong><br />
  51. Regon&nbsp&nbsp: <strong class="prz">Regon</strong><br />
  52. </div>
  53. </div>
  54.  
  55. </div>
  56. <!-- FRAME KONIEC -->
  57.  
  58. <!-- SHADOW START -->
  59. <div id="shadow"></div>
  60. <!-- FRAME KONIEC -->
  61.  
  62. <!-- FOOTER START -->
  63. <div id="footer">
  64. 	<p>? 2010 Przeprowadzki. Powered by Daniel Korytek.</p>
  65. </div>
  66. <!-- FOOTER KONIEC -->
  67.  
  68. </body>
  69. </html>
[HTML] pobierz, plaintext 



[HTML] pobierz, plaintext 
  1. body {
  2.     width: 819px;
  3.     padding: 0;
  4.     margin: 0 auto;
  5.     font-family: Verdana;
  6.     font-size: 13px;
  7.     color: #737373;
  8.     line-height: 19px;
  9.     background: url(../img/background.png) repeat #d2d2d2;
  10. }
  11.  
  12. h1 {
  13.     font-family: Georgia;
  14.     font-size: 48px;
  15.     font-weight: bold;
  16.     font-style: italic;
  17.     color: #7b4817;
  18.     margin: 45px 0px 0px 260px;
  19.     padding: 0;
  20.     text-shadow: 1px 1px 0px #ffffff;
  21.     position: absolute;
  22. }
  23.  
  24. h2 {
  25.     font-family: Georgia;
  26.     font-size: 30px;
  27.     font-weight: bold;
  28.     font-style: italic;
  29.     color: #7f7f7f;
  30.     margin: 95px 0px 0px 260px;
  31.     padding: 0;
  32.     text-shadow: 1px 1px 0px #ffffff;
  33.     position: absolute;
  34. }
  35.  
  36. p {
  37.     margin: 0;
  38.     padding: 0;
  39. }
  40.  
  41. a {
  42.     color: #505050;
  43.     margin: 0;
  44.     padding: 0;
  45.     text-decoration: underline;
  46. }
  47.  
  48. a:hover {
  49.     color: #737373;
  50.     margin: 0;
  51.     padding: 0;
  52.     text-decoration: none;
  53. }
  54.  
  55. img {
  56.     border: 0;
  57. }
  58.  
  59. #menu {
  60.     width: 819px;
  61.     height: 40px;
  62.     margin: 0;
  63.     padding: 0;
  64. }
  65.  
  66. #menu ul {
  67.    margin: 0;
  68.    padding: 0;
  69.    list-style: none;
  70.    float: right;
  71. }
  72.  
  73. #menu ul li {
  74.    float: left;
  75.    padding: 0 18px 0 0;     
  76. }
  77.  
  78. #menu ul li a {
  79.    font-size: 18px;
  80.    margin: 0;
  81.    padding: 0;
  82.    float: left;
  83.    display: block;
  84.    font-family: Georgia;
  85.    font-style: italic;
  86.    color: #505050;
  87.    line-height: 37px;
  88.    text-shadow: 1px 1px 0px #ffffff;
  89.    text-decoration: none;
  90. }
  91.  
  92. #menu ul li a:hover {
  93.    color: #737373;
  94. }
  95.  
  96. #header {
  97.     width: 819px;
  98.     height: 153px;
  99.     margin: 0;
  100.     padding: 0;
  101. }
  102.  
  103. .suitcase {
  104.     width: 244px;
  105.     height: 137px;
  106.     margin: 16px 0px 0px 0px;
  107.     padding: 0;
  108.     position: absolute;
  109.     background: url(../img/suitcase.png) no-repeat;
  110. }
  111.  
  112. #frame {
  113.     width: 819px;
  114.     height: 369px;
  115.     margin: 0;
  116.     padding: 0;
  117.     background: url(../img/frame.png) no-repeat;
  118. }
  119.  
  120. #sms .h1 {
  121. font-size : 14px;
  122. text-align: center;
  123. padding-left : 66px;
  124. color: #7b4817;
  125.  
  126. }
  127. #formularz .button {
  128. margin-top:10px;
  129. height: 35px;
  130. width: auto;
  131. background-color: #70A5FF;
  132. -moz-border-radius:15px;
  133. border-radius:15px 15px;
  134. -khtml-border-radius:15px;
  135. -icab-border-radius:15px;
  136. -webkit-border-radius:15px;
  137. -khtml-border-radius:15px;
  138. }
  139. #tresc {
  140. float:left;
  141. padding-top:100px;
  142. padding-left:50px;
  143. width : 400px;
  144. }
  145. #sms {
  146. float:right;
  147. margin-right: 100px;
  148. margin-top:100px;
  149. width :200px;
  150. height:auto;
  151. border-style:dashed;
  152. border-width : 2px;
  153. -moz-border-radius:15px;
  154. border-radius:15px 15px;
  155. -khtml-border-radius:15px;
  156. -icab-border-radius:15px;
  157. -webkit-border-radius:15px;
  158. -khtml-border-radius:15px;
  159. }
  160.  
  161. #sms .text {
  162. padding-left:13px;
  163.  
  164. }
  165. #sms .prz {
  166. color: #7b4817;
  167. }
  168. #regulamin{
  169. float:right;
  170.  
  171. }
  172. #cu3er-container {
  173.     width: 798px;
  174.     height: 348px;
  175.     margin: 10px;
  176.     padding: 0;
  177.     outline: 0;    
  178. }
  179.  
  180. #shadow {
  181.     width: 819px;
  182.     height: 70px;
  183.     margin: 0;
  184.     padding: 0;
  185.     background: url(../img/shadow.png) no-repeat;
  186. }
  187.  
  188. #footer {
  189.     width: 819px;
  190.     height: 70px;
  191.     margin: 0;
  192.     padding: 0;
  193. }
  194.  
  195. #footer p {
  196.     text-align: center;
  197.     padding: 25px;
  198.     text-shadow: 1px 1px 0px #ffffff;
  199. }
[HTML] pobierz, plaintext



Demo :

Kod
http://transport.redhosti.pl/dizajn
pedro84
9.11.2010, 20:30:18
<br/> do odstępów. Usunąć.
Puste tagi - usunąć
Grupuj selektory w CSS.
cniak
9.11.2010, 20:56:02
takie cos jak
[HTML] pobierz, plaintext 
  1. <strong class="prz">tekst</strong>
[HTML] pobierz, plaintext
Mi sie zdaje ze nie jest zgodne ze standardami, poprawnie:
[HTML] pobierz, plaintext 
  1. <span class="prz">tekst</strong>
[HTML] pobierz, plaintext

Przy czym dodac do klasy prz wlasciwosc
[HTML] pobierz, plaintext 
  1. font-weight: bold/bolder/strong itd...;
[HTML] pobierz, plaintext

Popraw tez klase "prz" dodajac margin-left lub padding-left (:wartosc (np 50), miara (np px); ) NIE staraj sie uzywac sztucznych spacji. Do zoptymalizowania i sprawdzenia twojego kodu css służy http://jigsaw.w3.org/css-validator/
Do html jest http://validator.w3.org/
pedro84
9.11.2010, 21:06:51
Dlaczego niby to
[HTML] pobierz, plaintext 
  1.       <strong class="prz">tekst</strong>
[HTML] pobierz, plaintext
miałoby być niepoprawne?
cniak
9.11.2010, 21:08:41
Cytat(pedro84 @ 9.11.2010, 21:06:51 ) *
Dlaczego niby to
[HTML] pobierz, plaintext 
  1.       <strong class="prz">tekst</strong>
[HTML] pobierz, plaintext
miałoby być niepoprawne?

Nie wiem, pierwszy raz takie cos widze dlatego napisalem "mi sie zdaje"
pedro84
9.11.2010, 21:15:06
No to masz rację, zdaje Ci się smile.gif Wszystko jest ok.
Crozin
9.11.2010, 21:23:21
1. Jeśli zaczynasz mógłbyś od HTML5 zacząć - ze składnią XML.
2.
Kod
<div class="suitcase"></div>
Za wszelką cenę unikaj takich potworków.
3. Treść (tekst) wstawiaj w akapity.
4. Kontakt - Telefon: XXX. Kontakt to nagłówek (HX), a reszta to lista definicji (DL <DT, DD>). Podobnie ma się sprawa z adresem.
5. Twardej spacji używaj do celów do jakich została stworzona. Czyli możesz ją użyć w tekście by upewnić się, że np. spójnik "i" nie zostanie na końcu wiersza tylko zostanie przeniesiony do nowego. Od tworzenia marginesów pomiędzy elementami służy CSS (margin/padding).
6.
Kod
<div id="shadow"></div>
O ile ten cień nie jest nie wiadomo jak wymyślny powinieneś użyć do tego CSS bez żadnych wstawek w HTMLu.
7. Definiując fonty w CSSie powinieneś zapewnić ich chociaż kilka (nie każdy musi mieć Verdanę zainstalowaną), a na sam koniec powinieneś użyć jeden z 5 (czy ile ich tam jest) rodziny fontów (sans-serif, serif, monospace itd.).
8. Raczej staraj się używać "CSS'owych skrótowców", tj. font: normal 13px/19px Verdana, ..., sans-serif; zamiast font-size, line-height, font-famili, font-bold itd.
9. Widzę, że użyłeś pozycjonowania absolutnego, a patrząc po wyglądzie strony nie sądzę by było ono potrzebne. Raczej staraj się go unikać - jest nieco problematyczne.
10. Jeżeli dla "a" zdefiniowałeś margin/padding to dla "a:hover" nie ma już takiej potrzeby.
11. Jak sam widzisz bardzo często używałeś margin/padding: 0. Możesz zgrupować to dla wszystkich elementów. Swoją drogą mógłbyś użyć tzw. reset.css, który usunie wszystkie style nadane przez przeglądarki i ujednolici je - tutaj przykładowy: http://ideone.com/GahAD
12. Formatuj swój kod. Stosuj wcięcia itp.

Cytat
Dlaczego niby to
[HTML] pobierz, plaintext 
  1.  <strong class="prz">tekst</strong>
[HTML] pobierz, plaintext
miałoby być niepoprawne?
Ponieważ element STRONG został użyty tutaj nie w celu podkreślenia ważności danego fragmentu, a jedynie dla sformatowania owego fragmentu.
pedro84
9.11.2010, 22:08:17
Cytat
Ponieważ element STRONG został użyty tutaj nie w celu podkreślenia ważności danego fragmentu, a jedynie dla sformatowania owego fragmentu.

A nie zwróciłem uwagi. Oczywiście masz rację.
GameMaker
9.11.2010, 22:11:19
Dzięki , Crozin !

Tego było trzeba mi.

Teraz zastanawiam się z HTML5 z XML. XML trochę już umiem bo brałem udział w kursie z "Europejskiego Funduszu Społecznego : Xml w MSSQL".

Jak możecie to podajcie jakieś dobre kursy HTML5 i Css3.

Dzięki za rady !
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.