html/css site scrolt niet verticaal

[AldoRaine]

Ik heb dus een site gemaakt in css voor een project, maar de site scrolt niet.
Als je de site opent in een venster kleiner dan het main gedeelte van mijn website dan houd de site gewoon op, en kun je niet naar beneden scrollen.

Je ziet dus maar een deel van de site, en je kunt niet verticaal/horizontaal scrollen.

Dit is de code die ik gebruik

Cascading Stylesheet:

body, html {
background-image:url('afbeeldingen/stripes.png');
background-repeat:repeat;
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
border: 0px;
}
#banner {
background: url('afbeeldingen/banner.png') no-repeat;
position: absolute;
overflow: auto;
top: 5%;
left:50%;
width: 650px;
height: 150px;
margin-left: -325px;
}
#menubox {
background-color: #333;
border-left: 5px;
border-right:0px;
border-top: 0px;
border-bottom: 0px;
border-style:solid;
height: 500px;
width: 150px;
left:50%;
margin-top: 150px;
top: 5%;
position: absolute;
margin-left: -325px;
}
#menu {
    background: #333;
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 12em;
}
#menu li {
    font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
}
#menu a {
    background: #333;
    border-bottom: 1px solid #393939;
    color: #ccc;
    display: block;
    margin: 0;
    padding: 8px 12px;
    text-decoration: none;
}
#menu a:hover {
    background: #2580a2 url("afbeeldingen/hover.gif") left center no-repeat;
    color: #fff;
    padding-bottom: 8px;
}
#main {
background-color: #A9A9A9;
position: absolute;
border-left: 5px;
border-right: 5px;
border-top: 0px;
border-bottom: 0px;
border-style:solid;
padding: 5px;
overflow: auto;
top: 5%;
margin-top: 150px;
left: 50%;
width: 480px;
height: 490px;
margin-left: -175px;
}
#footer {
background: url('afbeeldingen/footer.png') no-repeat;
position: absolute;
overflow: auto;
margin-top: 650px;
top:5%;
left:50%;
width: 650px;
height: 30px;
margin-left: -325px;
}
html {
overflow: hidden;
}

Ik hoop dat jullie mij met dit probleem kunnen helpen.

[ Voor 0% gewijzigd door MueR op 08-01-2010 17:29 ]

[samo]

html {
overflow: hidden;
}

Volgens mij ligt t daar aan.

[MueR]

Debuggen debuggen debuggen. Dit had je makkelijk zelf kunnen vinden met wat debugwerk. Overigens had je kunnen raden dat overflow hidden op het html element niet zo heel verstandig was.

De Devschuur is geen quickfix afhaalchinees. Ik verzoek je dan ook vriendelijk om Webdesign, Markup & Clientside Scripting Beleid nog eens te lezen, waar je onder andere kan lezen hoe je de code tag gebruikt, en dat je alleen relevante code moet posten, niet je hele CSS.

[ Voor 15% gewijzigd door MueR op 08-01-2010 17:28 ]