Pomoc - Szukaj - U¿ytkownicy - Kalendarz
Pe³na wersja: [HTML] Poskladanie w divy layouta.
Forum PHP.pl > Forum > Przedszkole
Green-sc
20.06.2008, 14:55:50
Witam. Mam problem z poukladaniem w DIVach pocietego layouta.
Lay wyglada tak: http://www.digitalprecision.home.pl/media/dp.jpg
A to co udalo mi sie juz zrobic jest tutaj: http://www.sendspace.com/file/hgd90h

Nie moge ustawic srodka strony oraz stopki.
Srodek nachodzi na prawe panele, a w stopce nie moge wysrodkowac tej warstwy. W IE prawie dobrze dziala, lecz z FF jest lipa.
.radex
20.06.2008, 14:58:44
We¼ to daj na jakiego¶ pastebina bo nie chce siê mi (i zapewne nie tylko mi) ¶ci±gaæ jakich¶ plików winksmiley.jpg
Green-sc
20.06.2008, 15:02:54
index.php

[PHP] pobierz, plaintext 
  1. <?php
  2. include("_mysql.php");
  3. include("_settings.php");
  4. include("_functions.php");
  5. ?>
  6.  
  7.  
  8. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  9. <html xmlns="http://www.w3.org/1999/xhtml">
  10. <head>
  11. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
  12. <title>Dokument bez tytu³u</title>
  13. <link rel="stylesheet" type="text/css" href="layout.css" />
  14. <link rel="stylesheet" type="text/css" href="style.css" />
  15. </head>
  16.  
  17. <body>
  18. <div id="logo" align="center">
  19. 	  <table id="invisible-top" width="764" cellspacing="0" cellpadding="0">
  20. 			<tr>
  21. 				  <td><img src="img/top_1.jpg" /></td>
  22. 				<td><img src="img/top_2.jpg" /></td>
  23. 				<td><img src="img/top_3.jpg" /></td>
  24. 				<td><img src="img/top_4.jpg" /></td>
  25. 			</tr>
  26. 	  </table>
  27. </div>
  28.  
  29. <div class="content-wrapper">
  30. <table id="invisible" width="728" cellspacing="0" cellpadding="0">
  31. <tr>
  32. <td width="14"><img src="img/menu_left.gif" width="14" height="46" /></td>
  33. <td id="background-menu">
  34. <div id="navigation">
  35. <ul>
  36. <li><a href="index.php?site=news">Nowo¶ci</a></li>
  37. <li><a href="index.php?site=calendar">Kalendarz</a></li>
  38. <li><a href="index.php?site=squads">Dru¿yny</a></li>
  39. <li><a href="index.php?site=awards">Osi±gniêcia</a></li>
  40. <li><a href="index.php?site=polls">Ankiety</a></li>
  41. <li><a href="index.php?site=server">Serwery</a></li>
  42. <li><a href="index.php?site=files">Media</a></li>
  43. <li><a href="http://forum.digitalprecision.pl/">Forum</a></li>
  44. <li><a href="index.php?site=sponsors">Sponsorzy</a></li>
  45. <li><a href="index.php?site=contact">Kontakt</a></li>
  46. </ul>
  47. </div></td>
  48. <td width="15"><img src="img/menu_right.gif" width="15" height="46" /></td>
  49. </tr>
  50. </table>
  51.  
  52. <table width="728" cellspacing="0" cellpadding="0">
  53. 			<tr id="top">
  54. 				<td>
  55. 					<table width="728" align="center" cellpadding="0" cellspacing="0" id="invisible">
  56. 					 <tr>
  57. 							<td><img src="img/bar_1.gif" /></td>
  58. 							<td><img src="img/bar_2.gif" /></td>
  59. 							<td><img src="img/bar_3.gif" /></td>
  60. 					  </tr>
  61. 						<tr>
  62. 							   <td><img src="img/bar_4.gif" /></td>
  63. 							<td><img src="img/bar_5.jpg" /></td>
  64. 							<td><img src="img/bar_6.gif" /></td>
  65. 						</tr>
  66. 						<tr>
  67. 							   <td><img src="img/bar_7.gif" /></td>
  68. 							<td><img src="img/bar_8.gif" /></td>
  69. 							<td><img src="img/bar_9.gif" /></td>
  70. 						</tr>
  71. 					  </table>				  </td>
  72. 	</tr>
  73. 			 <tr id="top">
  74. 				 <td>
  75. 					 <table id="invisible" width="728" cellspacing="0" cellpadding="0">
  76. 					  <tr>
  77. 							 <td><img src="img/ctab_left.gif" /></td>
  78. 							 <td id="background-3tables" width="210"><? include("sc_headlines.php"); ?></td>
  79. 							 <td><img src="img/ctab_separator.gif" /></td>
  80. 							 <td id="background-3tables" width="281"><span id="results"><? include("sc_results.php"); ?></span></td>
  81. 							<td><img src="img/ctab_separator.gif" /></td>
  82. 							 <td id="background-3tables" width="210"><? include("sc_upcoming.php"); ?> </td>
  83. 							 <td><img src="img/ctab_right.gif" /></td>
  84. 						 </tr>
  85. 				</table>			   </td>
  86.   </tr>
  87. 			<tr id="top">
  88. 				<td>
  89. 					<table id="invisible" width="728" cellspacing="0" cellpadding="0">
  90. 						 <tr>
  91. 							   <td><img src="img/lower_strip_L.gif" /></td>
  92. 							<td><img src="img/lower_strip_1.gif" /></td>
  93. 							<td id="background-3shade" width="560"></td>
  94. 							  <td><img src="img/lower_strip_3.gif" /></td>
  95. 							<td><img src="img/lower_strip_R.gif" /></td>
  96. 					   </tr>
  97. 					   <tr><td colspan="5"><img src="img/shade.jpg" /></td></tr>
  98. 				 </table>			  </td>
  99. 		   </tr>
  100.   </table>
  101. 	 <div class="menu-wrapper">
  102. <img src="img/right_bar.gif" style="margin-left:-16px; z-index:-1;"/>
  103. <? include("login.php"); ?>
  104. <img src="img/right_bar.gif" style="margin-left:-16px; z-index:-1;"/>
  105. <? include("partners.php"); ?>
  106. <img src="img/right_bar.gif" style="margin-left:-16px; z-index:-1;"/>
  107. <? include("poll.php"); ?>
  108. <? include("counter.php"); ?> 
  109. </div>
  110. <div style="margin-left:-8px; padding-left:10px; padding-top:15px;  width:480px">
  111.  <?
  112. 	  if(!isset($site)) $site="news";
  113. 	  //Sichheitslücke beheben
  114. 	  $invalide = array('/','//',':','.');
  115. 	  $site = str_replace($invalide,' ',$site);
  116. 	  if(!file_exists($site.".php")) $site = "news";
  117. 	  include($site.".php");
  118. 	  ?>
  119.  
  120. </div>
  121. <div align="center">
  122. <table cellspacing="0" cellpadding="0" width="300">
  123. <tr>
  124. <td><img src="img/left.gif" /></td>
  125. <td><img src="img/center-L.gif"></td>
  126. <td><img src="img/separator.gif" /></td>
  127. <td><img src="img/center-R.gif" /></td>
  128. <td><img src="img/right.gif" /></td>
  129. </tr></table>
  130. </div>
  131. <div class="push"></div>
  132. </div>
  133.  
  134. <div class="footer" id="gradient-bottom"  align="center">
  135. <table cellspacing="0" cellpadding="0"><tr>
  136. <td><img src="img/shades_L.gif" /></td>
  137. <td><img src="img/shades_1.jpg" /></td>
  138. <td><img src="img/shades_2.jpg" /></td>
  139. <td><img src="img/shades_3.jpg" /></td>
  140. <td><img src="img/shades_R.gif" /></td>
  141. </tr></table>
  142.  
  143. <table cellspacing="0" cellpadding="0">
  144.   <tr>
  145. 	<td><img src="img/bottom_left.gif" /></td>
  146. 	<td><img src="img/bottom_bg.jpg" /></td>
  147. 	<td><img src="img/bottom_right.gif" /></td>
  148.   </tr>
  149.   <tr>
  150. 	<td colspan="3"><img src="img/bottom_glass.gif" /></td>
  151. 	</tr>
  152. </table>
  153. </div>
  154.  
  155. </body>
  156. </html>
[PHP] pobierz, plaintext


layout.css
[HTML] pobierz, plaintext 
  1. @charset "utf-8";
  2. /* CSS Document */
  3.  
  4. *{
  5. margin:0px;
  6. }
  7.  
  8. html, body{
  9. height:100%;
  10. width:100%;
  11. padding:0px;
  12. border:none;
  13. background-color:#E8E8E8;
  14. background-image: url('img/background.gif');
  15. background-repeat: repeat-x;
  16. text-align: center;
  17. }
  18.  
  19. img{
  20. display:block;
  21. }
  22.  
  23. .content-wrapper{
  24. 	margin: 0 auto -30px;
  25. 	min-height:100%;
  26. 	height:auto !important;
  27. 	height:100%;
  28. 	width:728px;
  29. 	background-image:url(img/content_bg.jpg);
  30. 	background-repeat:repeat-y;
  31. 	text-align:center;
  32. }
  33.  
  34. .footer{
  35. height:310px;
  36. text-align:center;
  37.  
  38. }
  39.  
  40. .push{
  41. height:310px;
  42. text-align:center;
  43.  
  44. }
  45.  
  46. .menu-wrapper{
  47. background-image:url(img/right_bg.gif);
  48. background-repeat:repeat-y;
  49. float:right;
  50. width:228px;
  51. min-height:300px;
  52. }
  53.  
  54. #gradient-bottom{
  55. background-image:url(img/bottom_gradient.jpg); background-repeat:repeat-x;
  56. }
  57.  
  58. #background-menu { background-image:url(img/menu_bg.gif); background-repeat:repeat-x; }
  59.  
  60. #background-3tables  { background-image:url(img/ctab_bg.gif); background-repeat:repeat-x; }
  61.  
  62. #background-3shade  { background-image:url(img/lower_strip_bg.gif); background-repeat:repeat-x; }
  63.  
  64. #navigation ul {
  65. text-align:center;
  66. list-style-type:none;
  67. margin:0px;
  68. padding:0px;
  69. }
  70.  
  71. #navigation ul li {
  72. display:inline;
  73. padding:5px;
  74. }
  75.  
  76. #navigation ul li a {
  77. font-family:Arial, Helvetica, sans-serif;
  78. font-size:10px;
  79. text-decoration:none;
  80. color:#FFFFFF;
  81. padding:7px;
  82. }
  83.  
  84. #navigation ul li a:hover {
  85. background-color:#999999;
  86. color:#000000;
  87. padding:7px;
  88. }
[HTML] pobierz, plaintext


style.css
[HTML] pobierz, plaintext 
  1. @charset "utf-8";
  2. /* CSS Document */
  3.  
  4. #results{
  5. color:#444444;
  6. font-family:Geneva, Arial, Helvetica, sans-serif;
  7. font-size:10px;
  8. padding-top:5px;
  9. padding-bottom:5px;
  10. }
  11.  
  12. #stats {
  13. color:#666666;
  14. font-family:Arial, Helvetica, sans-serif;
  15. font-size:10px;
  16. padding-left:10px;
  17. }
  18.  
  19. #stats table{
  20. border:none;
  21. padding-left:10px;
  22. text-align:left;
  23. }
  24.  
  25. t1{
  26. background-color:#CCCCCC;
  27. }
  28.  
  29. t2{
  30. background-color:#F4E7F5;
  31. }
  32.  
  33. #stats table a{
  34. font-weight:bolder;
  35. color:#FF3333;
  36. text-decoration:none;
  37. }
  38.  
  39. #stats table a:hover{
  40. font-weight:bolder;
  41. color:#336699;
  42. }
  43.  
  44. .title {
  45. color:#CCCCCC;
  46. font-size:11px;
  47. font-weight:bold;
  48. }
[HTML] pobierz, plaintext


A obrazki sa w tamtym pliku.
ciepolml
20.06.2008, 15:28:44
Zacz±³bym od tego. Skoro chcesz miec to na DIV, to po co w nich tebelki do tresi nietabelarycznych?
Raczej uló¿ sobie najabrdziej ogolne "przestreznie" strony, wlasnie te DIV. I dopiero pozniej w DIV zaczniesz kombinowac.
Jak masz menu z kolejnymi linkami, to sprawê za³atwia lista <ul> z pozucjami <li> opisana CSS.
Obrazki ³aduj sobie miêdzy <div><img src="...jpg" alt="..."></div>, chyab ze maja byc t³em, to background w stylach.
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.