Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Nauka CSS, początki
adolf1945
post 7.05.2010, 18:34:39
Post #1





Grupa: Zarejestrowani
Postów: 29
Pomógł: 0
Dołączył: 7.05.2010

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

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.

Ten post edytował adolf1945 7.05.2010, 19:40:26
Go to the top of the page
+Quote Post

Posty w temacie
- adolf1945   Nauka CSS, początki   7.05.2010, 18:34:39
- - pedro84   1. Stosuj zawsze CSS reset 2. Grupuj selektory 3. ...   7.05.2010, 18:42:29
- - adolf1945   Cytat7. ID może występować tylko raz na danej stro...   7.05.2010, 18:56:18
- - pedro84   Wielokrotnie możesz używać klas, identyfikatora ty...   7.05.2010, 19:24:29
- - adolf1945   Dzięki za odpowiedzi, a czy w ogóle dobrze podziel...   7.05.2010, 19:44:09
- - pedro84   Polecam taką zasadę. Im mniej, tym lepiej. Jeden d...   7.05.2010, 19:48:35
- - krzysztof_kf   jak na początkującego nie jest źle co ja ci mogę d...   7.05.2010, 20:05:37
- - adolf1945   [HTML] pobierz, plaintext <div id="top...   7.05.2010, 20:12:31
- - krzysztof_kf   <p> to jest brany pod uwagę jako akapit stos...   7.05.2010, 20:16:05
- - adolf1945   Tak, tylko chodzi mi o to żeby ten szary box(div k...   7.05.2010, 20:24:26
- - krzysztof_kf   no bo robisz tekst na zasadzie <br /> zrób z...   7.05.2010, 20:28:45

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

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 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 Wersja Lo-Fi Aktualny czas: 14.08.2025 - 17:46
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn