#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    2
    Rep 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
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    119
    Rep Power
    32
    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.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Location
    Stockholm, Sweden
    Posts
    16
    Rep 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;
    }
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    13
    Rep Power
    0
    Or to make matters simpler, just put the content into a frame, since that is pretty much what you are already doing.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    2
    Rep 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 ^^

IMN logo majestic logo threadwatch logo seochat tools logo