Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [css] layout HTML Table -> div css
mINA87
post 6.06.2007, 15:23:54
Post #1





Grupa: Zarejestrowani
Postów: 3
Pomógł: 0
Dołączył: 6.06.2007

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

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.
Go to the top of the page
+Quote Post
babejsza
post 6.06.2007, 20:24:20
Post #2





Grupa: Zarejestrowani
Postów: 407
Pomógł: 1
Dołączył: 4.03.2003
Skąd: warszawa

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

[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.
Go to the top of the page
+Quote Post
mINA87
post 8.06.2007, 20:30:11
Post #3





Grupa: Zarejestrowani
Postów: 3
Pomógł: 0
Dołączył: 6.06.2007

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

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



Ten post edytował mINA87 8.06.2007, 20:32:00
Go to the top of the page
+Quote Post
babejsza
post 11.06.2007, 17:27:58
Post #4





Grupa: Zarejestrowani
Postów: 407
Pomógł: 1
Dołączył: 4.03.2003
Skąd: warszawa

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

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
Go to the top of the page
+Quote Post
mINA87
post 11.06.2007, 18:46:57
Post #5





Grupa: Zarejestrowani
Postów: 3
Pomógł: 0
Dołączył: 6.06.2007

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

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.
Go to the top of the page
+Quote Post
« Następny starszy · CSS · 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: 18.06.2025 - 15:23
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn