• Locked
3 replies [Last post]
Sun, 2012-10-21 18:36
SunnyZ
SunnyZ's picture
Offline
newbie
Last seen: 10 years 15 weeks ago
Timezone: GMT+8
Joined: 2012-10-21
Posts: 2
Points: 3

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:

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

Top
Tags:
Mon, 2012-10-22 12:46
#1
pav
pav's picture
Offline
Regular
Last seen: 9 years 31 weeks ago
Timezone: GMT+1
Joined: 2012-10-18
Posts: 33
Points: 41

The problem is your header -

The problem is your header - #imHeader is having a width of 945px. That is why it will not adjust to browser resize. If you try specifying the width in % it will work, but you will need rework on the markup for the header.

Top
Tue, 2012-10-23 19:25
#2
SunnyZ
SunnyZ's picture
Offline
newbie
Last seen: 10 years 15 weeks ago
Timezone: GMT+8
Joined: 2012-10-21
Posts: 2
Points: 3

Problem Solved =D

Hello there!

Thank you for all your help, I have solved my problem Laughing out loud
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 ^^

Top
Wed, 2012-10-24 11:20
#3
pav
pav's picture
Offline
Regular
Last seen: 9 years 31 weeks ago
Timezone: GMT+1
Joined: 2012-10-18
Posts: 33
Points: 41

Nice to know you have fixed

Nice to know you have fixed it.

Top
  • Locked