Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Lewa kolumna 200px prawa - cała reszta
Forum PHP.pl > Forum > Przedszkole
konrados
12.11.2010, 18:20:49
Witam,

Domyślam się, że problem był wałkowany wielokrotnie, ale jakoś tak ani wyszukiwarka tego forum ani googlowa nic mi sensownego nie pokazuje, bo też i po prostu nie wiem co w nią wpisać.

Chodzi o to, że chciałbym aby w layoucie lewa kolumna miała 200px a prawa - całą dostępną resztę (w x).

Tu jest stronka: http://jsfiddle.net/b4mQc/

A tu mój dotychczasowy, wstępny kod:

[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. 	<style>
  6. 	body {
  7. 		margin:20x;
  8. 		border:1px solid red;
  9. 	}
  10. 	.page_top{
  11. 		background-color: #999;
  12. 	}
  13. 	.page_contents_left{
  14. 		width:200px;
  15. 		background-color: #aaa;
  16. 		float:left;
  17. 	}
  18. 	.page_contents_right{
  19. 		/*width:100%;*/
  20. 		background-color: #ccc;
  21. 		float:left;
  22. 	}
  23.  
  24. 	.page_footer{
  25. 		clear:both;
  26. 		width:100%;
  27. 		background-color: #ddd;
  28. 	}
  29. 	</style>
  30. </head>
  31.  
  32. <body>
  33. <div class="page_top">
  34. 	To jest top, ma zajmować 100% przestrzeni w x i to się udało
  35. </div>
  36.  
  37. <div class="page_contents_left">
  38. 	To jest left, ma zajmować 200px przestrzeni w x - to też się udało
  39. </div>
  40.  
  41. <div class="page_contents_right">
  42. 	To jest right, ma zajmować <b>pozostałą</b> przestrzeń w x<br/>
  43. 	To jest right, ma zajmować <b>pozostałą</b> przestrzeń w x<br/>
  44. 	To jest right, ma zajmować <b>pozostałą</b> przestrzeń w x<br/>
  45. </div>
  46.  
  47. <div class="page_footer">
  48. 	a to jest footer, też działa.
  49. </div>
  50. </body>
  51. </html>  
[HTML] pobierz, plaintext


Jak to zrobić? Przy czym page_contents_right ma zajmować swoją przestrzeń (pozostałą) niezależnie od treści - tam może nawet nic nie być.
Daiquiri
12.11.2010, 18:35:52
.page_contents_right i .page_contents_left wrzuć w jednego diva i nadaj mu wartość width: 100%, dodatkowo ustaw width: 100% dla .page_contents_right (a w zasadzie usuń komentarz) smile.gif.
konrados
12.11.2010, 19:01:33
To nic nie dało, spójrz:
http://jsfiddle.net/b4mQc/

I przy okazji (po raz pierwszy korzystam z tego serwisu) chyba nie tylko ja mogę to edytować, jeśli tak to to fajny serwis smile.gif jest.
chemikpil
12.11.2010, 19:14:40
Hmm... z tego co ja pamiętam to 100% = 100% a nie reszcie wolnej przestrzeni. Musisz nadać mu szerokość równą pozostałej przestrzeni.
konrados
12.11.2010, 19:17:03
Cytat
Musisz nadać mu szerokość równą pozostałej przestrzeni.

Tyle to ja umiem. left=70%, right=30% i działa.
Mi chodzi właśnie o to, by right wzięła całą dostępną szerokość, przy czym left musi być określony w pixelach.
Daiquiri
12.11.2010, 19:19:30
Działa, działa: 
[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML>
  2. <html><head>
  3.  
  4.  
  5. 	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6. 	<style>
  7. 	body {
  8. 		margin:20x;
  9. 		border:1px solid red;
  10. 	}
  11. 	.page_top{
  12. 		background-color: #999;
  13. 	}
  14. 	.page_contents_left{
  15. 		width:200px;
  16. 		background-color: #aaa;
  17. 		float:left;
  18. 	}
  19. 	.page_contents_right{
  20. 		/*width:100%;*/
  21. 		background-color: #ccc;
  22. 		width: 100%;
  23. 	}
  24.  
  25. 	.page_footer{
  26. 		clear:both;
  27. 		width:100%;
  28. 		background-color: #ddd;
  29. 	}
  30.  
  31. 	#holder {
  32. 		width: 100%;
  33. 	}
  34. 	</style>
  35. </head><body>
  36.  
  37.  
  38. <div class="page_top">
  39. 	To jest top, ma zajmować 100% przestrzeni w x i to się udało
  40. </div>
  41.  
  42. <div id="holder">
  43.         <div class="page_contents_left">
  44.             To jest left, ma zajmować 200px przestrzeni w x - to też się udało
  45.         </div>
  46.  
  47.         <div class="page_contents_right">
  48.             To jest right, ma zajmować <b>pozostałą</b> przestrzeń w x<br>
  49.             To jest right, ma zajmować <b>pozostałą</b> przestrzeń w x<br>
  50.             To jest right, ma zajmować <b>pozostałą</b> przestrzeń w x<br>
  51.         </div>
  52.  
  53.   </div>
  54.  
  55. <div class="page_footer">
  56. 	a to jest footer, też działa.
  57. </div>
  58.  
  59.  
  60. </body></html>
[HTML] pobierz, plaintext
konrados
12.11.2010, 19:36:52
W moim kodzie page_right też miał float:left (podobnie jak page_left). I dlatego nie działało, choć nie wiem czemu. Co oznacza, że muszę wrócić do książki "css dla debili" smile.gif

Tak więc ok, prawie działa - ale jest kolejny problem - page_right jeśli jest wyższa niż page_left, zaczyna otaczać od dołu page_left.

Aktualnie to wygląda tak: http://jsfiddle.net/b4mQc/
Co mam z tym zrobić?

Zastanawiam się, czy aby tego wszystkiego nie zrobić z table, chyba, że na powyższy problem jest jakieś proste rozwiązanie.
chemikpil
12.11.2010, 22:09:09
Ok to lekka poprawa kodu @Daiquiri
[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML>
  2. <html><head>
  3.  
  4.  
  5. 	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6. 	<style>
  7. 	body {
  8. 		margin:20x;
  9. 		border:1px solid red;
  10. 	}
  11. 	.page_top{
  12. 		background-color: #999;
  13. 	}
  14. 	.page_contents_left{
  15. 		width:200px;
  16. 		background-color: #aaa;
  17. 		float:left;
  18. 	}
  19. 	.page_contents_right{
  20. 		background-color: #ccc;
  21. 		width: 100%;
  22. 	}
  23.  
  24. 	.page_contents_right .tresc{
  25. 		margin: 0 0 0 200px;
  26. 		padding: 5px;
  27. 	}
  28.  
  29. 	.page_footer{
  30. 		clear:both;
  31. 		width:100%;
  32. 		background-color: #ddd;
  33. 	}
  34.  
  35. 	#holder {
  36. 		width: 100%;
  37. 	}
  38. 	</style>
  39. </head><body>
  40.  
  41.  
  42. <div class="page_top">
  43. 	To jest top, ma zajmować 100% przestrzeni w x i to się udało
  44. </div>
  45.  
  46. <div id="holder">
  47.         <div class="page_contents_left">
  48.             To jest left, ma zajmować 200px przestrzeni w x - to też się udało
  49.         </div>
  50.  
  51.         <div class="page_contents_right">
  52.             <div class="tresc">To jest right, ma zajmować <b>pozostałą</b> przestrzeń w x<br>
  53.             To jest right, ma zajmować <b>pozostałą</b> przestrzeń w x<br>
  54.             To jest right, ma zajmować <b>pozostałą</b> przestrzeń w x<br>
  55. 			To jest right, ma zajmować <b>pozostałą</b> przestrzeń w x<br>
  56. 			To jest right, ma zajmować <b>pozostałą</b> przestrzeń w x<br>
  57. 			To jest right, ma zajmować <b>pozostałą</b> przestrzeń w x<br>
  58. 			To jest right, ma zajmować <b>pozostałą</b> przestrzeń w x<br>
  59. 			To jest right, ma zajmować <b>pozostałą</b> przestrzeń w x<br>
  60. 			</div>
  61.         </div>
  62.  
  63.   </div>
  64.  
  65. <div class="page_footer">
  66. 	a to jest footer, też działa.
  67. </div>
  68.  
  69.  
  70. </body></html>
[HTML] pobierz, plaintext


Rozumiesz idee??
Poprawiłem tez tutaj więc możesz sprawdzić : http://jsfiddle.net/b4mQc/
konrados
13.11.2010, 11:48:40
OK, dzięki wam!
Ale przy tym stopniu skomplikowania myślę, że table, choć tak krytykowane, jest lepsze smile.gif
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.