1 reply [Last post]
usagi
usagi's picture
Offline
newbie
Townsville, Australia
Last seen: 2 years 22 weeks ago
Townsville, Australia
Timezone: GMT+10
Joined: 2011-11-12
Posts: 1
Points: 2

As a newbie I am trying to set up a home page with a SET width of 1024px, a fixed header/banner of height 175px, a fixed left navigation area of 150 px offset 20px, a fixed right side non-scrolling area of 175px offset from the right by 20px, and a scrolling main area in the centre with padding on either side of 10px.
A footer menu bar will stretch across the bottom and scroll into view when last content from the main area scrolls up. I have been trying to read up and search forums for code but to no avail. As a very new coder (my first attempt) I have put together some code which seems to work in F.F., Chrome, and Opera but I.E. does not seem to like it. I would appreciate it if some one is able to have a look at this for me and set me on the right path as I can't seem to correct it.
With thanks, Usagi from down under. Smile

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>INDEX</title>
    <link href="UNITY.css" type="text/css" rel="stylesheet"> 
 
	<style type="text/css" media="screen">
		html, body 		{ margin: 0; padding: 0; zoom: 1; }
		body 			{ color: #333; font: 12px Helvetica, Arial, sans-serif; line-height: 18px; }
		h2				{ color: #333; }
		a				{ color: #337810; }
		p				{ margin: 0 0 18px; }
		#container		{ width: 1024px; margin: 0 auto;} /*---760px default ---*/
		#wrapper		{ float: left; width: 100%; padding-top: 145px; }
 
		/* Banner */
		#banner			{ background-image: url(IMAGES/BACKGRND.JPG); border-bottom: 12px solid #ddd; position: fixed;  }
		#banner h1  	{ color: #004b6f; float: left; width: 370px; padding-left: 142px;}  /*---24px 18 px  default ---*/
		#banner p		{ color: #666; font-size: 11px; font-weight: bold; padding: 0 18px; }
		#pageheader     { float: left; width: 600px; padding-top: 10px;}
		#logo1          { float: left; height: 100px; width: 185px; margin: 0 0 3px; }
		#logo2          { float:left; height: 100px; width: 185px;padding-left: 20px;}
 
		/* Content Style */
		#navigation		{ border-bottom: 1px solid #ccc; padding-top: 145px; } 
		#navigation ul	{ padding: 0 18px 9px; }
		#extra			{ border-bottom: 1px solid #ccc; padding-top: 145px; }
		#extra small	{ font-size: 11px; line-height: 18px; }
		#content		{ }
		#content p, #extra p { padding-right: 18px; }
 
		/* Content Positioning and Size */
		#navigation		{ position: fixed;  float: left; width: 175px; }/* margin-left: -742px default */
		#content		{ margin: 0 215px 36px 215px; }
		#extra			{ position: fixed; float: right; margin-left: 820px; width: 175px; }
 
		/* Footer */
		#footer			{ background: #333; border-bottom: 2px solid #999; clear: left; width: 100%; }
		#footer a		{ color: #eee; }
		#footer	p		{ color: #ccc; margin: 0; padding: 0 18px 10px; }
		#footer ul		{ border-bottom: 1px solid #555; list-style: none; margin: 0 18px 6px; padding: 10px 0 6px; }
		#footer li		{ display: inline; font-size: 11px; font-weight: bold; padding-right: 5px; }
	</style>
	<!--[if IE]>
	<style type="text/css">
	    #navigation, #content, #extra { margin-top: 20px; }
	</style>
	<![endif]-->
</head>
 
<body>
    <div id="container">
	    <div id="banner">
 
		    <div id="logo1">
			    <center><img src="IMAGES/LOGO1.gif">
                <p>Originally consecreated as<br>
                   Lodge Unity No. 1236<br>
                   Scottish Constitution.</p></center>
            </div>
 
			<div id="pageheader">
			    <h1> UNITY LODGE No. 300, U.G.L.Q.<br>
			    TOWNSVILLE, QUEENSLAND.</h1>
				<center><img src="HEADERS/WELCOME.gif" width="615" height="50"</center>
			</div>
 
			<div id="logo2">
               <center><img src="IMAGES/LOGO2.gif">
               <p>Presently consecreated as<br>
                  Lodge Unity No. 300<br>
                  Queensland Constitution.</center>
            </div>
 
		</div>
 
        <div id="wrapper">
			<div id="content">
				<h2>Content Goes Here</h2>
				<p>Cue the obligatory <em>Lorem Ipsum</em> riff-raff type text, <a href="">Followed by an example of a link.</a></p> 
				<p>There are many uses for <em>Lorem Ipsum</em>, using it as filled text isn't recommended.</p> 
				<p>Make sure to always use actual content when building your websites! It just makes more sense.</p> 
				<p>Now for the lipsum.</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
				<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
				<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> 
				<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
				<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
				<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> 
				<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				<p>There are many uses for <em>Lorem Ipsum</em>, using it as filled text isn't recommended.</p> 
				<p>Make sure to always use actual content when building your websites! It just makes more sense.</p> 
				<p>Now for the lipsum.</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
				<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
				<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> 
				<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
				<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
				<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> 
				<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				<p>There are many uses for <em>Lorem Ipsum</em>, using it as filled text isn't recommended.</p> 
				<p>Make sure to always use actual content when building your websites! It just makes more sense.</p> 
				<p>Now for the lipsum.</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
				<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
				<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> 
				<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
				<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
				<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> 
				<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			</div>
		</div>
 
		<div id="navigation">
			<h2>MENU</h2>
			<ul>
				<li><a href="">Home</a></li>
				<li><a href="">Lodge History</a></li>
				<li><a href="">W.H. Green</a></li>
				<li><a href="">Past Masters</a></li>
				<li><a href="">Installation</a></li>
				<li><a href="">Members Page</a></li>
				<li><a href="">Calendar/Events</a></li>
				<li><a href="">Meetings</a></li>
				<li><a href="">Club 300</a></li>
				<li><a href="">Regalia</a></li>
				<li><a href="">F.A.Q.</a></li>
				<li><a href="">Masonic Jokes</a></li>
				<li><a href="">Things Scottish</a></li>
				<li><a href="">Contact Us</a></li>
				<hr>
				<p>Unity Lodge extends<br>
                   a cordial invitation to all<br>
                   Masonic Brethren to join<br>
                   with us in Masonic<br>
				   Fellowship.</p>
 
                <p>We also welcome any<br>
                   approach by Brethren<br>
				   who may be new to the<br>
				   area and are seeking to<br>
				   affiliate with a lodge in<br>
				   Townsville.</p>
			</ul>
		</div>
 
        <div id="extra">
			<h2>Extra Stuff Goes Here</h2>
			<p>Sometimes this would be called a <em>sidebar</em>, but it doesn't always have to be on the side to be called a <em>sidebar</em>. Sidebars can be on tops of things, below things, but they are usually beside things &ndash; hence it being a called a sidebar.</p>
			<p><small>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</small></p>
 
		</div>
 
		<div id="footer">
			<ul>
				<li><a href="">Home</a></li>
				<li><a href="">Lodge History</a></li>
				<li><a href="">W.H. Green</a></li>
				<li><a href="">Past Masters</a></li>
				<li><a href="">Installation</a></li>
				<li><a href="">Members Page</a></li>
				<li><a href="">Calendar/Events</a></li>
				<li><a href="">Meetings</a></li>
				<li><a href="">Club 300</a></li>
				<li><a href="">Regalia</a></li>
				<li><a href="">F.A.Q.</a></li>
				<li><a href="">Masonic Jokes</a></li>
				<li><a href="">Things Scottish</a></li>
				<li><a href="">Contact Us</a></li>
			</ul>
			<p>Footer stuff goes here. Copyright, disclaimers &ndash; stuff like that.</p>
		</div>
 
	</div>
</body>
</html>

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 34 weeks 5 days ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Lots of fixed layout examples at...

http://www.pmob.co.uk/ Maybe something there you can adapt to your requirements.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference