Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [HTML][CSS]Panele zjeżdżają w dół
Jose
post 10.10.2009, 11:59:08
Post #1





Grupa: Zarejestrowani
Postów: 5
Pomógł: 1
Dołączył: 15.05.2009

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

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:
[HTML] pobierz, plaintext 
  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. 										<label>
  49. 											<input type='text' value='Twój login...' class='txt' />
  50. 											<input type='password' value='Twoje hasło...' class='txt' />
  51. 											<input type='submit' value='loguj' class='ok' />
  52. 										</label>
  53. 									</p>
  54. 								</form>
  55. 								<p class='login'>Lorem Ipsum Is Simply Dummy Text Of Printing And Typografy</p>
  56. 							</div>
  57. 							</div>
  58. 						</div>
  59. 						<div id='srodek'>
  60. 							<div class='oferta'>
  61. 								<h1 title='oferta'>OFERTA</h2>
  62. 							</div>
  63. 						</div>
  64.  
  65. 						</div>
  66. 						<div id='prawa'>
  67. 						<div class='panel'>
  68. 							<div class='naglowek'>
  69. 								<h1 title='nawigacja'>NAWIGACJA</h1>
  70. 							</div>
  71. 							<div class='tresc'>
  72. 								<dl class='nav'>
  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. 									<dt>Strona Główna</dt>
  85. 								</dl>
  86. 							</div>
  87. 						</div>
  88. 							<div class='panel'>
  89. 							<div class='naglowek'>
  90. 								<h1 title='logowanie'>LOGOWANIE</h1>
  91. 							</div>
  92. 							<div class='tresc'>
  93. 								<form action='index.php' method='get'>
  94. 									<p>
  95. 										<label>
  96. 											<input type='text' value='Twój login...' class='txt' />
  97. 											<input type='password' value='Twoje hasło...' class='txt' />
  98. 											<input type='submit' value='loguj' class='ok' />
  99. 										</label>
  100. 									</p>
  101. 								</form>
  102. 								<p class='login'>Lorem Ipsum Is Simply Dummy Text Of Printing And Typografy</p>
  103. 							</div>
  104. 							</div>
  105. 						</div>
  106.  
  107. 			</div>
  108. 		</body>
  109. 	</html>
[HTML] pobierz, plaintext


CSS:
[CSS] pobierz, plaintext 
  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. }
[CSS] pobierz, plaintext



Co mam zrobić, aby wyglądało to, jak na layu?
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · 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: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 19.06.2025 - 23:30
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn