Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [css] Szablon na DIV-ach - problem z IE
kaznodzieja
post 12.05.2007, 18:03:45
Post #1





Grupa: Zarejestrowani
Postów: 94
Pomógł: 1
Dołączył: 28.01.2007

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

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


--------------------
"Nie dyskutuj z debilem, bo najpierw sprowadzi Cię do swego poziomu a potem pokona doświadczeniem"

http://vlaho.pl
http://foto.vlaho.pl
Go to the top of the page
+Quote Post
cyngiel
post 12.05.2007, 22:38:23
Post #2





Grupa: Zarejestrowani
Postów: 101
Pomógł: 1
Dołączył: 28.12.2003
Skąd: Gdańsk

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

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


--------------------
Dom na kaszubach
Internetowa stolica kaszub
Silniki motocyklowe
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: 12.06.2025 - 17:35
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn