SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Thread: some help with fixed footer and header...and scrolling content...

  1. Jul 14, 2006 04:24 #1
    geronimo171
    geronimo171 is offline
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    some help with fixed footer and header...and scrolling content...

    Hi,

    I've got a design that i'd ideally like to have a fixed header and footer and i'd like to the content to remain central in the scrolling area.

    here's the link to how i've got it so far

    At the moment the header isn't showing in ff?
    and i just wonder if anyone has any ideas on placing the content in the middle??
    I've added some content in an inner div at a specified width but in IE the left edge of the content cuts off.

    I would also like the central content to scroll over the background like it does in ff...anyone know how this can be acieved for ie?

    thanks for any help.

    j
  2. Jul 14, 2006 05:49 #2
    all4nerds
    all4nerds is offline
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    You forgot a width 100% id top, for FF NS Moz OP

    PS not sure what you want with the last 3 added containers ?

    cleaned out model works also in IE 7
    Code:
    <?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>12345 12345 12345 12345 12345</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<style type="text/css">
	/*  \*/ 
	* html,body{height:100%;} 
	/*  */ 
	
	*{padding:0;margin:0;}

	body{background:#F2FCFF;}
	* html body{margin:77px 0 41px 0;}
	
	#top,#bottom{left:0;width:100%;}
	#top{top:0;height:77px;}
	#bottom{bottom:0;height:41px;}
	* html #top,* html #bottom{position:absolute;}
	html>body #top, html>body #bottom {position:fixed;}
	
	#content{overflow:auto;width:768px;left:50%;margin-left:-384px;}
	* html #content{height:100%;position:relative;}
	html>body #content {
	position:fixed;
	top:77px;
	bottom:41px;
	}
	
	#content p{padding:15px;}
	
	#content{background:#f2fcff url(images/bgd_slice.jpg) repeat-x;}
	* html #content{background:#f2fcff url(images/bgd_slice.jpg) fixed repeat-x;}
	.bgdimage{background:#f2fcff url(images/header.gif) center repeat-x;height:77px;}
	.footerimage{background:#f2fcff url(images/footer.gif) center repeat-x;height:41px;}
	
	</style>
	<!--[if IE]> 
	<style type="text/css"> 
	*+html{height:99%;} 
	*+html #content{background: #f2fcff url(images/bgd_slice.jpg) fixed repeat-x 0 77px;}
	</style> 
	<![endif]--> 
</head>
<body>

<div id="top">

<div class="bgdimage"></div>

</div>

<div id="content"> 
      <p>content to go in here</p>
	  <p>content to go in here</p>
	  <p>content to go in here</p>
	  <p>content to go in here</p>
	  <p>content to go in here</p>
	  <p>content to go in here</p>
	  <p>content to go in here</p>
	  <p>content to go in here</p>
	  <p>content to go in here</p>
	  <p>content to go in here</p>
	  <p>content to go in here</p>
	  <p>content to go in here</p>
	  <p>content to go in here</p>
	  <p>content to go in here</p>
	  <p>content to go in here</p>
	  <p>content to go in here</p>
	  <p>content to go in here</p>
	  <p>content to go in here</p>
	  <p>content to go in here</p>
	  <p>content to go in here</p>
	  <p>content to go in here</p>
	  <p>content to go in here</p>
	  <p>content to go in here</p>
	  <p>content to go in here</p>
	  <p>content to go in here</p>
	  <p>content to go in here</p>
	  <p>content to go in here</p>
	  <p>content to go in here</p>
	  <p>content to go in here</p>
	  <p>content to go in here</p>
	  <p>content to go in here</p>
	  <p>content to go in here</p>
	  <p>content to go in here</p>
	  <p>content to go in here</p>
	  <p>content to go in here</p>
	  <p>content to go in here</p>
	  <p>content to go in here</p>
	  <p>content to go in here</p>

</div>

<div id="bottom">

<div class="footerimage"></div>

</div>

</body>
</html>
    Last edited by all4nerds; Jul 14, 2006 at 06:20.
  3. Jul 14, 2006 06:31 #3
    geronimo171
    geronimo171 is offline
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi all4nerds,

    Thanks for looking at this for me.
    I like the way you've done that...and yes it's cleaned everything up in ie. Only thing is i didn't want the content container itself to scroll...i wanted the page to scroll so i could have the background tiled the same as the content container...that's why i thought of putting the content in a wrapper.
    Any suggestions?

    Thanks again,

    G
  4. Jul 14, 2006 06:47 #4
    all4nerds
    all4nerds is offline
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    You lost me ?? or do you need a more standard 100% hight model ?

    like this ?
    Code:
    <?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>12345 12345 12345 12345 12345</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<style type="text/css">
	/*  \*/ 
	* html,body{height:100%;} 
	/*  */ 
	
	*{padding:0;margin:0;}

	body{background:#F2FCFF;}
	* html body{margin:77px 0 41px 0;}
	
	#top,#bottom{left:0;width:100%;}
	#top{top:0;height:77px;}
	#bottom{bottom:0;height:41px;}
	* html #top,* html #bottom{position:absolute;}
	html>body #top, html>body #bottom {position:fixed;}
	
	#content{overflow:auto;width:768px;left:50%;margin-left:-384px;}
	* html #content{height:100%;position:relative;}
	html>body #content,html>body .x{
	position:fixed;
	top:77px;
	bottom:41px;
	}
	
	#content p{padding:15px;}
	
	.x{background:#f2fcff url(images/bgd_slice.jpg) repeat-x;}
	* html .x{background:#f2fcff url(images/bgd_slice.jpg) fixed repeat-x;}
	.bgdimage{background:#f2fcff url(images/header.gif) center repeat-x;height:77px;}
	.footerimage{background:#f2fcff url(images/footer.gif) center repeat-x;height:41px;}
	
	.x{height:100%;width:100%;}
	</style>
	<!--[if IE]> 
	<style type="text/css"> 
	*+html{height:99%;} 
	*+html .x{background: #f2fcff url(images/bgd_slice.jpg) fixed repeat-x 0 77px;}
	</style> 
	<![endif]--> 
</head>
<body>

<div id="top">

<div class="bgdimage"></div>

</div>
<div class="x">
<div id="content"> 

<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
</div>
</div>

<div id="bottom">

<div class="footerimage"></div>

</div>

</body>
</html>
  5. Jul 14, 2006 07:03 #5
    geronimo171
    geronimo171 is offline
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi All4nerds,

    that's great...i meant that i'd like to use the browser scroll bars rather than have the overflow:auto on the content div.
    Is that possible?
    If not, the version you've given me is certainly workable with so thanks very much.

    G
  6. Jul 14, 2006 07:08 #6
    all4nerds
    all4nerds is offline
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    ? You needed a fixed width of 780px ?

    screen width
    Code:
    <?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>12345 12345 12345 12345 12345</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<style type="text/css">
	/*  \*/ 
	html,body{height:100%;} 
	/*  */ 
	
	*{padding:0;margin:0;}

	body{background:#F2FCFF;overflow:hidden;}
	* html body{margin:77px 0 41px 0;}
	
	#top,#bottom{left:0;width:100%;}
	#top{top:0;height:77px;}
	#bottom{bottom:0;height:41px;}
	* html #top,* html #bottom{position:absolute;}
	html>body #top, html>body #bottom {position:fixed;}
	
	#content{overflow:auto;width:100%;/*left:50%;margin-left:-384px;*/}
	* html #content{height:100%;position:relative;}
	html>body #content,html>body .x{
	position:fixed;
	top:77px;
	bottom:41px;
	}
	
	#content p{padding:15px;}
	
	.x{background:#f2fcff url(images/bgd_slice.jpg) repeat-x;}
	* html .x{background:#f2fcff url(images/bgd_slice.jpg) fixed repeat-x;}
	.bgdimage{background:#f2fcff url(images/header.gif) center repeat-x;height:77px;}
	.footerimage{background:#f2fcff url(images/footer.gif) center repeat-x;height:41px;}
	
	.x{height:100%;width:100%;}
	</style>
	<!--[if IE]> 
	<style type="text/css"> 
	*+html{height:99%;} 
	*+html .x{background: #f2fcff url(images/bgd_slice.jpg) fixed repeat-x 0 77px;}
	</style> 
	<![endif]--> 
</head>
<body>

<div id="top">

<div class="bgdimage"></div>

</div>
<div class="x">
<div id="content"> 

<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here xxxx</p>
</div>
</div>

<div id="bottom">

<div class="footerimage"></div>

</div>

</body>
</html>
  7. Jul 14, 2006 07:12 #7
    geronimo171
    geronimo171 is offline
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes, but for the content to remain central rather than left.

    Sorry if this is confusing...i knew it was going to be a fairly tricky layout!
  8. Jul 14, 2006 08:08 #8
    all4nerds
    all4nerds is offline
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    centered width 768px

    Code:
    <?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>12345 12345 12345 12345 12345</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<style type="text/css">
	/*  \*/ 
	html,body{height:100%;}
	/*  */ 
	
	*{padding:0;margin:0;}

	body{background:#F2FCFF;overflow:hidden;}
	* html body{margin:77px 0 41px 0;text-align:center;}
	
	#top,#bottom{left:0;width:100%;}
	#top{top:0;height:77px;}
	#bottom{bottom:0;height:41px;}
	* html #top,* html #bottom{position:absolute;}
	html>body #top, html>body #bottom {position:fixed;}
	
	#content{overflow:auto;width:100%;/*left:50%;margin-left:-384px;*/}
	* html #content{height:100%;position:relative;}
	html>body #content,html>body .x{
	position:fixed;
	top:77px;
	bottom:41px;
	}
	
	
	#content p{padding:15px;}
	
	.x{background:#f2fcff url(images/bgd_slice.jpg) repeat-x;}
	* html .x{background:#f2fcff url(images/bgd_slice.jpg) fixed repeat-x;}
	.bgdimage{background:#f2fcff url(images/header.gif) center repeat-x;height:77px;}
	.footerimage{background:#f2fcff url(images/footer.gif) center repeat-x;height:41px;}
	
	.x{height:100%;width:100%;}
	
	.y{width:768px;margin:0 auto;text-align:left;}
	</style>
	<!--[if IE]> 
	<style type="text/css"> 
	*+html{height:99%;} 
	*+html .x{background: #f2fcff url(images/bgd_slice.jpg) fixed repeat-x 0 77px;}
	</style> 
	<![endif]--> 
</head>
<body>

<div id="top">

<div class="bgdimage"></div>

</div>
<div class="x">
<div id="content"> 
<div class="y">
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here xxxx</p>
</div>
</div>
</div>

<div id="bottom">

<div class="footerimage"></div>

</div>

</body>
</html>

    With a minimum of containers
    Code:
    <?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>12345 12345 12345 12345 12345</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<style type="text/css">
	/*  \*/ 
	html,body{height:100%;}
	/*  */ 
	*{padding:0;margin:0;}

	body{background:#f2fcff;overflow:hidden;}
	* html body{margin:77px 0 41px 0;text-align:center;}
	
	#top,#bottom{left:0;width:100%;}
	#top{top:0;height:77px;background: url(images/header.gif) center repeat-x;}
	#bottom{bottom:0;height:41px;background: url(images/footer.gif) center repeat-x;}
	* html #top,* html #bottom{position:absolute;}
	html>body #top, html>body #bottom {position:fixed;}
	
	#wrap{overflow:auto;width:100%;}
	* html #wrap{height:100%;}
	html>body #wrap{
	position:fixed;
	top:77px;
	bottom:41px;
	}
	
	#wrap p{padding:15px;}
	
	#wrap{background: url(images/bgd_slice.jpg) repeat-x;}
	* html #wrap{background: url(images/bgd_slice.jpg) fixed repeat-x;}
	
	.content{width:768px;margin:0 auto;text-align:left;}
	</style>
	<!--[if IE]> 
	<style type="text/css"> 
	*+html{height:99%;} 
	*+html #wrap{background: #f2fcff url(images/bgd_slice.jpg) fixed repeat-x 0 77px;}
	*+html{overflow:auto;}
	</style> 
	<![endif]--> 
</head>
<body>

<div id="top">&nbsp;</div>


<div id="wrap">

<div class="content">
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>wrap to go in here xxxx</p>
</div>

</div>

<div id="bottom">&nbsp;</div>

</body>
</html>
    class only
    HTML Code:
    <?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>12345 12345 12345 12345 12345</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<style type="text/css">

	*{padding:0;margin:0;}

	body{overflow:hidden;background:#f2fcff url(images/bgd_slice.jpg) repeat-x 0 77px;}
	* html body{margin:77px 0 41px 0;text-align:center;}
	
	* html .a{position:absolute;}
	head+body .f{position:fixed;}
	.a{left:0;width:100%;}
	.he{top:0;height:77px;background: url(images/header.gif) center repeat-x;}
	.fo{bottom:0;height:41px;background: url(images/footer.gif) center repeat-x;}

	.wra{overflow:auto;width:100%;}
	* html .wra{height:100%;}
	head+body .wra{
	top:77px;
	bottom:41px;
	}
	
	.wra p{padding:15px;}
	
	.content{width:768px;margin:0 auto;text-align:left;}
	</style>
	<!--[if IE]> 
	<style type="text/css"> 
	*+html{overflow:auto;}
	</style> 
	<![endif]--> 
</head>
<body>

<div class="he a f">&nbsp;</div>


<div class="wra f">

<div class="content">
<p>content to go in here start</p>
<!--  -->
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>
<p>content to go in here</p>

<p>wrap to go in here end</p>
</div>

</div>

<div class="fo a f">&nbsp;</div>

</body>
</html>
    Last edited by all4nerds; Jul 14, 2006 at 12:14.
  9. Jul 14, 2006 08:45 #9
    geronimo171
    geronimo171 is offline
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you're a bloody star

    i'll take a good look at the code later....thank you very much.

    G
    Last edited by geronimo171; Jul 14, 2006 at 10:11.
« Previous Thread | Next Thread »

Bookmarks

Posting Permissions

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

Forum Rules