login  Naam:   Wachtwoord: 
Registreer je!
 Forum

postitioning: dynamische container

Offline fluxxoid - 21/01/2005 16:16 (laatste wijziging 21/01/2005 16:20)
Avatar van fluxxoidHTML interesse hi,

k heb intussen 2 kolommen gemaakt met div's. de linkerkolom is een nieuwslijn, die via php berichten uit n databank ophaalt. na verloop van tijd zal de content dus 'langer' worden en de footer 'overflowen'.

is er een manier om de hoogte van de container zo in te stellen dat hij mee groeit met de content? de hoogte een vaste waarde geven lijkt me niet echt een oplossing.. heb t geprobeerd met {overflow: ... }, maar geen van de 4 mogelijkheden doet wat ik wil.

hieronder nog es mn stylesheet..
thanks,

php code - Bekijk de code zonder highlighting - Klap code in 
  1. -------------
  2.  
  3. body {
  4. 	background-color: #ffffff;
  5. 	text-align: center;
  6. 	margin: 0;
  7. }
  8.  
  9. /*////////////////////////////////////////////////////////////////////// */
  10. /* ///////////////////////////// id's //////////////////////////////// */
  11. /* ///////////////////////////////////////////////////////////////////// */
  12.  
  13. #container {
  14. 	position: relative;
  15. 	margin: 0 auto;
  16. 	width: 760px;
  17. }
  18. #headertop {
  19. 	text-align: center;
  20. 	height: 10px;
  21. 	width: 760px;
  22.  
  23. 	background: #33CCFF url(http://www.getbasic.be/IMG/elements/headertop.gif) no-repeat bottom center;
  24. }
  25. #headermain {
  26. 	text-align: center;
  27. 	height: 40px;
  28. 	width: 760px;
  29. 	background: #996633 url(http://www.getbasic.be/IMG/elements/headermain.gif) no-repeat bottom center;
  30. }
  31. #headerbottom {
  32. 	text-align: center;
  33. 	height: 10px;
  34. 	width: 760px;
  35. 	background: #33CCFF url(http://www.getbasic.be/IMG/elements/headerbottom.gif) no-repeat bottom center;
  36. }
  37. #navigbar {
  38. 	text-align: left;
  39.  
  40. 	width: 760px;
  41.  
  42. 	background-color: #f0f0f0;
  43. 	/*border-bottom-color: #cccccc;
  44. 	border-bottom-style: solid;
  45. 	border-bottom-width: thin;*/
  46. }
  47. #content {
  48. 	position: relative;
  49. 	font-family: Arial, Verdana, sans-serif;
  50. 	color: #000000;
  51. 	width: 760px;
  52. 	margin-bottom: 10px;
  53. 	overflow: scroll;
  54. 	background: #ffffff url(http://www.getbasic.be/IMG/elements/logo_guy_background.gif) no-repeat center;
  55. 	background-attachment: fixed;
  56. }
  57. #disclaimer {
  58. 	text-align: center;
  59. 	height: 20px;
  60. 	width: 760px;
  61.  
  62. 	background-color: #f0f0f0;
  63. 	border-top-color: #cccccc;
  64. 	border-top-style: solid;
  65. 	border-top-width: thin;
  66. }
  67. #bottom {
  68. 	text-align: center;
  69. 	height: 10px;
  70. 	width: 760px;
  71. 	background: #33CCFF url(http://www.getbasic.be/IMG/elements/bottom.gif) no-repeat bottom center;
  72. }
  73. #navigtekst {
  74. 	font-family: Arial, Verdana, sans-serif;
  75. 	font-size: 80%;
  76. 	font-weight: bold;
  77. 	background-color: #f0f0f0;
  78. 	margin-top: 0px;	
  79. 	margin-left: 3px;
  80. 	margin-bottom: 2px;
  81. 	padding-top: 3px;
  82. }
  83. #news {
  84. 	position: absolute;
  85. 	width: 400px;
  86. 	left: 3px;
  87. 	top: 0px;
  88. }
  89. #leftcolumn {
  90. 	position: absolute;
  91. 	width: 330px;
  92. 	background: #ffffff;
  93. 	left: 410px;
  94. 	top: 0px;
  95. }
  96.  
  97. /*////////////////////////////////////////////////////////////////////// */
  98. /* ///////////////////////////// links ////////////////////////////// */
  99. /* ///////////////////////////////////////////////////////////////////// */
  100.  
  101. a:link {
  102. 	color: #33CCFF;
  103. 	text-decoration: none;
  104. }
  105. a:visited {
  106. 	color: #33CCFF;
  107. 	text-decoration: none;
  108. }
  109. a:hover, a:active {
  110. 	color: #996633;
  111. 	text-decoration: none;
  112. }
  113.  
  114. /*/////////////////////////////////////////////////////////////////////// */
  115. /* ///////////////////////////// classes ///////////////////////// */
  116. /* ///////////////////////////////////////////////////////////////////// */
  117.  
  118. .newsheader {
  119. 	margin-left: 3px;
  120. 	text-align: left;
  121. 	font-size: 110%;
  122. 	font-weight: bold;
  123. 	border-bottom-color: #cccccc;
  124. 	border-bottom-style: solid;
  125. 	border-bottom-width: thin;
  126. 	margin-bottom: 0px;	
  127. }
  128. .newsbody {
  129. 	margin-left: 3px;
  130. 	margin-top: 4px;
  131. 	text-align: left;
  132. 	font-size: 90%;
  133. 	font-weight: normal;
  134. }
  135. .blue {
  136. 	color: #33CCFF;
  137. }
  138. .brown {
  139. 	color: #996633;
  140. }
  141. .spip {
  142. 	font-family: font-family: Arial, Verdana, sans-serif;
  143. 	font-size: 90%;
  144. 	font-weight: normal;
  145. 	text-align: left;
  146. }
  147.  
  148.  
  149. -----------------

3 antwoorden

Gesponsorde links
Offline remy - 21/01/2005 16:29
Avatar van remy PHP ver gevorderde geef je hoogte 100%, dan komt er onder het menu gewoon een lege ruimte en kan de content toch langer worden
Offline fluxxoid - 22/01/2005 12:12
Avatar van fluxxoid HTML interesse neej, hij loopt nog steeds door over disclaimer en footer.. check www.getbasic.be/index.php3 ..
Offline remy - 22/01/2005 12:14
Avatar van remy PHP ver gevorderde ik zie eigenlijk geen discaimer een footer ..
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.172s