[PHP / CSS]

[coenbijlsma]

Kan een mod de titel nog even aanpassen naar '[CSS] inhoud van div loopt door' en verplaatsen naar Webdesign? Ik ben er niet echt bij vandaag...

Ik heb een pagina gebouwd met een aantal geneste divs, die dmv een css gepositioneerd worden. Links het menu, rechts wat linkjes, en in het midden een overzicht van een aantal producten. Onder dit alles een footertje met wat info over mij.

Het aantal producten is niet beperkt. Als ik dus veel producten in de database heb staan, loopt die div in het midden nogal uit, en krijg je zoiets:

plaatje

Ik heb al gezocht op w3schools, maar volgens mij zit ik daar verkeerd te zoeken.
Ik heb het nu tijdelijk opgelost door de hoogte van de divjes absoluut in te stellen, maar dat is natuurlijk niet de bedoeling.
Voor de volledigheid nog even de relevante css-code:

Heeft er iemand een idee hoe ik dit kan oplossen?

Cascading Stylesheet:

body {
    font-family:"Times New Roman", Times, serif;
    font-size:90%;
}

/*pagecontent zit om alle ander divs heen gewrapped.*/
div.pagecontent {
    position:absolute;
    top:0px;
    left:10%;
    right:10%;
    height:110%;
    
    border-bottom:none;
    border-top:none;
    border-left:none;
    border-right:none;
}

/*De header met een leuk plaatje*/
div.header {
    position:absolute;
    top:0px;
    height:103px;
    width:100%;
    
    background-image:url(../img/header_fill.jpg);
    background-repeat:repeat-x;
    background-position:top;
    
    border-left:none;
    border-right:none;
    border-top:none;
    border-bottom:none;
}

div.header img {
    position:absolute;
    left:150px;
}

/*het middengedeelte*/
div.content {
    position:absolute;
    top:103px;
    left:17%;
    /*bottom:7%;*/
    width:66%;
    
    padding-left:5px;
    padding-right:5px;
    
    overflow:hidden;
}

div.menu {
    position:absolute;
    top:103px;
    /*bottom:7%;*/
    height:800px;
    left:0%;
    width:17%;
    
    background-image:url(../img/ov_grijs_groen.gif);
    background-repeat:repeat-x;
    border-color:#999999;
    border-bottom:none;
    border-top:none;
    border-left-width:1px;
    border-left-style:solid;
    border-right-width:1px;
    border-right-style:solid;
    
    text-align:left;
}

div.leukelinkjes {
    position:absolute;
    top:103px;
    /*bottom:7%;*/
    height:800px;
    right:0%;
    width:17%;
    
    border-color:#999999;
    border-bottom:none;
    border-top:none;
    border-right-width:1px;
    border-right-style:solid;
    border-left-width:1px;
    border-left-style:solid;
    
    text-align:left;
}

div.footer {
    position:absolute;
    top:903px;
    bottom:0%;
    left:0px;
    right:0px;
    
    border-color:#999999;
    border-bottom:none;
    border-right-width:1px;
    border-right-style:solid;
    border-left-width:1px;
    border-left-style:solid;
    border-top-width:1px;
    border-top-style:solid;
    
    color:#666666;
    font-size:75%;
    text-align:center;
}

[ Voor 3% gewijzigd door coenbijlsma op 24-12-2006 15:48 ]

[Janoz]

Er zijn meerdere dingen mis met je topic:
1-Het heeft helemaal niks met php te maken dus is in PRG verkeerd
2-Je hebt geen titel.
3-Je geeft nergens aan wat je nu precies wel wilt dat er gebeurt. Het is dan ook erg lastig om je daarmee te helpen. Enkel 'ik heb op w3schools' gezocht zegt natuurlijk erg weinig .


Ik zou hem wel kunnen gaan verplaatsen en een titel kunnen verzinnen, maar punt 3 zul je toch echt zelf moeten doen. Vandaar dat ik deze op slot zet. Als je een nieuw topic wilt openen over dit probleem, let dan op de 3 door mij gegeven punten!