Marcooo
Legacy Member
Hallo iedereen!
Ik had van een vriendin een site gekregen waar ik de content moest fixen.
Het probleem is het volgende. Ze wilt dus de website zonder scroll hebben. En wanneer de content de groot word komt er een scroll voor de content.
Nu was ik al zover om een scroll toe tevoegen maar wanneer ik deze height: meegeef neemt de content die groote aan en meer ook niet, dus op grotere resoluties krijg je een grote witte spatie: http://fastwebdev.be/itdesigns/overig/1.jpg
Wanneer ik dan height: auto; doe gaat de hele pagina in zijn volledige lengte waardoor ik dus enkel de hele pagina kan scrollen. : http://fastwebdev.be/itdesigns/overig/2.jpg
Iemand enig idee hoe dit te fixen is?
CSS:
Ik had van een vriendin een site gekregen waar ik de content moest fixen.
Het probleem is het volgende. Ze wilt dus de website zonder scroll hebben. En wanneer de content de groot word komt er een scroll voor de content.
Nu was ik al zover om een scroll toe tevoegen maar wanneer ik deze height: meegeef neemt de content die groote aan en meer ook niet, dus op grotere resoluties krijg je een grote witte spatie: http://fastwebdev.be/itdesigns/overig/1.jpg
Wanneer ik dan height: auto; doe gaat de hele pagina in zijn volledige lengte waardoor ik dus enkel de hele pagina kan scrollen. : http://fastwebdev.be/itdesigns/overig/2.jpg
Iemand enig idee hoe dit te fixen is?
CSS:
HTML:
body {
background:url(images/bg-body.png) no-repeat;
background-attachment:fixed;
background-position:center;
background-color:#8CAFD0;
font-family: Arial, Helvetica, sans-serif;
font-size:8px;
}
img {
border:0;
}
p {
margin-bottom:1.75em;
font-family: Verdana, Geneva, sans-serif;
}
a {
text-decoration:none;
color:#B4C835;
}
a:hover {
text-decoration:none;
color:#6CC7DC;
}
#wrapper {
margin:0 auto;
width:699px;
background:#ffffff;
font-size:1.20em;
}
#header {
height:140px;
background:url(images/bg-header.png) no-repeat;
margin-left: -1px;
margin-top: -16px;
}
#menu {
height:35px;
line-height:35px;
background:url(images/bg-menu.png) repeat-x;
padding: 0 10px;
margin-left: -1px;
margin-top: -8px;
}
#sidebar {
float:right;
width:180px;
background:#efefef;
margin-right:20px;
}
#content {
width: 500px;
height: auto;
overflow-y: scroll;
margin-left: -1px;
margin-top: auto;
margin-bottom: auto;
}
#footer {
position: absolute;
clear:both;
height:35px;
width: 700px;
background:url(images/bg-footer.jpg) no-repeat;
margin-left: -1px;
margin-right:auto;
bottom: 0px;
}
.entry {
padding:5px 10px;
text-align:justify;
line-height:1.75em;
}
.entry-title {
font-size:1.90em;
font-weight:normal;
letter-spacing:-1px;
padding: 15px 0px;
color:#003366;
}
#menu ul {
list-style-type:none;
}
#menu li {
float:left;
}
#menu li a {
padding:0 15px;
display:block;
color:#ffffff;
margin-right:2px;
}
#menu li a:hover {
background:url(images/bg-menu-hover.png) no-repeat center center;
}
#sidebar ul {
list-style-type:none;
margin-top:10px;
}
#sidebar li {
}
#sidebar li a {
display:block;
height:20px;
line-height:20px;
color:#222222;
padding-left:5px;
border-bottom:1px solid #dddddd;
}
#sidebar li a:hover {
background:#edebed;
color:#6CC4D8;
}
#footer-valid {
float:left;
padding-top:20px;
padding-left:20px;
cursor:default;
color:#ffffff;
}
#footer-valid a {
color:#ffffff;
text-decoration:none;
}
#footer-valid a:hover {
color:#ffffff;
text-decoration:underline;
}
h1 {
font-size:2.5em;
font-weight:normal;
cursor:default;
position:relative; top:50px; left:5px;
letter-spacing:1px;
color:#003366;
font-style:italic;
}