Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: automatyczna wysokość contentu
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
mynio
9.06.2006, 17:29:22
witam,
pracuję nad layoutem i wszystko jak narazie jest ok poza tym, że #contener nie może przyjąć wysokości adekwatnej do ilości tekstu, który się w nim znajduję, widać to odrazu na rodz. 1024x768, zależy mi by sobie jakoś z tym poradzić. Cała reszta jest OK!
z góry dziękuję za pomoc!

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3.  
  4. <!-- copyright Š 2006 xx' -->
  5.  
  6.  
  7. <html xmlns="http://www.w3.org/1999/xhtml" lang="pl">
  8.  
  9. <head  profile="http://gmpg.org/xfn/11">
  10.  
  11. <style type="text/css">
  12. html, body {
  13. height: 100%;
  14. margin: 0;
  15. padding: 0;
  16. background-color: #3e474d;
  17. }
  18.  
  19. html, body, #all {
  20. min-height: 100%;
  21. width: 100%;
  22. height: 100%;
  23. }
  24.  
  25. html>body #all {
  26. margin: auto;
  27. height: auto;
  28. min-height: 100%;
  29. }
  30.  
  31. #all {
  32. position: relative;
  33. top: 0;
  34. left: 0;
  35. }
  36.  
  37. #header {
  38. width: 100%;
  39. height: 200px;
  40. background-color: #262420;
  41. background-image: url('images/hd.gif');
  42. background-repeat: repeat-x;
  43. text-align: left;
  44. border-bottom: 1px solid #ffffff;
  45. }
  46. #header .title {
  47. margin-left: 3em;
  48. font-family: Verdana, Arial, sans-serif;
  49. font-weight: bold;
  50. color: #ffffff;
  51. }
  52.  
  53. #contener {
  54. margin: 2em 3em 2em 3em;
  55. }
  56.  
  57. #footer {
  58. position: absolute;
  59. bottom: 0;
  60. width: 100%;
  61. height: 200px;
  62. border-top: 1px solid #ffffff;
  63. background-image: url('images/ft.gif');
  64. background-repeat: repeat-x;
  65. }
  66. #footer p {
  67. margin: 0.5em 0 0.5em 0;
  68. padding: 0;
  69. text-align: center;
  70. }
  71. </style>
  72.  
  73. </head>
  74.  
  75. <body>
  76.  
  77. <div id="all">
  78.  
  79. <div id="header">
  80. 	<div class="title">
  81. 	#header .title
  82. 	</div>
  83. </div>
  84.  
  85. <div id="contener">
  86. #contener<br />
  87. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
  88. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  89. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
  90.  
  91. </div>
  92.  
  93. <div id="footer">
  94. <p>#footer //steady</p>
  95. </div>
  96.  
  97. </div>
  98.  
  99. </body>
  100.  
  101. </html>
[HTML] pobierz, plaintext


dobra trochę lepiej poprawiłem co nieco kod i efekt już jest prawie taki jaki bym chciał teraz tylko zależy mi żeby contener był dopasowany do ilości tekstu, obecnie jest dobrze pod wszystkimi rozdzielczościami ale nadal jest problem gdy tekst w contenerze jest za krótki !
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3.  
  4. <!-- copyright Š 2006 xx' -->
  5.  
  6.  
  7. <html xmlns="http://www.w3.org/1999/xhtml" lang="pl">
  8.  
  9. <head profile="http://gmpg.org/xfn/11">
  10.  
  11. <style type="text/css">
  12. html {
  13. height: 100%;
  14. }
  15.  
  16. body{
  17. height: 100%;
  18. margin: 0;
  19. padding: 0;
  20. background-color: #3e474d;
  21. }
  22.  
  23. #page {
  24. width: 100%;
  25. margin: 0 auto;
  26. min-height: 100%;
  27. text-align: left;
  28. }
  29.  
  30. * html #page {
  31. height: 100%;
  32. }
  33.  
  34. #nonFooter {
  35. position: relative;
  36. min-height: 100%;
  37. }
  38.  
  39. * html #nonFooter{
  40. height: 100%;
  41. }
  42.  
  43. #header {
  44. width: 100%;
  45. height: 200px;
  46. background-color: #262420;
  47. background-image: url('images/hd.gif');
  48. background-repeat: repeat-x;
  49. text-align: left;
  50. border-bottom: 1px solid #ffffff;
  51. }
  52. #header .title {
  53. margin-left: 3em;
  54. font-family: Verdana, Arial, sans-serif;
  55. font-weight: bold;
  56. color: #ffffff;
  57. }
  58.  
  59. #contener {
  60. padding: 2em 3em 2em 3em;
  61. }
  62.  
  63. #footer{
  64. position: relative;
  65. height: 200px;
  66. border-top: 1px solid #ffffff;
  67. background-image: url('images/ft.gif');
  68. background-repeat: repeat-x;
  69. margin: 0 auto 0 auto;
  70. }
  71. #footer p {
  72. margin: 0.5em 0 0.5em 0;
  73. padding: 0;
  74. text-align: center;
  75. }
  76.  
  77. * html #footer {
  78. margin-top: 0;
  79. }
  80. </style>
  81.  
  82. </head>
  83.  
  84. <body>
  85.  
  86. <div id="page">
  87. 	<div id="nonFooter">
  88. 		<div id="header">
  89. 			<div class="title">
  90. 			#header .title
  91. 			</div>
  92. 		</div>
  93.  
  94. 	<div id="contener">
  95. #contener<br />
  96. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
  97. 	</div>
  98.  
  99. 	</div>
  100.  
  101. </div>
  102.  
  103. 	<div id="footer">
  104. 		<p>#footer //steady</p>
  105. 	</div>
  106.  
  107. </body>
  108.  
  109. </html>
[HTML] pobierz, plaintext
AcidBurnt
9.06.2006, 18:42:34
sprobuj pod contener dac:
[HTML] pobierz, plaintext 
  1. <div style="clear:both"></div>
[HTML] pobierz, plaintext


czesto mi to pomagało w takich sytuacjach

pozdr.
mynio
10.06.2006, 10:03:15
no niestety nie pomogło, nadal kontener jest takich samych rozmiarów minimalnych [gdy jest więcej tekstu wszystko jest OK] ale gdy jest np jedna linijka tekstu to kontener się nie 'zwija'. Może poprostu tak musi być? Bo ja wtedy wyglądała by strona przy większych rozdzielczościach ?

pzdr

ok zrobiłem i wszystko wygląda tak jak chciałem guitar.gif 
[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 xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head><title>Home</title>
  4. <link rel="stylesheet" type="text/css" href="files/style.css" />
  5.  
  6. </head>
  7.  
  8. <body>
  9. 		<div id="page">
  10. <!-- START nonFooter -->		
  11. 			<div id="nonFooter">
  12.  
  13. <!-- START header -->
  14. 				<div id="header">
  15. 					<div class="title">
  16. 							#header .title
  17. 					</div>
  18. 				</div>
  19. <!-- END header -->
  20.  
  21. <!-- START content -->
  22. 				<div id="content">
  23. 				<div class="main">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
  24.  
  25.  
  26.  
  27. 				</div>
  28.  
  29. 				</div>
  30. <!-- END content -->
  31.  
  32. 			</div>
  33. <!-- END nonFooter -->
  34.  
  35. 		</div>
  36. <!-- END page -->
  37.  
  38. <!-- START footer -->
  39. 	<div id="footer">
  40. 		#footer
  41.  
  42. 	</div>
  43.  
  44. <!-- END footer -->
  45.  
  46. </body>
  47. </html>
[HTML] pobierz, plaintext


css
[HTML] pobierz, plaintext 
  1. *{
  2. margin: 0;
  3. padding: 0;
  4. }
  5. html	{
  6. height: 100%;
  7. }
  8.  
  9. body {
  10. background-color: #3e474d;
  11. text-align: center;
  12. height: 100%;
  13. }
  14.  
  15. #page {
  16. width: 100%;
  17. margin: 0 auto;
  18. min-height: 100%;
  19. text-align: left;
  20. }
  21.  
  22. * html #page {
  23. height: 100%;
  24. }
  25.  
  26. #nonFooter {
  27. position: relative;
  28. min-height: 100%;
  29. }
  30.  
  31. * html #nonFooter {
  32. height: 100%;
  33. }
  34.  
  35.  
  36. /* HEADER */
  37.  
  38. #header {
  39. width: 100%;
  40. height: 200px;
  41. margin: 0;
  42. background-color: #3e474d;
  43. background-image: url('../images/hd.gif');
  44. background-repeat: repeat-x;
  45. border-bottom: 1px solid #ffffff;
  46. }
  47. #header .title {
  48. margin-left: 3em;
  49. font-family: Verdana, Arial, sans-serif;
  50. font-weight: bold;
  51. color: #ffffff;
  52. }
  53. /* CONTENT */
  54.  
  55. #content {
  56. padding: 2em 3em 2em 3em;
  57. }
  58. #content .main {
  59. margin-bottom: 100px;;
  60. }
  61. /* FOOTER */
  62.  
  63. #footer {
  64. width: 100%;
  65. height: 200px;
  66. border-top: 1px solid #ffffff;
  67. background-color: #3e474d;
  68. background-image: url('../images/ft.gif');
  69. background-repeat: repeat-x;
  70. position: relative;
  71. margin: -7.5em auto 0 auto;
  72. }
  73.  
  74. * html #footer {
  75. margin-top: -7.4em;
  76. }
[HTML] pobierz, plaintext
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.