login  Naam:   Wachtwoord: 
Registreer je!
 Forum

meerekkende sidebar

Offline san - 27/05/2010 17:51
Avatar van sanHTML interesse Ik zit al heel lang met een probleem en krijg het niet voor elkaar. In een layout met header bovenin, sidebar links, maincontent rechts en footer, krijg ik het niet voor elkaar dat de sidebar meerekt met de maincontent. Ik heb het nu geprobeerd met een wrapper en een afbeelding maar ook dit lukt niet. Wie o wie weet hier misschien de juist oplossing voor????
css code - Bekijk de code zonder highlighting - Klap code in 
  1. div#wrapper {
  2. 		background: #f7f7f7 url(../images/white/mw_shadow_l.png) 100% 0 repeat-y;
  3. }
  4.  
  5.  
  6. body  {
  7. 	font-family: Arial, Verdana, Helvetica, sans-serif;
  8. 	font-size: 17px;
  9. 	background: #FFFFFF;
  10. 	color: #000000;
  11. 	margin:0;
  12. 	padding: 0;
  13. 	height: 100%;
  14. 	width: 100%;
  15. }
  16.  
  17. #container {
  18.    position: absolute;
  19.    left:50%;  
  20.    margin-left:-450px; 
  21.    min-height: 835px;
  22.    width: 900px;
  23.    background: #FF77CC;
  24.    border: 3px solid #FFFFFF;
  25. } 
  26.  
  27. #header { 
  28.    width: 900px;
  29.    height: 170px;
  30.    text-align: center;
  31.    background-image: url(kop/titel.png);   
  32. }
  33.  
  34. #menu {
  35.     width: 900px;
  36.     height: 53px;
  37.     margin-top: 0px;
  38.     background: #FFFFFF;
  39.     background-image: url(kop/menu.png);   
  40.     text-align: center;
  41. }
  42.  
  43. #sidebar {
  44. 	float: left; 
  45. 	width: 141px;
  46. 	min-height: 580px;
  47. 	background: #FFFFFF;
  48. 	background-image: url(kop/side.png);
  49. 	background-repeat: repeat-y;
  50. 	border-right-style: solid;
  51. 	border-right-color: #FFFFFF;
  52. 	border-right-width: 5px;
  53. }
  54.  
  55. #footer {
  56.    width: 895px;
  57.    height: 16px;
  58.    background:#FFFFFF;
  59.    font-size: 12px;
  60.    padding-left: 5px;
  61.    margin: 0px;
  62.    padding-top: 0px;
  63.    clear: both;
  64. } 
  65.  
  66.  
  67.  
  68. <body>
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  2.  
  3. <div id="wrapper">
  4.  
  5.            <div id="container"> 
  6.  
  7.                            <div id="header">
  8.                               </div>
  9.  
  10. <div id="menu">
  11.     <a id="menu1" href="#"></a>
  12.     <a id="menu2" href="#"></a>      
  13.     <a id="menu3" href="#"></a>      
  14.     <a id="menu3" href="#"></a>      
  15.     <a id="menu5" href="#l"></a>      
  16. </div>
  17.  
  18.  
  19. <div id="sidebar">      
  20.     <a id="sidemenu1" href="#"></a>      
  21.     <a id="sidemenu2" href="#"></a> 
  22.     <a id="sidemenu3" href="#"></a>    
  23.     <a id="sidemenu4" href="#"></a>
  24.     <a id="sidemenu5" href="#"></a>   
  25.     <a id="sidemenu6" href="#"></a>
  26.     <a id="sidemenu7" href="#"></a>
  27. </div>  
  28.  
  29.  
  30.  
  31. 	<?php if($this->countModules('left')) : ?>
  32. 	     <jdoc:include type="modules" name="left" />
  33. 	<?php endif; ?>
  34.  
  35.  
  36. <?php if($this->countModules('left')) : ?>
  37. 						<div id="maincolumn" style="margin-top: -460px">
  38.  
  39. 												<?php else: ?>
  40. 						<div id="maincolumn_full">
  41. 						<?php endif; ?>
  42. 							<?php if($this->countModules('user1 or user2')) : ?>
  43. 								<table class="nopad user1user2">
  44. 									<tr valign="top">
  45. 										<?php if($this->countModules('user1')) : ?>
  46. 											<td>
  47. 											<jdoc:include type="modules" name="user1" style="xhtml" />
  48. 											</td>
  49. 										<?php endif; ?>
  50. 										<?php if($this->countModules('user1 and user2')) : ?>
  51. 											<td class="greyline">&nbsp;</td>
  52. 										<?php endif; ?>
  53. 										<?php if($this->countModules('user2')) : ?>
  54. 											<td>
  55. 											<jdoc:include type="modules" name="user2" style="xhtml" />											</td>
  56. 										<?php endif; ?>
  57. 									</tr>
  58. 								</table>
  59.  
  60. 								<div id="maindivider"></div>
  61. 							<?php endif; ?>
  62.  
  63. 							<table class="nopad">
  64. 								<tr valign="top">
  65. 									<td>
  66. 										<jdoc:include type="component" />
  67. 										<jdoc:include type="modules" name="footer" style="xhtml"/>
  68. 									</td>
  69. 									<?php if($this->countModules('right') and JRequest::getCmd('layout') != 'form') : ?>
  70. 										<td class="greyline">&nbsp;</td>
  71. 										<td width="170">
  72. 											<jdoc:include type="modules" name="right" style="xhtml"/>
  73. 										</td>
  74. 									<?php endif; ?>
  75. 								</tr>
  76.  
  77.                                                                                                                            </table>
  78.  
  79. 	</div> </div>	
  80.  
  81. <div id="footer">Footer</div>
  82.  
  83. </div></div>
  84.  
  85. </body>
  86. </html>

6 antwoorden

Gesponsorde links
Offline Jelmerholland - 27/05/2010 18:49
Avatar van Jelmerholland PHP beginner Alles in een container zetten..

Alles wat IN de container zit: float:left

Werkt bij mij ook: http://www.jdwebdesign.nl
Offline san - 27/05/2010 19:10
Avatar van san HTML interesse Ik heb alles toch al in een container gezet. Heb nu ook alles op float:left gezet maar helaas rekt de sitebar niet mee.
Offline Jelmerholland - 27/05/2010 19:36 (laatste wijziging 27/05/2010 19:36)
Avatar van Jelmerholland PHP beginner Hmm.. heb je 'm ergens geüpload staan?
(of een screenshot? )
Offline san - 27/05/2010 20:01 (laatste wijziging 27/05/2010 23:34)
Avatar van san HTML interesse Staat alleen nog localhost. Maar het is nu zo dat de sidebar de height van 580px aanneemt en niet verder gaat.

Ik heb alles nog eens geprobeerd met een eenvoudige template en het gebruik van faux columns maar de sitebar gaat nu ook niet verder als tot waar de afbeeldingen lopen en neemt niet de hoogte van de main aan.Plaatscode: 139485
Offline WouterJ - 29/05/2010 17:56 (laatste wijziging 29/05/2010 19:35)
Avatar van WouterJ HTML gevorderde Ik had dit ook met mijn design. Toen heb ik alles in een div gezet. Die div een position relatieve gegeven en de sidebar heb ik een height: 100%; gegeven. Dat werkt nu.

EDIT: 1 belangrijk detail vergeten: geef de sidebar een position: absolute; mee.
Offline san - 31/05/2010 20:21
Avatar van san HTML interesse Dit werkt ook niet. De sidebar loopt dan helemaal door tot onderkant scherm maar niet tot waar de inhoud stopt(door de 100% hoogte). En als je de hoogte van de sidebar op een min-height zet loopt deze niet verder door.
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.181s