1. #1
    Marcooo's Avatar
    Registered
    10/11/07
    Location
    Genk
    Posts
    1,844
    iTrader
    25 (86%)
    Mentioned
    0 Post(s)
    Reputation
    0/7

    overflow probleempje met content

    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:

    HTML Code:
    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;
    	}
    Carpe Diem!
    no votes  

  2. #2
    exxhal's Avatar
    Registered
    14/09/06
    Location
    Brasschaat
    Posts
    506
    iTrader
    5 (100%)
    Mentioned
    0 Post(s)
    Eigenlijk wil je een height:auto op je content en indien deze in hoogte groter is dan een x aantal px dan moet deze overschakelen naar een overflow: auto; met een fixed height met een x aantal px.
    no votes  

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Log in

Log in