Ik ben begonnen te slicen met divs, kheb hier een boek gelezen maar toch heb ik nog enkele vragen hierover.

Ik heb in bijlage een printscreen gestoken van het resultaat. Nu is mijn vraag, hoe zorg ik ervoor dat die background over de ganse hoogte van mijn site komt ?

hier de html code :

Code:

<div id="header">
<!-- tabel van de header -->
</div>
<div id="box">
    <div class="boxleft">
        dit is een test<br />dit is een test<br />dit is een test<br />dit is een test<br />dit is een test<br />dit is een test<br />dit is een test
    </div>
    <div class="boxmiddle">
        dit is een test
    </div>
    <div class="boxright">
        dit is een test
    </div>
    <div id="footer">
        <span>
<!-- footer -->
</span>
    </div>
</div>

hier de css code :

Code:

#header{width:1068px; height:152px;}
#box{position:absolute; top:171px; left:54px; width:1014px; float:left;}
    .boxleft{width:254px; background:url('../images/bg/frameleft.jpg') repeat-y; float:left; padding:10px; top:0px; text-align:center;}
    .boxmiddle{position:absolute; top:0px; left:254px; width:506px; background:url('../images/bg/framemiddle.jpg') center left repeat-y; float:left; padding:20px;}
    .boxright{position:absolute; top:0px; left:760px; width:254px; background:url('../images/bg/frameright.jpg') center left repeat-y; float:left; padding:10px;}
#footer{position:relative; top:0px; width:1014px; left:1px; margin-left:0px; float:left; clear:both;}

bedankt alvast :)

Ik heb in bijlage een printscreen gestoken van het resultaat. Nu is mijn vraag, hoe zorg ik ervoor dat die background over de ganse hoogte van mijn site komt ?

De eenvoudigste (en browserveiligste) oplossing:
- neem de achtergronden van boxleft, boxmiddle en boxright
- plak die 3 plaatjes netjes aan elkaar
- zet dit resultaat als achergrond voor #box

merci, idd dat werkt.


Maar heb nu een volgende probleem. Wanneer mijn tekst in het middelste div te lange wordt, dan komt de tekst onder de footer heen en toont hij die background niet meer.

http://www.x-it.be/daxforum/

Iemand een idee wat er verkeerd is ? Of hoedat ik dat kan verhelpen ?

.boxright{position:absolute; top:0px; left:760px; width:254px; float:left; padding:20px;}

waarom gebruik je position:absolute samen met float?
doe die positions:absolute allemaal weg, daardoor zal je meer problemen krijgen met uitrekbaarheid van je site.

Gebruik float & margins om je <div>'s te positioneren (en clear:both indien nodig)
gebruik position als je een div totaal ergens op een rare plaats wil zetten.

tip: margins kan je negatief instellen

nieuwe code zou dus moeten worden:

Code:

#box{background:url('../images/bg/box.jpg') repeat-y;}
	.boxleft{width:254px; float:left; padding:20px;} /* Text-align left is standaard, margin:0 auto; als je float left instelt is nogal raar!*/
	.boxmiddle{width:506px; float:left; padding:20px;}
	.boxright{width:254px; float:left; padding:20px;}

zet dan onderaan de box: <div class="clear"></div>
en in de css: .clear{clear:both;font-size:0;} (font size is omdat IE6 automatisch het aantal pixels van de font in hoogte geeft, ook al zeg je height:0px; )

zo zou het moeten werken, houd wel je vorige css file bij (je weet maar nooit)

Merci. Je hebt me allesinds een stuk verder geholpen, maar om eerlijk te zijn snap ik moeilijk de "logica" erachter.

Ik heb toch nog die positions erbij moeten voegen, anders kwam het niet goed.

Dat heb ik nu als code. Als je nog verbeteringen weet, zeg het mij gerust. Het is maar zo dat ik kan bijleren.

Code:

#header{width:1068px; height:152px;}
    .images {border: 1px solid #000000;}
#box{position:absolute; top:171px; left:54px; width:1014px; float:left; background:url('../images/bg/box.jpg') repeat-y;}
    .boxleft{position:relative; top: 0px; width:254px; float:left; padding:20px; top:0px; text-align:left; margin:0 auto;}
    .boxmiddle{width:506px; float:left; padding:20px; margin-left:-40px;}
    .boxright{position:absolute; top: 0px; left:760px; width:254px; padding:20px;}
#frame_login,
#frame_navigatie, 
#frame_poll, 
#frame_advertising, 
#frame_meetings, 
#frame_usersonline{top:0px; width:181px; color: #472B1D; padding:0px; margin-left:9px; margin-top:9px; border: 7px solid #472B1D;}
    .frametop{width:181px;}
    .framecontent{width:161px; color:#472B1D; padding:10px; background-image:url('../images/bg/frame.jpg'); background-repeat:repeat-x repeat-y;}
    .framespace{width:177px; color:#472B1D; margin:15px;}
#content{color: #4A4A4A; height:auto;}
    .contenttitle{width:428px; background-color: #F2EDDE; padding:20px; color: #4A4A4A;}
    .contenttext{width:458px; padding:5px;}
    .contentspace{width:428px; margin:15px;}
#footer{position:relative; top:20px; width:1014px; left:1px; margin-left:0px; float:left; clear:both;}
    .clear{clear:both;font-size:0;}]

Online : http://www.x-it.be/daxforum/


Kheb wel nog een probleemke met FF. Het middelste frame toont hij iets hoger, dan die zijframes :s

toevallig niemand een goeie tutorial over divs ? Waar wat praktische tips enzo instaan ?

Ik begrijp het principe ongeveer, maar wanneer men met een container zit waarin 2 of 3 divs naast elkaar zitten, om dan die container mee te laten uitrekken ... dit is me nog ergens onduidelijk.

Misschien helpt dit je verder op weg:
http://www.code-sucks.com/css%20layo...h-css-layouts/

Ja is altijd es intersant, maar is wel redelijk basis

ik merk dat al die voorbeelden gebasseerd zijn op een vaste hoogte en breedte. Ik ben vooral op zoek hoedat je een div kan nestelen, dat bijvoorbeeld die achterliggende div mee uitrekt.

afkijken van ervaren slicers...

kijk alvast eens naar dit, een simpele site ook 3 kolomen
http://compasol.net/cedric/green2/

Origineel gepost door Cédric Siroux

afkijken van ervaren slicers...

kijk alvast eens naar dit, een simpele site ook 3 kolomen
http://compasol.net/cedric/green2/

Hoedat je zoeits moet doen, no problem.

't Is maar wanneer je met genestelde divs zit, om dan die background van die achterliggende div mee te laten uitrekken dat in de probs kom.

clear: both moet je hiervoor gebruiken

dus voor de eindtag van de achterliggende div een <div style="clear:both;"></div>

Origineel gepost door Derk D

<div style="clear:both;"></div>

geeft in IE6 vaak problemen dat je div een minimumhoogte van de letters heeft.

daarom font-size:0; toevoegen

Ik zou graag die table width="1014" ervanuit halen en daar met een div werken. Maar het lukt mij maar niet.

Online vind je het op http://www.x-it.be/daxforum/forum.php

Code:

 
<div id="box_forum">
<table width="1014" cellspacing="0" border="0">
<tr>
<td width="744" class="boxleft_forum">
 
<!-- Hier komt de tabel van het forum -->
 
</td>
<td width="253" class="boxright_forum">
 
<!-- frames -->
 
</td>
</tr>
</table>
<div id="footer">
<!-- footer tags -->
</div>
<div class="clear"></div>
</div>
</body>
</html>

Code:

<div id="box_forum">
 <div class="left">
 
  <!-- Hier komt de tabel van het forum -->
 
 </div>
 
 <div class="right">
 
  <!-- frames -->
 
 </div>
 <div class="clear"></div>
</div>
<div id="footer">
<!-- footer tags -->
</div>
<div class="clear"></div>
</div>
</body>
</html>

css:

Code:

#boxforum{width:1014px;}
#boxforum .left{float:left;width:744px;}
#boxforum .right{float:left;width:253px;}

744+ 253 = 997, waarom 1014?

ok. Ze staan nu al wat beter.

Het probleem lag hem erin dat ik bij left en right een padding had gebruikt, en daardoor kwamen die divs onder elkaar te staan.
Iemand een uitleg hoedat dat komt ?
En hoe moet ik dat nu oplossen om die frames en het forumtabelleke wat mooier in 't midden te krijgen ?

Ik heb wel nog 1 probleem. Ik krijg die footer niet goed :s

http://www.x-it.be/daxforum/forum.php