Hallo,

Ik ben bezig met het basen van een layout alleen heb ik nu een content gedeelte en er moet een sidebar gedeelte naast. Wat ik ook probeer, ik krijg het niet voor mekaar, iemand tips?

Mijn HTML body:

PHP Code:

<div class="swapper">  
<div id="header"></div>
<div id="sidebar"></div>
    <div id="content">
<h1>Test titel</h1>
Cras nulla magna, placerat eget sodales ullamcorper, ultricies cursus tellus. Nunc non tincidunt nisl. Suspendisse potenti. Sed sollicitudin ultricies diam nec venenatis. Sed in nulla sed metus sollicitudin commodo in eu mauris. Aliquam et nisi nec enim consectetur vehicula in vel sapien. Aliquam quis mi nec enim venenatis gravida. Cras luctus, eros a mollis volutpat, tellus sem fringilla lorem, et eleifend velit ipsum et neque. Sed et sapien et purus imperdiet convallis. Phasellus nec eros urna. Nam porta consequat lorem, eget dictum nunc dictum vitae. Praesent elementum, massa blandit volutpat facilisis, ante risus feugiat nulla, sed vehicula nisl risus a est. Maecenas sit amet vestibulum enim. Suspendisse potenti. In vel metus mauris, sed suscipit libero. 
</div> 


Deel van mijn CSS:

PHP Code:

div#header
    {
    background-image: url(images/header.gif);
    background-repeat: no-repeat;
    background-position:center top;
    height: 208px;
    } 
    
div#content {
    background: url(images/content.gif) repeat-y;
    padding: 3px 27% 0px 40px;
}

div#sidebar {
background: url(images/sidebar.gif) repeat-y;
padding: 0px 50% 0% 80%;
} 


Alvast bedankt!

Op de content float:left; zetten en op de sitebar float:right;

Overige tips:
background-image: url(images/header.gif);
background-repeat: no-repeat;
background-position:center top;

Kan ook gewoon als:
background:url(images/header.gif) no-repeat center top;

En die paddings zou ik sowieso niet in procenten doen dan ziet er op schermen van een andere groote heel belabberd uit.

De sidebar die wil niet helemaal naar beneden getrokken worden, hij gaat alleen met de tekst mee.

Hier mijn stukje CSS:

PHP Code:

div#sidebar {
background: url(images/sidebar.gif) repeat-y;
padding: 3px 0px 0px 0px;
float: right;
width: 233px;
}

div#sidebar  p {
color: #000;
padding: 0% 6% 0% 9%
} 


foax column googlen?
Aanvullend bericht:
:S Faux columns uiteraard

Code:

<div class="swapper">  
    <div id="header"></div>
    <div id="sidebar">text</div>
    <div id="content">text</div>
</div>

Code:

div#swapper {
    background-image: url(images/header.gif) repeat-y left top;
} 
div#header {
    background-image: url(images/header.gif) no-repeat center top;
    height: 208px;
} 
    
div#content {
    float : left;
    padding: 3px 27% 0px 40px;
}

div#sidebar {
    padding: 0px 50% 0% 80%;
}

Gooi je afbeelding in de swapper en gooi je 2 images van content en sidebar in 1.

Ben al tijdje bezig met zoeken naar "Faux columns", krijg het nog niet voor mekaar, ik las wel iets over:

PHP Code:

padding-bottom: 100px; 


Hiermee word de sidebar wel langer alleen kun je dit niet op auto zetten?

@Rory k.
Ik heb het geprobeerd maar het mocht helaas niet helpen, toch bedankt voor de uitleg!

Origineel gepost door Jordy Bakker

Ben al tijdje bezig met zoeken naar "Faux columns", krijg het nog niet voor mekaar, ik las wel iets over:

PHP Code:

padding-bottom: 100px; 


Hiermee word de sidebar wel langer alleen kun je dit niet op auto zetten?

@Rory k.
Ik heb het geprobeerd maar het mocht helaas niet helpen, toch bedankt voor de uitleg!

Wat Rory bedoelt is hetzelfde als ik bedoel

<div id='met_een_achtergrond_die_achtergrond_lijkt_van_ de_andere_twee_hierin'>

<div id='content'> </div> <!-- #content {float:left; width:xxxpx; padding:xxpx;} -->
<div id='sidebar'> </div> <!-- #sidebar {width:xxxpx; padding:xxpx;} -->
<div class='clear'></div> <!-- .clear {clear:both;} -->

</div>
Aanvullend bericht:
EDIT: bekijk dit dan anders ff; zojuist ff in elkaar geflanst

**LINKJE**

Dat ziet er netjes uit Marcel,
Zou ik mijn layout eens naar jou mogen toesturen zodat jij eens kunt kijken?
dan kan ik het vergeleken en zie ik wat ik anders heb gedaan want het blijkt maar niet te lukken.

Kun je me een PM sturen? Avast bedankt!