Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [css] layout HTML Table -> div css
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
mINA87
6.06.2007, 15:23:54
Witam!
Być może mam dosyć głupie pytanie i oczywiste dla wielu z was, ale niestety jestem n00b jeśli chodzi o formatowanie CSS i ciągle żyję w świecie <table> tongue.gif Mój problem przedstawia się następująco - potrzebuję stworzyć layout analogiczny do takiego :
Kod
<table width="100%">
<tr>
    <td width="200"> Left </td>
    <td width="5"> Fixed padding </td>
    <td width="*"> Main content </td>
</tr>
<tr>
    <td colspan="3"> Footer </td>
</tr>
</table>

reprezentowany jednak przez div'y i wypozycjonowany css'em. Problem jest taki, że jeśli komórki left lub content wypozycjonuje w sposób absolutny, to ich wielkość nie zostanie uwzględniona przy renderowaniu strony - spowoduje to, że div footer będzie wypozycjonowany tylko względem drugiej części i prawdopodobnie "wjedzie" na pierwszą. Niestety wielkość Left i Main content zmienia się w sposób dynamiczny i nie mogę jednoznacznie określić która z komórek jest w danym momencie wyższa. Udało mi się to jakoś rozwiązać wykorzystując float (bodajże na elemencie Left) i wszystko byłoby fajnie, gdyby nie IE... Co najdziwniejsze - pod Operą i FF wszystko było ok, pod IE też... Do czasu.. Gdy w komórce Main content znalazła się jakakolwiek tabelka, to strona rozjeżdżała się totalnie, zamiast renderować tabelkę w Main content obok Left, IE (wersja 6.0 i starsze) zostawiał to miejsce puste i renderował tabelkę na wysokości kończącej Left.. Bardzo dziwnie to wyglądało i niestety na chwilę obecną nie jestem w stanie odtworzyć tej sytuacji, bo nie pamiętam już tego kodu. Czy macie może jakieś inne propozycje? Czy da się wypozycjonować elementy absolutnie tak by przy renderingu strony ich wielkości zostały uwzględnione w DOMie (pomijając pozycjonowanie relatywne, które mnie niestety nie urządza)? Taka sytuacja ma chyba miejsce w lay'u Monobook z Wikipedii, jednak trochę się pogubiłem i nie potrafię odtworzyć sytuacji stamtąd.
Pozdrowionka i z góry fnx za zainteresowanie.
babejsza
6.06.2007, 20:24:20 
[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 lang="pl">
  3.  
  4. 	<head>
  5. 		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. 		<title></title>
  7. 		<style type="text/css">
  8. 		#left {float: left; width: 200px; padding: 0 5px 0 0; background: red}
  9. 		#right {background: green; margin: 0 0 0 205px}
  10. 		#footer {background: blue;}
  11. 		</style>
  12. 	</head>
  13.  
  14. 	<body>
  15. 		<div id="conteiner">
  16.  
  17. 		 	<div id="left">left</div>
  18. 			<div id="right">right<br><br></div>
  19. 		</div>
  20. 		<div id="footer">footer</div>
  21.  
  22. 	</body>
  23.  
  24. </html>
[HTML] pobierz, plaintext


Jakoś nie miałem siły przeczytać całego Twojego pytania, ale chyba o to Ci chodziło. Jeżeli nie to napisz jeszcze raz, ale postaraj się lepiej zobrazować problem.
mINA87
8.06.2007, 20:30:11
Dzięki za odpowiedź, ale zobacz proszę jak taki kod renderuje się w IE - właśnie to jest ta problematyczna sytuacja o której mówiłem:
[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 lang="pl">
  3.  
  4. 	<head>
  5. 		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. 		<title></title>
  7. 		<style type="text/css">
  8. 		#left {float: left; width: 200px; padding: 0 5px 0 0; background: red}
  9. 		#right {background: green; margin: 0 0 0 205px}
  10. 		#footer {background: blue;}
  11. 		</style>
  12. 	</head>
  13.  
  14. 	<body>
  15. 		<div id="conteiner">
  16.  
  17. 		 	<div id="left">left
  18. 				<br/> line 2
  19. 				<br/> line 3
  20. 				<br/> line 4
  21. 				<br/> line 5
  22. 				<br/> line 6
  23. 			</div>
  24. 			<div id="right">right<br><br>
  25. 				<table width="100%" valign="top">
  26. <tr><td width="20%">asg</td><td width="20%">ds</td><td width="30%"></td><td></td></tr>
  27. <tr><td width="20%">asg</td><td width="20%">ds</td><td width="30%"></td><td></td></tr>
  28. <tr><td width="20%">asg</td><td width="20%">ds</td><td width="30%"></td><td></td></tr>
  29. <tr><td width="20%">asg</td><td width="20%">ds</td><td width="30%"></td><td></td></tr>
  30. <tr><td width="20%">asg</td><td width="20%">ds</td><td width="30%"></td><td></td></tr>
  31. <tr><td width="20%">asg</td><td width="20%">ds</td><td width="30%"></td><td></td></tr>
  32. </table>
  33. 			</div>
  34. 		</div>
  35. 		<div id="footer">footer</div>
  36.  
  37. 	</body>
  38.  
  39. </html>
[HTML] pobierz, plaintext

babejsza
11.06.2007, 17:27:58
Jakbyś spojrzał do validatora to byś wiedział co jest nie tak ....


[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 lang="pl">
  3.  
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <title></title>
  7. <style type="text/css">		
  8. 	#left {float: left; width: 200px; padding: 0 5px 0 0; background: red}		
  9. 	#right {background: green; margin: 0 0 0 205px}	
  10. 	#right table {margin: 20px 0 0 0; width: 99%}
  11. 	#right table td {width: 20px}
  12.  
  13. 	#footer {background: blue;}		
  14. </style>
  15. </head>
  16.  
  17. <body>
  18.  
  19. <div id="conteiner">
  20. 	<div id="left">
  21. 	left
  22. 		<ul>
  23. 			<li>line 2</li>
  24. 			<li>line 3</li>
  25. 			<li>line 4</li>
  26. 			<li>line 5</li>
  27. 			<li>line 6</li>
  28. 		</ul>
  29. 	</div>
  30. 	<div id="right">
  31. 		right
  32. 		<table cellpadding="0" cellspacing="0">
  33. 			<tr>
  34. 				<td>asg</td>
  35. 				<td class="width30">ds</td>
  36. 				<td></td>
  37. 				<td></td>
  38. 			</tr>
  39. 			<tr>
  40. 				<td>asg</td>
  41. 				<td>ds</td>
  42. 				<td></td>
  43. 				<td></td>
  44. 			</tr>
  45. 			<tr>
  46. 				<td>asg</td>
  47. 				<td>ds</td>
  48. 				<td></td>
  49. 				<td></td>
  50. 			</tr>
  51. 			<tr>
  52. 				<td>asg</td>
  53. 				<td>ds</td>
  54. 				<td></td>
  55. 				<td></td>
  56. 			</tr>
  57. 			<tr>
  58. 				<td>asg</td>
  59. 				<td>ds</td>
  60. 				<td></td>
  61. 				<td></td>
  62. 			</tr>
  63. 			<tr>
  64. 				<td>asg</td>
  65. 				<td>ds</td>
  66. 				<td></td>
  67. 				<td></td>
  68. 			</tr>
  69. 		</table>
  70. 	</div>
  71. </div>
  72. <div id="footer">
  73. 	footer</div>
  74.  
  75. </body>
  76.  
  77. </html>
[HTML] pobierz, plaintext
mINA87
11.06.2007, 18:46:57
Dzięki za zainteresowanie. Pierwsze co robiłem to rzuciłem kod do validatora jak pierwszy raz napotkałem na ten problem i wydawało mi się że wszystkie "większe" błędy poprawiłem. Ponadto wydaje mi się, że w bardzo okrojonym przypadku - same tagi, bez żadnych parametrów też się sypało. Aktualnie mam pod ręką tylko IE7 który renderuje kod poprawnie, więc zapytam czy masz problemy z pierwszym kodem, a po przerzuceniu się na formatowanie wielkości komórek w CSSie jest ok? Dzięki i pozdro.
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.