Pomoc - Szukaj - U¿ytkownicy - Kalendarz
Pe³na wersja: [css] Szablon na DIV-ach - problem z IE
Forum PHP.pl > Forum > Przedszkole
kaznodzieja
12.05.2007, 18:03:45
Witam!

Próbuje siê uczyæ formatowania szablonu stronki za pomoc± znaczników <div> a nie <table>. Stronka z dwona menu dzia³a pod Oper± 9,2 FireFox-em 1,5 ale nie dzia³a po IE 6,0. My¶le ¿e b³±d ten jest spowodowany tym i¿ IE nie akceptuje pewnych znaczników. Proszê o pomoc w ominiêciu tego problemu.

Zamieszczam kod:
plik index.html

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <style type="text/css">@import url("style.css");</style>
  5. </head>
  6. <body>
  7.  
  8. <!-- POCZATEK TABELI-->
  9. <div align="center" >
  10.   <div id="cialo">
  11.     <div id="naglowek">
  12.       <div id="naglowek_srodek">
  13.        Naglowek<br>
  14.  
  15.       </div>
  16.     </div>
  17.  
  18.     <div id="srodek">
  19.       <div style="display:table; width:100%;">
  20.       <!--  <div style="display:table-row; width:100%; height:100%">-->
  21.  
  22.         <div id="menu">
  23.          <div class="navigacja">
  24.         <h1>Menu1</h1>
  25.                 <a href="index.php">Pozycja</a>
  26.                 <a href="index.php">Pozycja</a>
  27.                 <a href="index.php">Pozycja</a>
  28.          </div>
  29.  
  30.          <div class="navigacja">
  31.         <h1>Menu2</h1>
  32.                 <a href="index.php">Pozycja</a>
  33.                 <a href="index.php">Pozycja</a>
  34.                 <a href="index.php">Pozycja</a>
  35.          </div>
  36.           </div>
  37.  
  38.          <div id="strona">
  39. Gló wna Gló wna Gló wna Gló wna Gló wna Gló wna Gló wna Gló wna Gló wna Gló wna Gló wna Gló wna Gló wna Gló wna Gló wna Gló wna Gló wna Gló wna Gló wna Gló wna Gló wna Gló wna Gló wna Gló wna Gló wna Gló wna Gló wna Gló wna Gló wna Gló wna Gló wna Gló wna Gló wna Gló wna Gló wna Gló wna Gló wna Gló wna Gló wna Gló wna Gló wna Gló wna Gló wna Gló wna Gló wna Gló wna Gló wna Gló wna Gló wna Gló wna Gló wna Gló wna Gló wna Gló wna Gló wna Gló wna Gló wna Gló wna Gló wna Gló wna Gló wna Gló wna Gló wna Gló wna Gló wna Gló wna  bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn bnbnb bnb bnb nbn 
  40.  
  41.          </div>
  42.  
  43.      <div id="menu2">
  44.          <div class="navigacja2">
  45.         <h1>Menu1</h1>
  46.                 <a href="index.php">Pozycja</a>
  47.                 <a href="index.php">Pozycja</a>
  48.                 <a href="index.php">Pozycja</a>
  49.        </div>
  50.  
  51.       <div class="navigacja2">
  52.         <h1>Menu2</h1>
  53.                 <a href="index.php">Pozycja</a>
  54.                 <a href="index.php">Pozycja</a>
  55.                 <a href="index.php">Pozycja</a>
  56.       </div>
  57.          </div>
  58.        <!--</div>-->
  59.      </div>
  60.    </div>
  61.  
  62.    <div class="stopka">
  63.   stopka
  64.      </div>
  65.   </div>
  66. </div>
  67. <!-- KONIEC TABELI -->
  68. </body>
  69. </html>
[HTML] pobierz, plaintext


oraz plik style.css(przepraszam ¿e wrzuci³em to w znaczniki php)

[PHP] pobierz, plaintext 
  1. <?php
  2. body{
  3. 	background-image: url(grafika/logo.jpg);
  4. 	background-attachment: fixed;
  5. 	font-family: Verdana, Tahoma, lucida, arial, helvetica, sans-serif;
  6. 	font-size:11px;
  7.  
  8. }
  9.  
  10. #cialo
  11. {
  12. 	background-color:#FFFFFF;
  13. 	width:87%;
  14. 	height:100%;
  15. 	display:table;
  16. 	border: #000000 1px solid;
  17.  
  18. }
  19.  
  20. #naglowek
  21. {
  22. 	background-color:#FFFFAA;
  23. 	height:100px;
  24. 	width:100%;
  25. 	display: table-row;
  26. 	border: #000000 1px solid;
  27. 	text-align:center;
  28.  
  29. }
  30.  
  31. #naglowek_srodek
  32. {
  33.  position: relative;
  34. 	background-color:#AAD4FF;
  35. 	top: 10px;
  36. 	left:10px;
  37. 	right:10px;
  38. 	height:80px;
  39. 	width: 98%;
  40.    text-align:center;
  41. }
  42. #srodek
  43. {	
  44.  
  45. 	display: table-row;
  46. 	height:100%;
  47. 	width:100%;
  48. 	top:20px;
  49. 	text-align:left;
  50.    
  51.  
  52.  
  53. }
  54.  
  55. #menu
  56. {
  57.  
  58. 	display:table-cell;
  59. 	height: 100%;
  60. 	float: left;
  61. 	text-align:left;
  62. 	vertical-align:top;
  63. 	margin: 10px;
  64. 	padding: 10px;
  65.  
  66. }
  67.  
  68. #menu2
  69. {
  70. 	display:table-cell;
  71. 	height: 100%;
  72. 	float: right;
  73. 	text-align:left;
  74. 	vertical-align:top;
  75. 	margin: 10px;
  76. 	padding: 10px;
  77.  
  78.  
  79. }
  80.  
  81. #strona
  82. { 
  83.  
  84. 	display:table-cell;
  85.    
  86.  
  87. 	font-size:12px;
  88.  
  89. 	vertical-align:top;
  90. 	padding: 5px 5px 15px 5px;
  91. 	text-align:left;
  92. margin: 20px;
  93.  border: #000000 1px solid;
  94. }
  95.  
  96. div.stopka
  97. {
  98. 	display: table-row;
  99. 	vertical-align:middle;
  100. 	height:20px;
  101. 	width:100%;
  102. 	text-align:center;
  103. 	font-size: smaller;
  104. 	border: #000000 1px solid;
  105. }
  106.  
  107.  
  108.  
  109.  
  110. .navigacja h1 {
  111.  
  112. 	display: block;
  113. 	background-image: url("grafika/menu.jpg");
  114. 	background-repeat:	 repeat-x;
  115. 	font-size:12px;
  116. 	color:#FFFFFF; 
  117. 	font-weight: bold;
  118. 	width: 150px; 
  119. 	height: 25px;
  120. 	padding: 5px 0px 5px 5px;
  121. 	border: 0px solid #ccc;
  122. 	left:10px;
  123.  
  124. }
  125.  
  126. .navigacja2 h1 {
  127.  
  128. 	display: block;
  129. 	background-image: url("grafika/menu.jpg");
  130. 	background-repeat:	 repeat-x;
  131. 	font-size:12px;
  132. 	color:#FFFFFF; 
  133. 	font-weight: bold;
  134. 	width: 150px; 
  135. 	height: 25px;
  136. 	padding: 5px 0px 5px 5px;
  137. 	border: 0px solid #ccc;
  138. 	right:-10px;
  139. }
  140.  
  141.  
  142. .navigacja a, a:visited{
  143.    left:10px;
  144.  
  145. 	display: block;
  146. 	top: -10px;
  147. 	font-size: 11px;
  148. 	padding: 5px;
  149. 	width: 150px; 
  150. 	height: 15px;
  151. 	border-bottom: 1px solid #ccc;
  152. 	color: #0055FF;
  153. 	padding: 5px 0px 5px 5px;
  154. 	text-decoration: none;
  155. 	background-color: #ebebeb;
  156.  
  157. }
  158.  
  159. .navigacja2 a, a:visited{
  160.    right:10px;
  161.    
  162.  
  163. 	display: block;
  164. 	top: -10px;
  165. 	font-size: 11px;
  166. 	padding: 5px;
  167. 	width: 150px;
  168. 	height: 15px;
  169. 	border-bottom: 1px solid #ccc;
  170. 	color: #0055FF;
  171. 	padding: 5px 0px 5px 5px;
  172. 	text-decoration: none;
  173. 	background-color: #ebebeb;
  174.  
  175. }
  176.  
  177.  
  178.  
  179. .navigacja a:hover, a:active{
  180. 	left:10px;
  181.  
  182. 	display: block;
  183. 	top: -10px;
  184. 	font-size: 11px;
  185. 	padding: 5px 0px 5px 5px;
  186. 	width: 150px;
  187. 	border-bottom: 1px solid #ccc;
  188. 	background-color: #fff;
  189. 	color: #000000;
  190. 	text-decoration: underline;
  191.  
  192. }
  193.  
  194.  
  195. .navigacja2 a:hover, a:active{
  196. 	right:10px;
  197.  
  198. 	display: block;
  199. 	top: -10px;
  200. 	font-size: 11px;
  201. 	padding: 5px 0px 5px 5px;
  202. 	 width: 150px;
  203. 	border-bottom: 1px solid #ccc;
  204. 	background-color: #fff;
  205. 	color: #000000;
  206. 	text-decoration: underline;
  207.  
  208. }
  209. ?>
[PHP] pobierz, plaintext
cyngiel
12.05.2007, 22:38:23
jak na moje to ¼le siê za to zabra³e¶
zrobi³e¶ co¶ jak tabela tylko znacznikami div- zdecydowanie za du¿o nawalone divóv i niepotrzebnie jeden w drugim siedzi.
zeby nie by³o, nie zag³êbia³em siê w kod, ale pisze co mi siê w oczy rzuca

zobacz koniecznie ten link
http://css.maxdesign.com.au/floatutorial/tutorial0916.htm
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.