Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> automatyczna wysokość contentu, przy statycznym wpisie dziala, ale automatycznie nie chce
mynio
post 9.06.2006, 17:29:22
Post #1





Grupa: Zarejestrowani
Postów: 34
Pomógł: 0
Dołączył: 25.03.2005

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

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
Go to the top of the page
+Quote Post
AcidBurnt
post 9.06.2006, 18:42:34
Post #2





Grupa: Zarejestrowani
Postów: 215
Pomógł: 1
Dołączył: 13.04.2003
Skąd: z ławki przed blokiem

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

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.
Go to the top of the page
+Quote Post
mynio
post 10.06.2006, 10:03:15
Post #3





Grupa: Zarejestrowani
Postów: 34
Pomógł: 0
Dołączył: 25.03.2005

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

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
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: 26.06.2025 - 03:04
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn