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 2 of 2
  1. #1
    New Coder
    Join Date
    Mar 2012
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Exclamation Help please: top fixed element to hide scrolling content

    Hello everyone,

    I am currently doing my website and have an issue with the fixed header div. So far I have got it to stay centred within the screen, and also be 25px from the top of the screen. However, When I scroll down the page, the header div stays where it is (as expected) but the content scrolls behind it and then shows in the '25px' margin that is at the top of the div to take it away from the top of the screen. I only want the background pattern to show in that area at the top?

    Is there a way to do this, I have searched everywhere for a solution!

    Only way I found was to use an image for the background pattern at the top but it never seems to line up so looks dreadful...

    Any help would be amazing as this is driving me crazy!

    I also have an issue with the iPad where when I zoom in, it separates the header and the content... no idea why this is being done, is it possible to stop zoom altogether through pinching?

    Google wasn't very useful in finding a solution. Everything I tried just didn't work

    Website is located at:
    www.jb-design.me/marchupdate/

    Thank you!

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,694
    Thanks
    0
    Thanked 232 Times in 227 Posts
    Hi there jbyrne,

    for your first problem, try changing these rules...
    Code:
    
    #headercontainer { 
    	position: relative; 
    	width: 980px; 
    	height: 254px; 
    	margin: 0 auto; 
    	padding: 0; 
    }
    
    #header { 
    	position: fixed; 
    	top: 25px; 
    	height:254px;
    	bottom:0px;
    	text-align:center;
    	width: 980px; 
    	margin: 0; 
    	padding: 0;
    	z-index:100;
    	overflow:hidden;
    }
    .content {
    	position:relative; 
    	top:0px;
    	padding: 0; 
    	width: 980px; 
    	margin: auto; 
    	height:auto;
    }
    
    .info{
    	position:absolute;
    	background-color:#262626;
    	top:0px;
    	height:150px;
    	width:980px;
    	text-align:center;
    	padding-top:32px;
    	padding-bottom:10px;
    }
    
    ...to the these...
    Code:
    
    #headercontainer { 
        position:fixed;
        top:0;
        width:100%;
     }
    
    #header { 
        position:relative;
        z-index:1;
        width:980px;
        padding-top:25px;
        margin:auto;
        text-align:center;
        background-image:url(../images/background-pattern.jpg);
     }
    
    .content {
        width:980px; 
        margin:254px auto 0;
     }
    
    .info {
        height:150px;
        padding-top:32px;
        padding-bottom:10px;
        background-color:#262626;
        text-align:center;
     }
    
    I cannot help you with your second problem, the "iPad".

    Also note that your page has 35 coding errors that require your attention...

    coothead
    Last edited by coothead; 03-17-2012 at 11:34 AM.


  •  

    Tags for this Thread

    Posting Permissions

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