Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Nauka CSS, początki
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
adolf1945
7.05.2010, 18:34:39
Zaczynam naukę CSS (znam w stopniu podstawowym PHP, umiem stworzyć np. prosty system CMS oraz sklep internetowy lecz to wszystko bez jakiego kolwiek layoutu więc chce skończyć z białymi stronami z samymi formularzami)
Próbuję na sam początek zrobić prosty layout (oto on:)
http://www.donaukicss.ugu.pl/

Mój kod html:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Untitled Document</title>
  6. <link rel="stylesheet" href="style.css" type="text/css" media="all"/>
  7. </head>
  8. <body>
  9. <div id="wrapper">
  10. <a id="logo" href="index.html" title="WebDesign">
  11.  <img src="logo.png" alt="WebDesign" />
  12.  </a>
  13.  
  14.  <ul id="menu">
  15.  <li class="about"><a href="http://google.pl"
  16.  title="O nas">O nas</a></li>
  17.  <li class="portfolio"><a href="http://google.pl"
  18.  title="Portfolio">Portfolio</a></li>
  19.  <li class="offer"><a href="http://google.pl"
  20.  title="Oferta">Oferta</a></li>
  21.  <li class="contact"><a href="http://google.pl"
  22.  title="Kontakt">Kontakt</a></li> 
  23.  </ul>
  24.  
  25.  <div id="top">
  26.  Witam.
  27. gasgdjasdgjkasjglkjasgkljaslkglaksgdgasdgsdgsd.<br />
  28. asgdjasdgjkasjglkjasgkljaslkglaksgdgasdgsdgsd,<br />
  29. asgdjasdgjkasjglkjasgkljaslkglaksgdgasdgsdgsd<br />
  30. asgdjasdgjkasjglkjasgkljaslkglaksgdgasdgsdgsd <br />
  31. asgdjasdgjkasjglkjasgkljaslkglaksgdgasdgsdgsd<br />
  32. asgdjasdgjkasjglkjasgkljaslkglaksgdgasdgsdgsd<br />
  33. asgdjasdgjkasjglkjasgkljaslkglaksgdgasdgsdgsd<br />
  34. asgdjasdgjkasjglkjasgkljaslkglaksgdgasdgsdgsd<br />
  35.  <div id="kwadrat">
  36. asgdjasdgjkasjglkjasgkljaslkglaksgdgasdgsdgsd
  37. asgdjasdgjkasjglkjasgkljaslkglaksgdgasdgsdgsd
  38.  </div>
  39.  </div>
  40.  <div id="top1"></div>
  41.  <div id="top2">Test Test Test</div>
  42.  <div id="top3">Test Test Test</div>
  43.  <div id="top4">Test Test Test</div>
  44.  <div id="top5"><center>Kopiowanie treści bez zgody autora zabronione (zasady korzystania)!
  45.  ˆ 2010 XXXXX XXXXXXX</center></div>
  46.  
  47. </div>
  48. </body>
  49. </html>
[HTML] pobierz, plaintext


Mój kod CSS:

[CSS] pobierz, plaintext 
  1. @charset "utf-8";
  2. /* CSS Document */
  3.  
  4. body {
  5.  background:url(back.jpg) no-repeat;
  6.  font-family: verdana, sans-serif;
  7.  font-size: 0.75em
  8. }
  9.  
  10. img {
  11.  border: none
  12. }
  13.  
  14. #wrapper {
  15.  margin: 0 auto;
  16.  width: 90%;
  17. }
  18.  
  19. #logo {
  20.  float: left;
  21.  margin: 20px 0
  22. }
  23.  
  24. #top {
  25.  border-radius: 5px; 
  26.  border: 1px solid #CCC;
  27.  background-color:#FFFFFF;
  28.  clear: both;
  29.  height: 196px;
  30.  margin-bottom: 10px;
  31.  padding: 34px 28px
  32. }
  33.  
  34. #kwadrat {
  35.  border-radius: 5px; 
  36.  border: 1px solid #CCC;
  37.  background-color:#CCC;
  38.  float:right;
  39.  clear: both;
  40.  height: 150px;
  41.  width: 350px;
  42.  padding: 28px 30px;
  43.  padding: 25px;
  44.  }
  45.  
  46. #top1 {
  47.  
  48.  clear: both;
  49.  height: 5px;
  50.  margin-bottom: 10px;
  51.  padding: 5px 10px
  52. }
  53.  
  54. #top2 {
  55.  border-radius: 5px; 
  56.  border: 1px solid #CCC;
  57.  background-color:#FFFFFF;
  58.  clear: both;
  59.  height: 196px;
  60.  margin-bottom: 10px;
  61.  padding: 34px 28px
  62. }
  63.  
  64. #top3 {
  65.  
  66.  clear: both;
  67.  height: 5px;
  68.  margin-bottom: 10px;
  69.  padding: 5px 10px
  70. }
  71.  
  72. #top4 {
  73.  border-radius: 5px; 
  74.  border: 1px solid #CCC;
  75.  background-color:#FFFFFF;
  76.  clear: both;
  77.  height: 196px;
  78.  margin-bottom: 10px;
  79.  padding: 34px 28px
  80. }
  81.  
  82. #menu {
  83.  
  84.  
  85.  display: block;
  86.  float: right;
  87.  list-style: none;
  88.  margin-top: 40px
  89. }
  90.  
  91. a {
  92.  
  93.  color: #161616;
  94.  text-decoration: none
  95. }
  96.  
  97. a:hover {
  98.  color: #161616;
  99. }
  100.  
  101. #menu li {
  102.  float: left;
  103.  margin-left: 5px;
  104. }
  105.  
  106. #menu li a {
  107.  padding: 2px;
  108.  width: 90px;
  109.  -moz-border-radius: 8px
  110. }
  111.  
  112. #menu li.about a {
  113.  border-radius: 5px; 
  114.  border: 1px solid #CCC;
  115.  color:#FFFFFF;
  116.  background-color: #161616
  117. }
  118.  
  119. #menu li.about a:hover {
  120.  background-color: #ff8
  121. }
  122.  
  123. #menu li.portfolio a {
  124.  border-radius: 5px; 
  125.  border: 1px solid #CCC;
  126.  color:#FFFFFF;
  127.  background-color: #161616
  128. }
  129.  
  130. #menu li.portfolio a:hover {
  131.  background-color: #d4ff7d
  132. }
  133. #menu li.offer a {
  134.  border-radius: 5px; 
  135.  border: 1px solid #CCC;
  136.  color:#FFFFFF;
  137.  background-color: #161616
  138. }
  139.  
  140. #menu li.offer a:hover {
  141.  background-color: #96fdff
  142. }
  143.  
  144. #menu li.contact a {
  145.  border-radius: 5px; 
  146.  border: 1px solid #CCC;
  147.  color:#FFFFFF;
  148.  background-color: #161616
  149. }
  150.  
  151. #menu li.contact a:hover {
  152.  background-color: #ffff8e
  153. }
  154.  
  155. #menu li a {
  156.  color: #222;
  157.  display: block;
  158.  text-align: center;
  159.  text-transform: lowercase
  160. }
[CSS] pobierz, plaintext


Jakie błędy robię? O czym muszę poczytać, co poprawić i jak?
Z góry dzięki za pomoc.
pedro84
7.05.2010, 18:42:29
1. Stosuj zawsze CSS reset
2. Grupuj selektory
3. Nie używamy <br />!!
4. Dziel sobie styl. Komentuj go. Twórz osobne "działy" dla typografii, layoutu, układu, etc.
5. Nie powtarzaj bez sensu:
[CSS] pobierz, plaintext 
  1. padding: 28px 30px;
  2. padding: 25px;
[CSS] pobierz, plaintext

6. Używaj skórconego CSS, tzn zamiast:
[CSS] pobierz, plaintext 
  1. margin-left: 5px;
[CSS] pobierz, plaintext

lepiej użyć:
[CSS] pobierz, plaintext 
  1. margin:0 0 0 5px;
[CSS] pobierz, plaintext

7. ID może występować tylko raz na danej stronie.
adolf1945
7.05.2010, 18:56:18
Cytat
7. ID może występować tylko raz na danej stronie.

Tego niestety nie rozumiem.

A są jakieś zasady dotyczące układu strony, poszczególnych divów np. żeby się nie rozjeżdżały (tak jak na mojej stronie) ?

pedro84
7.05.2010, 19:24:29
Wielokrotnie możesz używać klas, identyfikatora tylko raz. Zasady układu? Co konkretnie masz na myśli? Wystarczy dodać szerokość dla kontenera i nie będzie się rozjeżdżać.
adolf1945
7.05.2010, 19:44:09
Dzięki za odpowiedzi, a czy w ogóle dobrze podzieliłem tą strone na divy?
pedro84
7.05.2010, 19:48:35
Polecam taką zasadę. Im mniej, tym lepiej. Jeden div na header, jeden na kontener (do środkowania zawartości - jeśli potrzeba), jeden na zawartość (ten główny) i jeden na stopkę. Oczywiście, każdy layout wymaga innej struktury, ale pewne elementy są wspólne. Staraj się minimalizować ilość divów smile.gif.
krzysztof_kf
7.05.2010, 20:05:37
jak na początkującego nie jest źle co ja ci mogę doradzić to lepiej samemu się nauczyć niż ktoś cię ma uczyć .
adolf1945
7.05.2010, 20:12:31 
[HTML] pobierz, plaintext 
  1. <div id="top">
  2. <p> Witam.
  3. gasgdjasdgjkasjglkjasgkljaslkglaksgdgasdgsdgsd.</p>
  4. <p>asgdjasdgjkasjglkjasgkljaslkglaksgdgasdgsdgsd</p>
  5.  
  6.  <div id="kwadrat">
  7. <p>asgdjasdgjkasjglkjasgkljaslkglaksgdgasdgsdgsd</p>
  8. <p>asgdjasdgjkasjglkjasgkljaslkglaksgdgasdgsdgsd</p>
  9.  </div>
  10.  </div>
[HTML] pobierz, plaintext


Jeśli mam jednego diva w drugim to w jaki sposób zrobić żeby ten drugi div był stały bez względu na zawartość pierwszego diva (jeśli pierwszy div jest pusty to jest ok, jeśli jest w nim tekst to drugi div mi się psuje-przesuwa w dół)
krzysztof_kf
7.05.2010, 20:16:05
<p> to jest brany pod uwagę jako akapit stosuję się go dla diva np.

[CSS] pobierz, plaintext 
  1.  
  2. #top p {
  3. //twoja zawartość 
  4.  
[CSS] pobierz, plaintext


adolf1945
7.05.2010, 20:24:26
Tak, tylko chodzi mi o to żeby ten szary box(div kwadrat) który uciekł mi na dół: http://www.donaukicss.ugu.pl/
Był na stałe w środku diva "top". Jeśli wpisuje tekst do diva top to ten box z diva "kwadrat" ucieka mi coraz niżej, nie wiem co robię źle
krzysztof_kf
7.05.2010, 20:28:45
no bo robisz tekst na zasadzie <br /> zrób za pomocą akapitu

np 

[CSS] pobierz, plaintext 
  1.  
  2. #top p { 
  3.  
  4.  
[CSS] pobierz, plaintext

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.