Cześć, mam problem w związku z kodowaniem..

Layout wygląda tak: http://jose.orge.pl/trk88/trk77.PNG
a Szablon: http://jose.orge.pl/trk88/

xHTML:
  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">
  3. <head>
  4. <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
  5. <title>Strona WWW : by trk88</title>
  6. <link rel='stylesheet' type='text/css' href='style.css' />
  7. </head>
  8. <body>
  9. <div id='www'>
  10. <ul id='menu'>
  11. <li>STRONA GŁÓWNA</li>
  12. <li>STRONA GŁÓWNA</li>
  13. <li>STRONA GŁÓWNA</li>
  14. <li>STRONA GŁÓWNA</li>
  15. <li>STRONA GŁÓWNA</li>
  16. <li>STRONA GŁÓWNA</li>
  17. </ul>
  18. <div id='top'></div>
  19. <div id='lewa'>
  20. <div class='panel'>
  21. <div class='naglowek'>
  22. <h1 title='nawigacja'>NAWIGACJA</h1>
  23. </div>
  24. <div class='tresc'>
  25. <dl class='nav'>
  26. <dt>Strona Główna</dt>
  27. <dt>Strona Główna</dt>
  28. <dt>Strona Główna</dt>
  29. <dt>Strona Główna</dt>
  30. <dt>Strona Główna</dt>
  31. <dt>Strona Główna</dt>
  32. <dt>Strona Główna</dt>
  33. <dt>Strona Główna</dt>
  34. <dt>Strona Główna</dt>
  35. <dt>Strona Główna</dt>
  36. <dt>Strona Główna</dt>
  37. <dt>Strona Główna</dt>
  38. </dl>
  39. </div>
  40. </div>
  41. <div class='panel'>
  42. <div class='naglowek'>
  43. <h1 title='logowanie'>LOGOWANIE</h1>
  44. </div>
  45. <div class='tresc'>
  46. <form action='index.php' method='get'>
  47. <p>
  48. <input type='text' value='Twój login...' class='txt' />
  49. <input type='password' value='Twoje hasło...' class='txt' />
  50. <input type='submit' value='loguj' class='ok' />
  51. </label>
  52. </p>
  53. </form>
  54. <p class='login'>Lorem Ipsum Is Simply Dummy Text Of Printing And Typografy</p>
  55. </div>
  56. </div>
  57. </div>
  58. <div id='srodek'>
  59. <div class='oferta'>
  60. <h1 title='oferta'>OFERTA</h2>
  61. </div>
  62. </div>
  63.  
  64. </div>
  65. <div id='prawa'>
  66. <div class='panel'>
  67. <div class='naglowek'>
  68. <h1 title='nawigacja'>NAWIGACJA</h1>
  69. </div>
  70. <div class='tresc'>
  71. <dl class='nav'>
  72. <dt>Strona Główna</dt>
  73. <dt>Strona Główna</dt>
  74. <dt>Strona Główna</dt>
  75. <dt>Strona Główna</dt>
  76. <dt>Strona Główna</dt>
  77. <dt>Strona Główna</dt>
  78. <dt>Strona Główna</dt>
  79. <dt>Strona Główna</dt>
  80. <dt>Strona Główna</dt>
  81. <dt>Strona Główna</dt>
  82. <dt>Strona Główna</dt>
  83. <dt>Strona Główna</dt>
  84. </dl>
  85. </div>
  86. </div>
  87. <div class='panel'>
  88. <div class='naglowek'>
  89. <h1 title='logowanie'>LOGOWANIE</h1>
  90. </div>
  91. <div class='tresc'>
  92. <form action='index.php' method='get'>
  93. <p>
  94. <input type='text' value='Twój login...' class='txt' />
  95. <input type='password' value='Twoje hasło...' class='txt' />
  96. <input type='submit' value='loguj' class='ok' />
  97. </label>
  98. </p>
  99. </form>
  100. <p class='login'>Lorem Ipsum Is Simply Dummy Text Of Printing And Typografy</p>
  101. </div>
  102. </div>
  103. </div>
  104.  
  105. </div>
  106. </body>
  107. </html>


CSS:
  1. body {
  2.  
  3. background-color: #003E41;
  4.  
  5. }
  6.  
  7. #www {
  8.  
  9. width: 900px;
  10. height: 1000px;
  11. margin: 0px auto;
  12. background-color: #002a2d;
  13. font-size: 11px;
  14. color: #aaa;
  15. font-family: Tahoma;
  16.  
  17. }
  18.  
  19. #menu {
  20.  
  21. width: auto;
  22. height: 43px;
  23. background-image: url(images/bg_menu.jpg);
  24. margin: 0px auto;
  25. text-align: center;
  26. font-weight: bold;
  27. list-style-type: none;
  28.  
  29. }
  30.  
  31. #menu ul, li {
  32.  
  33. float: left;
  34. padding: 15px;
  35.  
  36. }
  37.  
  38. #top {
  39.  
  40. background-image: url(images/top.jpg);
  41. width: 900px;
  42. height: 209px;
  43.  
  44. }
  45.  
  46. .panel {
  47.  
  48. width: 250px;
  49. height: 350px;
  50. background-color: #000;
  51. float: left;
  52. margin: 0;
  53. padding: 0;
  54.  
  55. }
  56.  
  57. .naglowek {
  58.  
  59. width: 250px;
  60. height: 33px;
  61. background-image: url(images/bg_panel.jpg);
  62. margin-top: 0px;
  63. padding-top: 0px;
  64.  
  65. }
  66.  
  67. h1 {
  68.  
  69. color: #000;
  70. font-size: 12px;
  71. font-weight: bold;
  72. font-family: Tahoma;
  73. text-align: center;
  74. padding-top: 10px;
  75. text-shadow: #fff 1px 1px 2px;
  76.  
  77. }
  78.  
  79. .nav dl, dt {
  80.  
  81. padding-top: 7px;
  82. padding-left: 10px;
  83.  
  84. }
  85.  
  86. dt:before {
  87.  
  88. content: "-";
  89.  
  90. }
  91.  
  92. #lewa {
  93.  
  94. display: block;
  95. width: 250px;
  96.  
  97.  
  98. }
  99.  
  100. .txt {
  101.  
  102. margin: 5px;
  103. margin-left: 50px ;
  104. height: 17px;
  105. font-size: 10px;
  106. font-family: Tahoma;
  107. color: #aaa;
  108. width: 150px;
  109. text-align: center;
  110. background-image: url(images/login.jpg);
  111. border: 1px solid #fff;
  112.  
  113. }
  114.  
  115. .ok {
  116.  
  117. margin-left: 100px;
  118. height: 20px;
  119. width: 50px;
  120. background-image: url(images/ok.jpg);
  121. border: 0;
  122. font-size: 10px;
  123. color: #aaa;
  124. font-family: Tahoma;
  125. font-weight: bold;
  126.  
  127. }
  128.  
  129. p.login {
  130.  
  131. text-align: center;
  132. padding-left: 5px;
  133. padding-right: 5px;
  134.  
  135. }
  136.  
  137. #prawa {
  138.  
  139. float: right;
  140. width: 300px;
  141. padding: 0;
  142. margin: 0;
  143. display: inline;
  144.  
  145. }
  146.  
  147. #srodek {
  148.  
  149. width: 400px;
  150. height: 1000px;
  151. float:left;
  152. background: #000;
  153.  
  154. }
  155.  
  156. .oferta {
  157.  
  158. width: 400px;
  159. height: 51px;
  160. background-image: url(images/bg_oferta.jpg);
  161. }



Co mam zrobić, aby wyglądało to, jak na layu?