Help with fixed header, menu and footer.

Dev Shed Forums Sponsor:

October 21st, 2012, 01:26 PM

SunnyZ

Registered User

Join Date: Oct 2012

Posts: 2

Time spent in forums: 53 m 23 sec
Reputation Power: 0

Help with fixed header, menu and footer.

Hello there!

I am having a bit of trouble with this website I am working on.
Basically I wanted to have a static header, menu bar and footer, then the 'content' can be scrolled. That is all working fine, however I am having a bit of trouble when you resize the browser window.

If the browser window gets smaller than the width of the website, a scroll bar down at the bottom appears, which is fine, however when you move the scroll bar sideways the 'content' moves, but the header, menu and footer stay still putting the whole thing out of whack.

Here is the website: ept1.net

Here is the CSS style sheet:

Code:

body {margin: 0; padding: 0; background-color:black; }

#imSite {
	width: 945px;
	margin: 0px auto;
	text-align: left; 
	}
	
#imHeader {
	height: 97px;
	background-image: url('top.jpg');
	background-repeat: no-repeat;
	background-position: left top;
	}
	
#imBody {
	position:absolute;
	width: 945px;
	background-image: url('content.jpg');
	background-repeat: repeat-y;
	background-position: left top;
	margin-left: auto;
	margin-right: auto;
	}
	
#imMenuMain {
	width: 99px;
	float: left;
	padding: 10px 0 0 16px;
	margin-left: 10px;
	}
	
#imContent {
	width: 773px;
	float: left;
	margin-top: 1px;
	margin-left: 0px;
	margin-bottom: 300px;
	}
	
#imFooter {
	position:fixed;
	bottom:0px;
	width: 945px;    
        height: 39px; 
	height: 39px;
	background-image: url('bottom.jpg');
	background-repeat: no-repeat;
	background-position: left top;
	}

Is there a way I can disable the content scrolling sideways, or make it so the entire page scrolls sideways, not just the content div?

Any help would be greatly appreciated!
Thanks.
-SunnyZ

October 22nd, 2012, 01:42 AM

simplypixie

Contributing User

Join Date: Aug 2012

Posts: 104

Time spent in forums: 18 h 33 m 57 sec
Reputation Power: 11

Why not make your content area a fluid width rather than fixed and then it will always fit in the window without the horizontal scroll bar.

October 22nd, 2012, 02:28 AM

Heatleakz

Registered User

Join Date: Oct 2012

Location: Stockholm, Sweden

Posts: 16

Time spent in forums: 6 h 27 m 22 sec
Reputation Power: 0

Hello SunnyZ,

The left sidebar doesn't stick to it's position because it's attached into the body which you've assigned as "absolute".

Replace "absolute" with "fixed" and you'll notice very quick that once you've resized your browser window the elements will no longer stick to the edge of the browser window.

Code:

#imBody {
position:fixed;
}

October 23rd, 2012, 01:42 PM

fool4krist

Registered User

Join Date: Oct 2012

Posts: 13

Time spent in forums: 2 h 3 m 21 sec
Reputation Power: 0

Or to make matters simpler, just put the content into a frame, since that is pretty much what you are already doing.

October 23rd, 2012, 02:22 PM

SunnyZ

Registered User

Join Date: Oct 2012

Posts: 2

Time spent in forums: 53 m 23 sec
Reputation Power: 0

Problem Solved :D

Hello there!

Thank you for all your help, I have solved my problem

I ended up just separating the content background image into two separate ones.
One image for the menu, and one for a new div for the right side 'bar'.
The content window just has a solid background colour.

Now when the browser window gets resized to smaller than the site width, the content window will side scroll sliding underneath the menu bar, so everything is still accessible and looks neat and tidy. =D

I know it is kind of a sloppy work around, the header, footer and right side bar still go off the page, but that does not really matter all that much.

Thanks again ^^

Help with fixed header, menu and footer.

Developer Shed Advertisers and Affiliates