Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    924
    Thanks
    76
    Thanked 29 Times in 29 Posts
    What you can do is put ALL of your header, menu, content and footer WITHIN another div, whose margin is set to auto so that when the browse window is decreased, all your content will stay together.

    Set the width of the 'container' div to whatever you like. Set all the other div's to be 100% width so that they span the full length of your container div. I'd get rid of your absolute positioning also unless it's absolutely necessary.

    Try this:
    Code:
    <html>
    <head>
    <title>test</title>
    <style type="text/css">
    #container {border: 1px solid black;
               width: 960px;
               margin: 0 auto;}
    		   
    #header {border: 1px solid black;
            height: 100px;
    		width: 100%;}
    		
    #menu {border: 1px solid black;
          height: 50px;
    	  width: 100%;}
    	  
    #content {border: 1px solid black;
             height: 500px;
    		 margin-top: 3em;
    		 width: 100%;}
    		 
    #footer {border: 1px solid black;
            height: 100px;
    		width: 100%;
    		margin-top: 3em;}
    </style>
    </head>
    <body>
    
    <div id="container">
       <div id="header">
       
       </div>
       
       <div id="menu">
       
       </div> 
    
       <div id="content">
       
       </div>
    
       <div id="footer">
       
       </div>
    </div>
    
    </body>
    </html>
    When you make the browser window smaller, the container seems to align to the left hand side of the bottom scroll bar but all of the content stays together, which I think is what you wanted.

    Anyway, hope this helps you somewhat.

    Regards,

    LC.

  • #3
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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 ^^


  •  

    Posting Permissions

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