Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [HTML][CSS]obróbka gotowego szablonu a rozjezdzajace sie elementy strony
hyhyhy
post
Post #1





Grupa: Zarejestrowani
Postów: 135
Pomógł: 5
Dołączył: 6.02.2011

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

Witam,

Mam nastepujacy problem: Pobralem gotowy szablon strony, poniewaz o designie graficznym strony nie mam bladego pojecia.
Otwarlem plik style.css i costam pogrzebalem, pozmeinialem wielkosc liter itd, ale mam jeden problem.

Njapierw zapisana w indexie jest glowna zawartosc, ktora nie ma w stylach podanej lokacji na stronie,
Potem zapisane są po lewej stronie sa trzy boxy (jeden pod drugim) mają float:left
No i chciałem sobie takie same boxy wrzucić po prawej stronie, juz na wlasna rękę, ale co bym nie robil, to elementy mi latają jak chcą. Czy jest jakaś metoda (kolejnosc) wypisywania kolejnych boxow w indexie, czy cos, zeby stworzyc taki standardowy model lewo 3 boxy - heading -glowna tresc - prawo 3 boxy (IMG:style_emoticons/default/questionmark.gif)
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
hyhyhy
post
Post #2





Grupa: Zarejestrowani
Postów: 135
Pomógł: 5
Dołączył: 6.02.2011

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

probowalem cos z tym ustawiac, ale konczylo sie tak, ze wszysko bylo po lewej stronie jedno pod drugim, zarzucam kod:

[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. <!--
  3. Design by Free CSS Templates
  4. http://www.freecsstemplates.org
  5. Released for free under a Creative Commons Attribution 2.5 License
  6.  
  7. Name       : Reckoning
  8. Description: A two-column, fixed-width design for 1024x768 screen resolutions.
  9. Version    : 1.0
  10. Released   : 20090629
  11.  
  12. -->
  13. <html xmlns="http://www.w3.org/1999/xhtml">
  14. <head>
  15. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  16. <title>Reckoning by Free CSS Templates</title>
  17. <meta name="keywords" content="" />
  18. <meta name="description" content="" />
  19. <link href="style.css" rel="stylesheet" type="text/css" media="screen" />
  20. </head>
  21. <body>
  22. <div id="wrapper">
  23.  
  24. 	<div id="header">
  25. 		<div id="menu">
  26. 			<ul>
  27. 				<li class="current_page_item"><a href="#">Home</a></li>
  28. 				<li><a href="#">Blog</a></li>
  29. 				<li><a href="#">Photos</a></li>
  30. 				<li><a href="#">Links</a></li>
  31. 				<li><a href="#">Contact</a></li>
  32. 			</ul>
  33. 		</div>
  34. 		<!-- end #menu -->
  35. 		<div id="search">
  36. 			<form method="get" action="">
  37. 				<fieldset>
  38. 				<input type="text" name="s" id="search-text" size="15" />
  39. 				<input type="submit" id="search-submit" value="Search" />
  40. 				</fieldset>
  41. 			</form>
  42. 		</div>
  43. 		<!-- end #search -->
  44. 	</div>
  45. 	<!-- end #header -->
  46. 	<div id="logo">
  47. 		<h1><a href="#">tytul</a></h1>
  48. 	</div>
  49. 	<hr />
  50. 	<!-- end #logo -->
  51. <!-- end #header-wrapper -->
  52.  
  53. <div id="page">    <!-- no i tu jest tlo tego wszystkiego -->
  54. 	<div id="content">  <!-- a tu tekst glowny -->
  55.  
  56. 		</div>
  57. 	</div>
  58. 	<!-- end #content tu sie konczy tekst glowny -->    <!-- boxy z lewej strony, maja float:left -->
  59. 	<div id="sidebar">
  60. 		<ul>
  61. 			<li>
  62. 				<h2>Aliquam tempus</h2>
  63.  
  64. 			</li>
  65. 			<li>
  66. 				<h2>Turpis nulla</h2>
  67. 				<ul>
  68. 				<!-- zawartosc boxa -->
  69. 					</ul>
  70. 				</li>
  71. 			<li>
  72. 				<h2>Turpis nulla</h2>
  73. 				<ul>
  74. 					<!-- zawartosc boxa -->
  75. 					</ul>
  76. 				</li>
  77. 		</ul>
  78. 	</div>
  79. 	<!-- end #sidebar -->
  80. 	<div style="clear: both;"> </div>
  81. </div>
  82. <!-- end #page -->
  83.  
  84. <!-- end #footer -->
  85. </div>
  86. </body>
  87. </html>
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1.  
  2. /*
  3. Design by Free CSS Templates
  4. <a href="http://www.freecsstemplates.org" target="_blank">http://www.freecsstemplates.org</a>
  5. Released for free under a Creative Commons Attribution 2.5 License
  6. */
  7.  
  8. body {
  9. 	margin: 0px;
  10. 	padding: 0;
  11. 	background: #000000 url(images/img01.jpg) repeat-x left top;
  12. 	font-family: Arial, Helvetica, sans-serif;
  13. 	font-size: 11px;
  14. 	color: #63676A;
  15. }
  16.  
  17. h1, h2, h3 {
  18. 	margin: 0;
  19. 	font-family: Georgia, "Times New Roman", Times, serif;
  20. 	font-weight: normal;
  21. 	color: #649632;
  22. }
  23.  
  24. h1 { font-size: 22px; }
  25.  
  26. h2 { font-size: 15px; }
  27.  
  28. h3 { }
  29.  
  30. p, ul, ol {
  31. 	margin-top: 0;
  32. 	line-height: 240%;
  33. 	text-align: justify;
  34. }
  35.  
  36. ul, ol { }
  37.  
  38. blockquote { }
  39.  
  40. a { color: #C2C8CC; }
  41.  
  42. a:hover { text-decoration: none; }
  43.  
  44. a img {
  45. 	border: none;
  46. }
  47.  
  48. img.left {
  49. 	float: left;
  50. 	margin: 7px 30px 0 0;
  51. }
  52.  
  53. img.right {
  54. 	float: right;
  55. 	margin: 7px 0 0 30px;
  56. }
  57.  
  58. hr { display: none; }
  59.  
  60. .list1 {
  61. }
  62.  
  63. .list1 li {
  64. 	float: left;
  65. 	line-height: normal;
  66. }
  67.  
  68. .list1 li img {
  69. 	margin: 0 30px 30px 0;
  70. }
  71.  
  72. .list1 li.alt img {
  73. 	margin-right: 0;
  74. }
  75.  
  76. #wrapper {
  77. 	width: 950px;
  78. 	margin: 0 auto;
  79. 	background: #000000;
  80. }
  81.  
  82. /* Header */
  83.  
  84. #header-wrapper {
  85. }
  86.  
  87. #header {
  88. 	width: 900px;
  89. 	height: 44px;
  90. 	margin: 0 auto;
  91. 	background: url(images/img03.jpg) repeat-x left top;
  92. }
  93.  
  94. /* Menu */
  95.  
  96. #menu {
  97. 	float: left;
  98. 	height: 44px;
  99. }
  100.  
  101. #menu ul {
  102. 	margin: 0;
  103. 	padding: 0px;
  104. 	list-style: none;
  105. 	line-height: normal;
  106. }
  107.  
  108. #menu li {
  109. 	height: 44px;
  110. 	display: block;
  111. 	float: left;
  112. 	padding: 12px 25px 0px 25px;
  113. 	background: url(images/img04.jpg) no-repeat right 8px;
  114. }
  115.  
  116. #menu a {
  117. 	display: block;
  118. 	float: left;
  119. 	text-decoration: none;
  120. 	font: 12px Arial, Helvetica, sans-serif;
  121. 	color: #FFFFFF;
  122. }
  123.  
  124. #menu a:hover { text-decoration: underline; }
  125.  
  126. #menu .current_page_item {
  127. 	margin: 0px;
  128. 	color: #FFFFFF;
  129. }
  130.  
  131. /* Search */
  132.  
  133. #search {
  134. 	float: right;
  135. 	height: 44px;
  136. }
  137.  
  138. #search form {
  139. 	float: right;
  140. 	margin: 0;
  141. 	padding: 10px 20px 0 0;
  142. }
  143.  
  144. #search fieldset {
  145. 	margin: 0;
  146. 	padding: 0;
  147. 	border: none;
  148. }
  149.  
  150. #search input {
  151. 	float: left;
  152. 	padding: 0;
  153. 	height: 20px;
  154. 	font: 12px Arial, Helvetica, sans-serif;
  155. 	border: none;
  156. }
  157.  
  158. #search-text {
  159. 	width: 135px;
  160. 	height: 14px;
  161. 	margin: 0px 6px 0px 0px;
  162. 	padding: 3px 0 0 5px;
  163. 	color: #658453;
  164. }
  165.  
  166. #search-submit {
  167. 	padding: 0px;
  168. 	margin: 0px;
  169. 	height: 21px;
  170. 	margin-left: 4px;
  171. 	color: #39561D;
  172. }
  173.  
  174. /* Page */
  175.  
  176. #page {
  177. 	width: 900px;
  178. 	margin: 0 auto;
  179. 	padding: 0px;
  180.  
  181. }
  182.  
  183. /** LOGO */
  184.  
  185. #logo {
  186. 	width: 900px;
  187. 	height: 300px;
  188. 	margin: 0 auto;
  189. 	background: url(images/img05.jpg) no-repeat left top;
  190. }
  191.  
  192. #logo h1, #logo p {
  193. 	margin: 0;
  194. 	padding: 0px;
  195. 	line-height: normal;
  196. }
  197.  
  198. #logo h1 {
  199. 	padding-left: 40px;
  200. 	padding-top: 90px; 
  201. }
  202.  
  203. #logo h1 a {
  204. 	text-decoration: none;
  205. 	text-transform: lowercase;
  206. 	color: #FFFFFF;
  207. }
  208.  
  209. #logo h1 a:hover { text-decoration: underline; }
  210.  
  211. #logo p {
  212. 	padding: 0px 0 0 42px;
  213. 	font: italic 13px Georgia, "Times New Roman", Times, serif;
  214. 	color: #FFFFFF;
  215. }
  216.  
  217. #logo p a {
  218. 	text-decoration: none;
  219. 	color: #FFFFFF;
  220. }
  221.  
  222. #logo p a:hover { text-decoration: underline; }
  223.  
  224. /* Content */
  225.  
  226. #content {
  227. 	float: right;
  228. 	width: 700px;
  229. }
  230.  
  231. /* Post */
  232.  
  233. .post {
  234. 	margin-bottom: 25px;
  235. }
  236.  
  237. .post .title {
  238. 	height: 30px;
  239. 	margin-bottom: 3px;
  240. 	border-bottom: 1px dashed #1E1E1E;
  241. 	font-family: Arial, Helvetica, sans-serif;
  242. 	color: #FFFFFF;
  243. }
  244.  
  245. .post .date {
  246. 	float: right;
  247. 	margin-top: -45px;
  248. 	padding-right: 20px;
  249. 	font-family: Georgia, "Times New Roman", Times, serif;
  250. 	font-weight: normal;
  251. 	font-size: 18px;
  252. 	color: #C2C8CC;
  253. }
  254.  
  255. .post .meta {
  256. 	margin: -30px  0 3px 25px;
  257. 	padding: 2px 30px 2px 0px;
  258. 	font-family: Arial, Helvetica, sans-serif;
  259. 	font-weight: normal;
  260. 	font-size: 10px;
  261. 	color: #B6ACA2;
  262. }
  263.  
  264. .post .meta a { color: #B6ACA2; }
  265.  
  266. .post .entry {
  267. 	padding: 20px 0px;
  268. }
  269.  
  270. .post .links {
  271. 	margin: 0 250px 0 0;
  272. 	padding: 0 0 0 0px;
  273. }
  274.  
  275. .post .links .comments {
  276. }
  277.  
  278. .post .links .permalink {
  279. 	padding-left: 17px;
  280. }
  281.  
  282. /* Sidebar */
  283.  
  284. #sidebar {
  285. 	float: left;
  286. 	width: 150px;
  287. }
  288.  
  289.  
  290.  
  291. #sidebar ul {
  292. 	margin: 0;
  293. 	padding: 0;
  294. 	list-style: none;
  295. 	line-height: normal;
  296.  
  297. }
  298.  
  299.  
  300. #sidebar_1 ul {
  301. 	margin: 0;
  302. 	padding: 0;
  303. 	list-style: none;
  304. 	line-height: normal;
  305.  
  306. }
  307.  
  308. #sidebar li {
  309. 	margin-bottom: 10px;
  310. 	padding: 0 0 10px 0px;
  311. 	background: url(images/img07.jpg) repeat-x left top;
  312. }
  313.  
  314. #sidebar_1 li {
  315. 	margin-bottom: 10px;
  316. 	padding: 0 0 10px 0px;
  317. 	background: url(images/img07.jpg) repeat-x left top;
  318. }
  319.  
  320. #sidebar li ul {
  321. 	line-height: 200%;
  322. 	background: none;
  323. }
  324. #sidebar_1 li ul {
  325. 	line-height: 200%;
  326. 	background: none;
  327. }
  328.  
  329. #sidebar li li {
  330. 	margin: 0;
  331. 	padding: 3px 20px;
  332. 	background: none;
  333. }
  334. #sidebar_1 li li {
  335. 	margin: 0;
  336. 	padding: 3px 20px;
  337. 	background: none;
  338. }
  339.  
  340. #sidebar p {
  341. 	margin: 0;
  342. 	padding: 0 20px;
  343. }
  344. #sidebar_1 p {
  345. 	margin: 0;
  346. 	padding: 0 20px;
  347. }
  348.  
  349. #sidebar h2 {
  350. 	height: 29px;
  351. 	margin: 0 0 20px 0px;
  352. 	padding: 5px 0px 0px 10px;
  353. 	background: url(images/img06.jpg) repeat-x left top;
  354. 	text-transform: uppercase;
  355. 	font-family: Arial, Helvetica, sans-serif;
  356. 	font-size: 12px;
  357. 	font-weight: bold;
  358. 	color: #FFFFFF;
  359. }
  360.  
  361.  
  362. #sidebar p {
  363. 	line-height: 200%;
  364. 	padding-bottom: 5px;
  365. }
  366. #sidebar_1 h2 {
  367. 	height: 29px;
  368. 	margin: 0 0 20px 0px;
  369. 	padding: 5px 0px 0px 10px;
  370. 	background: url(images/img06.jpg) repeat-x left top;
  371. 	text-transform: uppercase;
  372. 	font-family: Arial, Helvetica, sans-serif;
  373. 	font-size: 12px;
  374. 	font-weight: bold;
  375. 	color: #FFFFFF;
  376. }
  377.  
  378. #sidebar a {
  379. }
  380.  
  381. /* Calendar */
  382.  
  383. #calendar {
  384. }
  385.  
  386. #calendar caption {
  387. 	padding-bottom: 5px;
  388. 	font-weight: bold;
  389. }
  390.  
  391. #calendar table {
  392. 	width: 100%;
  393. 	border-collapse: collapse;
  394. 	border-right: 1px solid #F5F2EF;
  395. }
  396.  
  397. #calendar thead th {
  398. 	padding: 5px 0;
  399. 	text-align: center;
  400. 	border-top: 1px solid #F5F2EF;
  401. 	border-left: 1px solid #F5F2EF;
  402. 	background: #F5F2EF;
  403. }
  404.  
  405. #calendar tbody td {
  406. 	padding: 5px 0;
  407. 	text-align: center;
  408. 	border-top: 1px solid #F5F2EF;
  409. 	border-left: 1px solid #F5F2EF;
  410. }
  411.  
  412. #calendar tfoot td {
  413. 	padding: 5px;
  414. }
  415.  
  416. #calendar tfoot #next {
  417. 	text-align: right;
  418. }
  419.  
  420. #calendar #today {
  421. 	background: #E7F1E1;
  422. }
  423.  
  424. /* Footer */
  425.  
  426. #footer {
  427. 	width: 900px;
  428. 	margin: 0 auto;
  429. 	padding: 0;
  430. 	background: url(images/img02.jpg) repeat-x left top;
  431. 	height: 61px;
  432. }
  433.  
  434. #footer p {
  435. 	margin: 0;
  436. 	padding: 20px 0;
  437. 	text-align: center;
  438. 	line-height: normal;
  439. 	color: #FFFFFF;
  440. }
  441.  
  442. #footer a {
  443. }
  444.  
[HTML] pobierz, plaintext


racja, zapomnialem stylu wrzucic. juz jest

Ten post edytował hyhyhy 16.02.2011, 19:08:08
Go to the top of the page
+Quote Post

Posty w temacie
- hyhyhy   [HTML][CSS]obróbka gotowego szablonu a rozjezdzajace sie elementy strony   16.02.2011, 17:55:31
- - bercow   daj kod, podziel na trzy elementy, lewo srodek pra...   16.02.2011, 18:22:58
- - hyhyhy   probowalem cos z tym ustawiac, ale konczylo sie ta...   16.02.2011, 18:34:34
- - potreb   Tak przy okazji CSS należy dać, a po drugie jak ju...   16.02.2011, 19:04:10
- - bercow   Prosze, lewo prawo srodek, i lewo i prawo podzielo...   16.02.2011, 19:08:41
- - hyhyhy   oo dzięki wielkie. EDIT: A jeszcze jakbym mial t...   16.02.2011, 19:28:16
- - Prezi2907   Cytat(hyhyhy @ 16.02.2011, 17:55:31 )...   16.02.2011, 21:23:09

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

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