xCJPECKOVERx
04-28-2013, 01:42 AM
Hi, So as the title suggests, I'm having trouble with overflow.
What I want is the header and footer to be fixed, with the body content to be scrollable when it has to.
So I went as set the header and footer positions to fixed, then for header top:0 and footer bottom:0.
However, once I set the header and footer positions to fixed, I can no longer scroll through the body content, despite the overflow value of 'auto'.
Here's my HTML:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html"
xmlns="http://www.w3.org/1999/html"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<title>Game Stuff</title>
<meta name="description" content="">
<meta name content="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directiory -->
<link type="text/css" rel="stylesheet" href="css/normalize.css"/>
<link rel="stylesheet" href="css/style.css"/>
<link rel="stylesheet" href="css/source_sans.css"/>
<script type="text/javascript" scr="js/vendor/modernizr-2.6.2.min.js"></script>
<script type="text/javascript" scr="js/jquery1.9.js"></script>
<script type="text/javascript" onscroll="js/global.js"></script>
</head>
<!-- Website Body -->
<body>
<!-- HEADER -->
<div id="header">
<div id="headerContainer">
<img id="logo" src="img/logo.png" />
<div id="menuContainer">
<ul id="menuList">
<li class="menuItem">
Media
<ul class='subMenu'>
<li>Montage</li>
<li>Music</li>
</ul>
</li>
<li class="menuItem">
Animation
</li>
<li class="menuItem">
Resources
</li>
<li class="menuItem">
Contact & FAQ's
</li>
</ul>
</div>
<div class='clearFloat'/>
</div>
</div>
<!-- BODY -->
<div id="body">
<div id="contentWrapper">
<div id="newsWrapper">
<div class='newsPostWrapper'>
<img class='newsImage' alt='newsImage' src='img/newsImage.jpg'/>
<div class='newsTitle'>
News!
<span class='newsDate'>THIS IS THE DATE</span>
</div>
<div class='newsContents'>
</div>
<div class='newsAuthor'>I AM THE AUTHOR</div>
</div>
<div class='clearFloat'></div>
</div>
</div>
</div>
<!-- FOOTER -->
<div id="footer">
<div id="footerContainer">
<p>I MADE THIS WEBSITE!</p>
</div>
</div>
</body>
</html>
And here's my CSS:
/** GLOBAL STYLES **/
* {
padding: 0;
margin: 0;
}
.clearFloat{
clear: both;
}
body{
margin: 0;
font-size: 15px;
font: Arial;
}
/** HEADER STYLES **/
#header{
width: 100%;
top: 0;
position: fixed;
}
#headerContainer{
width: 100%;
max-width: 900px;
margin: auto;
background-color: #eeeeee;
}
#logo{
display: block;
width: 12%;
float: left;
margin-left: 10%;
}
/** Menu **/
#menuContainer{
float: left;
width: 70%;
margin: 75px 0 0 30px;
}
#menuList{
list-style: none;
display: block;
width: 100%;
padding: 0;
margin: 0;
}
#menuList .menuItem{
font-size: 15px;
display: inline-block;
padding: 3% 7%;
background-color: #555;
color: #eeeeee;
position: relative;
}
#menuList .menuItem:hover{
background-color: #eee;
color: #555;
}
/** Trigger **/
#menuList .menuItem:hover .subMenu{
/*display: block;*/
}
/** Sub Menu **/
.subMenu{
display: none;
/*display: block;*/
list-style: none;
position: absolute;
left: 0;
top: 100%;
background-color: #555;
width: 100%;
}
.subMenu li{
padding: 5% 10%;
color: #eee;
}
.subMenu li:hover{
color: #999;
}
/** BODY STYLES **/
#body{
min-height: 200px;
}
#contentWrapper{
width: 100%;
max-width: 1000px;
margin: auto;
}
#newsWrapper{
width: 100%;
max-width: 800px;
margin: auto;
padding: 5% 0;
}
.newsPostWrapper{
width: 90%;
padding: 5%;
}
.newsImage{
width: 100%;
max-width: 600px;
display: block;
padding: 1.5% 0;
}
.newsContentWrapper{
float: left;
width: 100%;
max-width: 600px;
}
.newsTitle{
position: relative;
font-size: 20;
line-height: 24px;
padding: 3%;
}
.newsDate{
position: absolute;
right: 0;
top: 0;
font-size: 18px;
line-height: 20px;
padding: 3% 0;
width: 25%;
}
.newsContents{
padding: 3%;
}
.newsContents p{
color: #222;
}
.newsAuthor{
}
/** CHANGING LAYOUT BASED ON SIZE **/
@media screen and (min-width: 600px){
.newsImage{
width: 33%;
float: left;
}
.newsContentWrapper{
float: left;
width: 66%;
}
}
/** FOOTER **/
#footer{
width: 100%;
bottom: 0;
position: fixed;
}
#footerContainer{
width: 100%;
max-width: 900px;
margin: auto;
background-color: #eeeeee;
}
#footerContainer p{
text-align: center;
}
NOTE: If anybody's wondering, this is just for a dinky school project lol. Also, just insert random stuff in newsContents for body text.
Thanks in advance for any help!!!
CJ.
What I want is the header and footer to be fixed, with the body content to be scrollable when it has to.
So I went as set the header and footer positions to fixed, then for header top:0 and footer bottom:0.
However, once I set the header and footer positions to fixed, I can no longer scroll through the body content, despite the overflow value of 'auto'.
Here's my HTML:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html"
xmlns="http://www.w3.org/1999/html"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<title>Game Stuff</title>
<meta name="description" content="">
<meta name content="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directiory -->
<link type="text/css" rel="stylesheet" href="css/normalize.css"/>
<link rel="stylesheet" href="css/style.css"/>
<link rel="stylesheet" href="css/source_sans.css"/>
<script type="text/javascript" scr="js/vendor/modernizr-2.6.2.min.js"></script>
<script type="text/javascript" scr="js/jquery1.9.js"></script>
<script type="text/javascript" onscroll="js/global.js"></script>
</head>
<!-- Website Body -->
<body>
<!-- HEADER -->
<div id="header">
<div id="headerContainer">
<img id="logo" src="img/logo.png" />
<div id="menuContainer">
<ul id="menuList">
<li class="menuItem">
Media
<ul class='subMenu'>
<li>Montage</li>
<li>Music</li>
</ul>
</li>
<li class="menuItem">
Animation
</li>
<li class="menuItem">
Resources
</li>
<li class="menuItem">
Contact & FAQ's
</li>
</ul>
</div>
<div class='clearFloat'/>
</div>
</div>
<!-- BODY -->
<div id="body">
<div id="contentWrapper">
<div id="newsWrapper">
<div class='newsPostWrapper'>
<img class='newsImage' alt='newsImage' src='img/newsImage.jpg'/>
<div class='newsTitle'>
News!
<span class='newsDate'>THIS IS THE DATE</span>
</div>
<div class='newsContents'>
</div>
<div class='newsAuthor'>I AM THE AUTHOR</div>
</div>
<div class='clearFloat'></div>
</div>
</div>
</div>
<!-- FOOTER -->
<div id="footer">
<div id="footerContainer">
<p>I MADE THIS WEBSITE!</p>
</div>
</div>
</body>
</html>
And here's my CSS:
/** GLOBAL STYLES **/
* {
padding: 0;
margin: 0;
}
.clearFloat{
clear: both;
}
body{
margin: 0;
font-size: 15px;
font: Arial;
}
/** HEADER STYLES **/
#header{
width: 100%;
top: 0;
position: fixed;
}
#headerContainer{
width: 100%;
max-width: 900px;
margin: auto;
background-color: #eeeeee;
}
#logo{
display: block;
width: 12%;
float: left;
margin-left: 10%;
}
/** Menu **/
#menuContainer{
float: left;
width: 70%;
margin: 75px 0 0 30px;
}
#menuList{
list-style: none;
display: block;
width: 100%;
padding: 0;
margin: 0;
}
#menuList .menuItem{
font-size: 15px;
display: inline-block;
padding: 3% 7%;
background-color: #555;
color: #eeeeee;
position: relative;
}
#menuList .menuItem:hover{
background-color: #eee;
color: #555;
}
/** Trigger **/
#menuList .menuItem:hover .subMenu{
/*display: block;*/
}
/** Sub Menu **/
.subMenu{
display: none;
/*display: block;*/
list-style: none;
position: absolute;
left: 0;
top: 100%;
background-color: #555;
width: 100%;
}
.subMenu li{
padding: 5% 10%;
color: #eee;
}
.subMenu li:hover{
color: #999;
}
/** BODY STYLES **/
#body{
min-height: 200px;
}
#contentWrapper{
width: 100%;
max-width: 1000px;
margin: auto;
}
#newsWrapper{
width: 100%;
max-width: 800px;
margin: auto;
padding: 5% 0;
}
.newsPostWrapper{
width: 90%;
padding: 5%;
}
.newsImage{
width: 100%;
max-width: 600px;
display: block;
padding: 1.5% 0;
}
.newsContentWrapper{
float: left;
width: 100%;
max-width: 600px;
}
.newsTitle{
position: relative;
font-size: 20;
line-height: 24px;
padding: 3%;
}
.newsDate{
position: absolute;
right: 0;
top: 0;
font-size: 18px;
line-height: 20px;
padding: 3% 0;
width: 25%;
}
.newsContents{
padding: 3%;
}
.newsContents p{
color: #222;
}
.newsAuthor{
}
/** CHANGING LAYOUT BASED ON SIZE **/
@media screen and (min-width: 600px){
.newsImage{
width: 33%;
float: left;
}
.newsContentWrapper{
float: left;
width: 66%;
}
}
/** FOOTER **/
#footer{
width: 100%;
bottom: 0;
position: fixed;
}
#footerContainer{
width: 100%;
max-width: 900px;
margin: auto;
background-color: #eeeeee;
}
#footerContainer p{
text-align: center;
}
NOTE: If anybody's wondering, this is just for a dinky school project lol. Also, just insert random stuff in newsContents for body text.
Thanks in advance for any help!!!
CJ.