Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Szablon strony na divach
Forum PHP.pl > Forum > Po stronie przeglądarki
KrzysiekKCN
28.06.2011, 11:34:14
Witam, chciał bym stworzyć o takie coś:


i wystąpił błąd którego nie jestem w stanie przeskoczyć:

mam taki kod:

[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
  3. <html>
  4. <head>
  5. 	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6. 	<title></title>
  7.   	<link type="text/css" rel="stylesheet" href="style.css" />
  8. </head>
  9. <body>
  10. <div id="top_bar"></div>
  11. <div id="top">
  12. <!-- header -->
  13. 	<div id="head">
  14. <!-- menu i logo -->
  15. <div class="logo">
  16. 		<h1><a href="?body=main"><img src="images/logo.png"></a></h1>
  17. 		<div id="headmenu">
  18. 			  <ul>
  19. 				<li><a href="#"><span>Link</span></a></li>
  20. 				<li><a href="#"><span>Link</span></a></li>
  21. 				<li><a href="#" class="active"><span class="active2">Link</span></a></li>
  22. 				<li><a href="#"><span>Link</span></a></li>
  23. 			  </ul>
  24. 		</div>
  25. </div>
  26. <!-- menu na srodku -->	
  27. 		<div id="menu">
  28. 			<div class="menu bubplastic horizontal aqua">
  29. 				<ul>
  30. 					<li class="highlight"><span class="menu_r"><a href=""><span class="menu_ar"><img src="images/home.png"></span></a></li>
  31. 					<li><span class="menu_r"><a href=""><span class="menu_ar">Link</span></a></li>
  32. 					<li><span class="menu_r"><a href=""><span class="menu_ar">Link</span></a></li>
  33. 					<li><span class="menu_r"><a href=""><span class="menu_ar">Link</span></a></li>
  34. 					<li><span class="menu_r"><a href=""><span class="menu_ar">Link</span></a></li>
  35. 					<li><span class="menu_r"><a href=""><span class="menu_ar"><font color="#edcd3b">Link</font></span></a></li>
  36. 					<li><span class="menu_r"><a href=""><span class="menu_ar">Link</span></a></li>
  37. 				</ul>
  38. 				<br class="clearit" />
  39. 			</div>
  40. 		</div>
  41. 	</div>
  42. <!-- srodek strony -->
  43. 	<div id="left">Menu nawigacyjne</div>
  44. 	<div id="right">Dodatkowe informacje</div>
  45. 	<div id="center">
  46. 		Treść strony
  47. 			<ul>
  48. 				<li><a href="#">Link</a></li>
  49. 				<li><a href="#">Link</a></li>
  50. 				<li><a href="#">Link</a></li>
  51. 				<li><a href="#">Link</a></li>
  52. 				<li><a href="#">Link</a></li>
  53. 				<li><a href="#">Link</a></li>
  54. 			</ul>
  55. 	</div>
  56. 	<div id="fotter">Stopka serwisu</div>
  57. </div>
  58.  
  59. </body>
  60. </html>
[HTML] pobierz, plaintext 

[CSS] pobierz, plaintext 
  1. html, body {
  2. 	background-color: #e8e8db;
  3. 	color: #000;
  4. 	margin: 0;
  5. 	padding: 0;
  6. 	font-family: arial;
  7. }
  8. div.logo {
  9. 	margin: 0;
  10. }
  11. /* Główne ustawienia */
  12. #top_bar {
  13. 	height: 5px;
  14. 	background: #2b4e54;
  15. }
  16. #top {
  17. 	width: 960px;
  18. 	background: white;
  19. 	margin-left: auto;
  20. 	margin-right: auto;
  21. }
  22. #head  {
  23. 	height: 120px;
  24. 	background: white;
  25. 	position: relative;
  26. 	top: -21px;
  27. }
  28. #menu {
  29. height: 27px;
  30. 	position: relative;
  31. 	top: -49px;
  32. }
  33. #left {
  34. 	width: 170px;
  35. 	float: left;
  36. 	overflow: hidden;
  37. 	background-color: #fea;	
  38. }
  39. #right {
  40. 	width: 170px;
  41. 	float: right;
  42. 	overflow: hidden;
  43. 	background-color: #bea;
  44. }
  45. #center {
  46. 	width: 585px;
  47. 	float: left;
  48. 	overflow: hidden;
  49. 	background-color: #f66;
  50. }
  51. #fotter {
  52. 	clear: both;
  53. 	width: 100%;
  54. 	background-color: #888;
  55. }
  56.  
  57. /* Menu Head */
  58. #headmenu {
  59. 	height: 21px;
  60. 	width: 650px;
  61. 	position: relative;
  62. 	top: -47px;
  63. 	left: 260px;
  64. 	font-size: 11px;
  65. 	font-weight: bold;
  66. }
  67. #headmenu ul {
  68. 	margin:0;
  69. 	list-style:none;
  70. 	}
  71. #headmenu li {
  72. 	display:inline;
  73. 	margin: 0;
  74. 	padding:0;
  75. }
  76. #headmenu a {
  77. 	float: right;
  78. 	background:url('images/tableftF.png') no-repeat left top;
  79. 	margin-left: 3px;
  80. 	padding:0 0 0 4px;
  81. 	text-decoration:none;
  82. }
  83. #headmenu a span {
  84. 	float: right;
  85. 	display:block;
  86. 	background:url('images/tabrightF.png') no-repeat right top;
  87. 	padding: 2px 10px 2px 10px;
  88. 	color: #2b4e54;
  89. }
  90. #headmenu a.active {
  91. 	float: right;
  92. 	background:url('images/tableftF.png') no-repeat left top;
  93. 	background-position:0% -21px;
  94. 	margin-left: 3px;
  95. 	padding:0 0 0 4px;
  96. 	text-decoration:none;
  97. 	}
  98. #headmenu a span.active2 {
  99. 	float: right;
  100. 	display:block;
  101. 	background:url('images/tabrightF.png') no-repeat right top;
  102. 	background-position:100% -21px;
  103. 	padding: 2px 10px 2px 10px;
  104. 	color:#FFFFFF;
  105. 	float:none;
  106. }
  107.  
  108. /* Commented Backslash Hack hides rule from IE5-Maccolor: #2b4e54; \*/
  109. #headmenu a span {float:none;}
  110. /* End IE5-Mac hack */
  111. #headmenu a:hover span {color:#FFFFFF;}
  112. #headmenu a:hover {background-position:0% -21px;}
  113. #headmenu a:hover span {background-position:100% -21px;}
  114. #headmenu a.active:hover {background-position:0% 0px; }
  115. #headmenu a:hover span.active2 {background-position:100% 0px; color: #2b4e54;}
  116. /* Main Menu */
  117. .clearit {
  118. 	margin: 0;
  119. 	padding: 0;
  120. 	height: 0;
  121. 	clear: both;
  122. }
  123.  
  124. /* BUBBLE PLASTIC HORIZONTAL MENU */
  125.  
  126. .bubplastic.horizontal {
  127. 	width: 960px;
  128. 	height: 27px;
  129. 	margin: 0;
  130. 	padding: 0;
  131. 	background: #000000 url(images/bg-bubplastic.png) top left repeat-x;
  132. }
  133. .bubplastic.horizontal ul {
  134. 	list-style: none;
  135. 	margin: 0;
  136. 	padding: 0;
  137. }
  138. .bubplastic.horizontal ul li {
  139. 	float: left;
  140. 	margin: 0;
  141. 	padding: 0;
  142. 	background: transparent url(images/bg-bubplastic-button.png) top left no-repeat;
  143. }
  144.  
  145. .bubplastic.horizontal ul li a {
  146. 	display: block;
  147. 	height: 27px;
  148. 	padding-left: 15px;
  149. 	font-size: 70%;
  150. 	color: #FFFFFF;
  151. 	text-decoration: none;
  152. }
  153.  
  154. .bubplastic.horizontal ul li a span.menu_ar {
  155. 	display: block;
  156. 	height: 22px;
  157. 	padding-top: 5px;
  158. 	padding-right: 15px;
  159. 	background: transparent url(images/bg-bubplastic-button.png) top right no-repeat;
  160. 	cursor: pointer;
  161. }
  162. /* END BUBBLE PLASTIC HORIZONTAL MENU */
  163.  
  164. /* AQUA HOVER */
  165. .bubplastic.aqua ul li a:hover,
  166. .bubplastic.aqua ul li.highlight a {
  167. 	background: transparent url(images/bg-bubplastic-h-aqua.png) top left no-repeat;
  168. }
  169. .bubplastic.aqua ul li a:hover span.menu_ar,
  170. .bubplastic.aqua ul li.highlight a span.menu_ar {
  171. 	background: transparent url(images/bg-bubplastic-h-aqua.png) top right no-repeat;
  172. }
[CSS] pobierz, plaintext


a wszystko wygląda tak:


Paczka z kodem i zdjęciami:
http://www.speedyshare.com/files/29187901/kod.rar

Proszę o wskazówki

Pozdrawiam Krzysztof Marcinowski
erix
28.06.2011, 14:10:49
Cytat
Paczka z kodem i zdjęciami:
http://www.speedyshare.com/files/29187901/kod.rar

Kpisz sobie? Ktoś będzie specjalnie dla Ciebie ściągał? Wystaw to po ludzku na jakimś hostingu z bezpośrednim URL-em do HTML-a. To Tobie ma zależeć na rozwiązaniu problemu, a nie nam.
t_e_l
28.06.2011, 15:48:11
KrzysiekKCN Masz 2x DOCTYPE nie wiem dlaczego, jeden porządny wystarczy smile.gif sprawdź też stronę walidatorem bo masz parę drobnych błędów.
Dla #menu daj float, wtedy strona powinna Ci się wyświetlać tak samo w przeglądarkach ( nie wiem jak w IE ).
Adi32
29.06.2011, 15:42:52
To nie jest trudny u-d do napisania.
Wydaj 50zł na kurs css i będziesz takie rzeczy składał po 1 dniu...
kujawska
3.07.2011, 21:53:10
Proponuję zaznajomić się z tą stroną
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.