login  Naam:   Wachtwoord: 
Registreer je!
 Forum

[CSS]layout problemos

Offline Ultimatum - 16/10/2005 19:35
Avatar van UltimatumPHP expert ben nu dus bezig met css en heb dit al:
http://ultimatum.ul.funpic.de/clansite/
maar zoals je ziet loopt de linker bar niet door omdat die navigatie shit in de weg staat.., mijn vraag dus, hoe zorg ik dat die bar doorloopt en die navigatie precies rechts van de bar staat..

trouwens mijn site is al Xhtml strict 1.0, dus het ligt niet aan mijn codering 
dit is mijn index.php
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\"
  2.         \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
  3.       <html xmlns=\"http://www.w3.org/1999/xhtml\" lang=\"en\" xml:lang=\"en\">
  4.         <head>
  5.  
  6.           <title>Title</title>
  7. 		  <link rel=\"stylesheet\" href=\"styles.css\" type=\"text/css\" />
  8.  
  9.         </head>
  10.  
  11.         <body>
  12. <div class=\"container\">
  13. <div class=\"layout_top1\"></div>
  14. <div class=\"layout_top2\"></div>
  15. <div class=\"layout_top3\">Clan</div>
  16. <div class=\"layout_top4\"></div>
  17.  
  18. <div class=\"banner_left\"></div>
  19. <div class=\"banner\"></div>
  20. <div class=\"banner_right\"></div>
  21.  
  22. <div class=\"nav_left\"></div>
  23. <div class=\"nav_home\"></div>
  24. <div class=\"nav_forums\"></div>
  25. <div class=\"nav_downloads\"></div>
  26. <div class=\"nav_links\"></div>
  27. <div class=\"nav_rooster\"></div>
  28. <div class=\"nav_contact\"></div>
  29. <div class=\"nav_right\"></div>
  30. <div class=\"bar_left\"></div>
  31. <div class=\"content_header\"></div>
  32.  
  33. <div class=\"box\">
  34. <div class=\"bar_left\"></div>
  35. <div class=\"box_top\"></div>
  36. <div class=\"box_left\"></div>
  37. <div class=\"box_content\">Content</div>
  38. <div class=\"box_right\"></div>
  39. <div class=\"box_bottom\"></div>
  40. </div>
  41.  
  42. </div>
  43.         </body>
  44.  
  45.       </html>


en dit is de css, styles.css
php code - Bekijk de code zonder highlighting - Klap code in 
  1. body {
  2. 	font-family:Verdana, Arial, Helvetica, sans-serif;
  3. 	font-size:10px;
  4. 	color: #333333;
  5. 	background-color: #272c2e;
  6. 	text-align: center;
  7. }
  8.  
  9. a:link	{
  10. 		color: #272c2e; text-decoration :none;
  11. }
  12. a:visited {
  13. 		color: #272c2e; text-decoration :none;
  14. }
  15. a:hover {
  16. 		color: #f7f7f7; text-decoration :underline;
  17. }
  18.  
  19. a:active {
  20. 	color: #272c2e;  text-decoration :none;
  21. }
  22.  
  23. .container {
  24. 	width: 900px;
  25. 	margin-right: auto;
  26. 	margin-left: auto;
  27. }
  28.  
  29. .layout_top1 {
  30. 	background-image: url(\"images/M_top.jpg\");
  31. 	width: 900px;
  32. 	height: 12px;
  33. 	float: left;
  34. }
  35.  
  36. .layout_top2 {
  37. 	background-image: url(\"images/Reunion_02.jpg\");
  38. 	width: 70px;
  39. 	height: 22px;
  40. 	float: left;
  41. }
  42.  
  43. .layout_top3 {
  44. 	background-image: url(\"images/M_clan.jpg\");
  45. 	width: 217px;
  46. 	height: 22px;
  47. 	float: left;
  48. }
  49.  
  50. .layout_top4 {
  51. 	background-image: url(\"images/M_m.jpg\");
  52. 	width: 613px;
  53. 	height: 22px;
  54. 	float: left;
  55. }
  56.  
  57. .banner_left {
  58. 	background-image: url(\"images/M_bannerleft.jpg\");
  59. 	width: 70px;
  60. 	height: 197px;
  61. 	float: left;
  62. }
  63.  
  64. .banner {
  65. 	background-image: url(\"images/M_banner.jpg\");
  66. 	width: 759px;
  67. 	height: 197px;
  68. 	float: left;
  69. }
  70.  
  71. .banner_right {
  72. 	background-image: url(\"images/M_bannerright.jpg\");
  73. 	width: 71px;
  74. 	height: 197px;
  75. 	float: left;
  76. }
  77.  
  78. .nav_left {
  79. 	background-image: url(\"images/M_navleft.jpg\");
  80. 	width: 137px;
  81. 	height: 31px;
  82. 	float: left;
  83. }
  84.  
  85. .nav_home {
  86. 	background-image: url(\"images/M_navhome.jpg\");
  87. 	width: 61px;
  88. 	height: 31px;
  89. 	float: left;
  90. }
  91.  
  92. .nav_forums {
  93. 	background-image: url(\"images/M_navforums.jpg\");
  94. 	width: 75px;
  95. 	height: 31px;
  96. 	float: left;
  97. }
  98.  
  99. .nav_downloads {
  100. 	background-image: url(\"images/M_navdownloads.jpg\");
  101. 	width: 105px;
  102. 	height: 31px;
  103. 	float: left;
  104. }
  105.  
  106. .nav_links {
  107. 	background-image: url(\"images/M_navlinks.jpg\");
  108. 	width: 144px;
  109. 	height: 31px;
  110. 	float: left;
  111. }
  112.  
  113. .nav_rooster {
  114. 	background-image: url(\"images/M_navrooster.jpg\");
  115. 	width: 106px;
  116. 	height: 31px;
  117. 	float: left;
  118. }
  119.  
  120. .nav_contact {
  121. 	background-image: url(\"images/M_navcontact.jpg\");
  122. 	width: 85px;
  123. 	height: 31px;
  124. 	float: left;
  125. }
  126.  
  127. .nav_right {
  128. 	background-image: url(\"images/M_navright.jpg\");
  129. 	width: 187px;
  130. 	height: 31px;
  131. 	float: left;
  132. }
  133.  
  134. .content_header {
  135. 	background-image: url(\"images/M_contentheader.jpg\");
  136. 	width: 900px;
  137. 	height: 43px;
  138. 	float: left;
  139. }
  140.  
  141. .bar_left {
  142. 	background-image: url(\"images/M_left.jpg\");
  143. 	width: 74px;
  144. 	float: left;
  145. }
  146.  
  147. .bar_right {
  148. 	background-image: url(\"images/M_left.jpg\");
  149. 	width: 74px;
  150. 	float: left;
  151. }
  152.  
  153. .box {
  154. 	width: 184px;
  155. 	float: left;
  156. }
  157.  
  158. .box_top {
  159. 	background-image: url(\"images/N_top.jpg\");
  160. 	width: 184px;
  161. 	height: 34px;
  162. 	float: left;
  163. }
  164.  
  165. .box_left {
  166. 	background-image: url(\"images/N_left.jpg\");
  167. 	width: 15px;
  168. 	height: 185px;
  169. 	float: left;
  170. }
  171.  
  172. .box_content {
  173. 	background-color: #437594;
  174. 	width: 151px;
  175. 	height: 185px;
  176. 	float: left;
  177. }
  178.  
  179. .box_right {
  180. 	background-image: url(\"images/N_right.jpg\");
  181. 	width: 18px;
  182. 	height: 185px;
  183. 	float: left;
  184. }
  185.  
  186. .box_bottom {
  187. 	background-image: url(\"images/N_base.jpg\");
  188. 	width: 184px;
  189. 	height: 19px;
  190. 	float: left;
  191. }

2 antwoorden

Gesponsorde links
Offline finduilas - 16/10/2005 20:30
Avatar van finduilas PHP gevorderde Ik zou nog een extra div invoegen en daar helzefde doen.En de menu sh*t op laten schuiven.
Offline Ultimatum - 16/10/2005 21:37 (laatste wijziging 17/10/2005 20:33)
Avatar van Ultimatum PHP expert hoebedoel je, zou je een vb kunne geve in mijn script 

edit: niemand...
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.186s