SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member barbar2's Avatar
    Join Date
    May 2013
    Location
    Jordan
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to make a sliding header

    Code:
    <div style="background:#000; color:#fff; top:0px; width:100%; height:50px;">TEXT</div>
    I use this code on my website to make a header. but I want the header to slide when scrolling down. As like on facebook, google plus... any ideas?

    Thanks in advance.

  2. #2
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    85
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Try adding fixed position and a z-index:

    Code:
    <div style="background:#000; color:#fff; top:0px; width:100%; height:50px; position:fixed; z-index:20;">TEXT</div>
    The z-index is just so that "American Express... " doesn't overlap.

  3. #3
    SitePoint Zealot radiant_luv's Avatar
    Join Date
    Apr 2009
    Location
    WebVille
    Posts
    130
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If I understood you correctly, you'll have position it to the top.

    you may try
    .class or #id (of the div){
    position: relative;
    left: 0;
    right: 0;
    top: 0;
    }
    Personal Playground: www.sudipmondal.com
    Twitter: @iam_sudip

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If you want a "fixed header" then as zot said you will need to use position:fixed as described. However you will need to make sure that the first element on the page has some margin or padding so that it is not initially obscured by the fixed header. Luckily your page container already has quite a big margin-top so you should be ok unless you want it increased to match the original gap from the top.

    A bigger issue is that you have added the div above the html5 doctype and will send ie9 and under into quirks mode and behave much like IE5!! In quirks mode those browsers won't understand fixed positioning so you need to restore your html5 doctype to the top of the document and move that div into the body.

    So change this section:

    Code:
    <div style="background:#f9f9f9; text-align: center; color:#727272; top:0px; width:100%; height:45px;"><a href="http://2hinsurance.com/"><img class="alignnone size-full wp-image-8" alt="travelers home insurance" src="http://2hinsurance.com/wp-content/uploads/2013/05/travelers-home-insurance1.jpg" width="450" height="40" /></a></div>
    <!DOCTYPE html>
    To this:

    Code:
    <!DOCTYPE html>
    and then move that div into the body:

    Code:
    </head>
    <body class="home blog custom-background custom-font-enabled single-author">
    
    <div style="background:#f9f9f9; text-align: center; color:#727272; top:0px; width:100%; height:45px;"><a href="http://2hinsurance.com/"><img class="alignnone size-full wp-image-8" alt="travelers home insurance" src="http://2hinsurance.com/wp-content/uploads/2013/05/travelers-home-insurance1.jpg" width="450" height="40" /></a></div>
    
    <div id="page" class="hfeed site"> etc...
    It would also be better to move that inline css to the end of your main stylesheet.

    e.g.
    html:
    Code:
    <div class="fixed-top"><a href="http://2hinsurance.com/"><img class="alignnone size-full wp-image-8" alt="travelers home insurance" src="http://2hinsurance.com/wp-content/uploads/2013/05/travelers-home-insurance1.jpg" width="450" height="40" /></a></div>
    CSS:
    Code:
    .fixed-top{
    	background:#f9f9f9; 
    	text-align: center; 
    	color:#727272; 
    	position:fixed;
    	left:0;
    	z-index:99;
    	top:0; 
    	width:100%; 
    	height:45px;	
    }

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,804
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Thus far, Zot's answer comes closest.


    If want is your masthead (header) to 'stick' to the to even when the window scrolls then you need to give that element position:fixed; and top:0

    Since giving an element position:fixed; causes it to shrink wrap, you will need to add width:100%

    here is the tricky part:


    position:fixed; takes the element out of the normal flow; is as if other elements dont even know it's there. this means you MUST MAKE SPACE FOR IT SOMEHOW.

    so we need to make the element a explicit height also, and give the next element THAT EXACT amount of in padding-top/bottom or margin-top/bottom


    just to make things air-tight, we give the masthead element a large z-index, in case we ever need to AP/RP/FP any other element in the page.

    so in the end , something like this :

    #mastheadDiv{top:0px; width:100%; height:50px; position:fixed; z-index:10000;}
    #page {padding-top:50px}


    You need to rethink your code, you have HTML OUTSIDE the BODY tag!!! Before the doctype, even!!! BAD and BAD enough to begin with. Put the div within the body tag, one of the advantages of position fixed, is that it will display wherever you tell it to, regardless of where in the source the actual element is coded. We can achieve the effect we want w/o having to write poor HTML

    Hope that helps.

    Edit: well, Paul snuck in there and beat me to the punch. That's what I get for taking a lunch mid way through replying to a post.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post

    Edit: well, Paul snuck in there and beat me to the punch. That's what I get for taking a lunch mid way through replying to a post.
    lol - sorry Ray. I didn't see you eating in the corner there

  7. #7
    SitePoint Member barbar2's Avatar
    Join Date
    May 2013
    Location
    Jordan
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you guys your posts were really helpful


Tags for this Thread

Bookmarks

Posting Permissions

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