1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How to make fixed top bar or bottom bar?

Discussion in 'CSS' started by proxywhereabouts, Sep 1, 2009.

  1. #1
    I saw some site have this top or bottom bar which when we scroll the page, the bar stay fixed.

    Tried to do that on my site but infortunately it looks weird and ugly.

    Can anyone help me by teaching me how to make one?

    Forgot to add example:
    Look at this site www.share2many.com, on top of the page.
     
    Last edited: Sep 1, 2009
    proxywhereabouts, Sep 1, 2009 IP
  2. HighRankingSEO

    HighRankingSEO Active Member

    Messages:
    423
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    50
    #2
    Here is some that will make like a box if thats what you mean....
    <script>
    function calculateBgX(oElement) {
    return document.body.scrollLeft - getOffsetLeft(oElement);
    }
    function calculateBgY(oElement) {
    return document.body.scrollTop - getOffsetTop(oElement);
    }

    function getOffsetTop(oElement) {
    var iResult= oElement.offsetTop;
    while (oElement.offsetParent) {
    oElement = oElement.offsetParent;
    iResult += oElement.offsetTop;
    }
    return iResult;
    }
    function getOffsetLeft(oElement) {
    var iResult= oElement.offsetLeft;
    while (oElement.offsetParent) {
    oElement = oElement.offsetParent;
    iResult += oElement.offsetLeft;
    }
    return iResult;
    }
    </script>
    <style>
    #fixed {
    position: fixed;
    position: expression("absolute");
    left: 0px;
    padding: 0px;
    width: 100%;
    top: 0px;
    height: 89px;
    top: expression(eval(document.body.scrollTop));
    }
    body {
    background: url('x.gif');
    background-attachment: fixed;
    margin:0;
    }

    html {height:100%}

    </style>
    <div id="fixed">
    <iframe src="http://www.sacredfools.org/top-test.htm" frameborder=0 marginheight=0
    marginwidth=0 width=100% height=89px scrolling=no"></iframe>
    </div>
    <div style="height:89px"></div>
     
    HighRankingSEO, Sep 1, 2009 IP
  3. proxywhereabouts

    proxywhereabouts Notable Member

    Messages:
    4,027
    Likes Received:
    110
    Best Answers:
    0
    Trophy Points:
    200
    #3
    Updated the first post.

    Thanks HRSeo, but does it have to use iframe?
    That would restrict me from using adsense on that location right?
     
    proxywhereabouts, Sep 1, 2009 IP
  4. Master_Seller

    Master_Seller Well-Known Member

    Messages:
    731
    Likes Received:
    15
    Best Answers:
    0
    Trophy Points:
    110
    #4
    You dont have to use iframe and that whole script you can just use the position property to fixed and it will done
     
    Master_Seller, Sep 2, 2009 IP
  5. proxywhereabouts

    proxywhereabouts Notable Member

    Messages:
    4,027
    Likes Received:
    110
    Best Answers:
    0
    Trophy Points:
    200
    #5
    proxywhereabouts, Sep 2, 2009 IP
  6. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Yep just use position fixed.

    So something like:

    CSS:

    
    .fixedBar{
    width:100%;
    height:200px;
    background:#000;
    position: fixed;
    top:0;
    left:0;
    
    Code (markup):
    html
    
    <div id="fixedBar">content inside bar goes here</div>
    
    Code (markup):
     
    wd_2k6, Sep 3, 2009 IP
    proxywhereabouts likes this.
  7. proxywhereabouts

    proxywhereabouts Notable Member

    Messages:
    4,027
    Likes Received:
    110
    Best Answers:
    0
    Trophy Points:
    200
    #7

    This is what I saw using the code given.

    
    #top-line{
    width:100%;
    height:36px;
    background:#EF0E2C url(/images/bg-topline.gif);
    position: fixed;
    top:0;
    left:0;
    
    Code (markup):
    [​IMG]


    
    .top-line{
    width:100%;
    height:36px;
    background:#EF0E2C url(/images/bg-topline.gif);
    position: fixed;
    top:0;
    left:0;
    
    Code (markup):
    [​IMG]

    How can I fix it?
     
    proxywhereabouts, Sep 7, 2009 IP
  8. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Hi,

    Try this:

    HTML exactly:

    
    <div class="topLine">
    Hi, I'm some Fixed Content at the Top of the Page
    </div>
    
    Code (markup):
    CSS to go inside your stylesheet for the line exactly:

    
    .topLine{
    width:100%;
    position:fixed;
    top:0;
    left:0;
    z-index:1;
    text-align:center;
    }
    
    Code (markup):
    Just try that first with the text inside, then when it works you can replace it with your ad code. I can't see no reason why that wouldn't work.
     
    wd_2k6, Sep 7, 2009 IP
  9. proxywhereabouts

    proxywhereabouts Notable Member

    Messages:
    4,027
    Likes Received:
    110
    Best Answers:
    0
    Trophy Points:
    200
    #9
    Great! Now it works.
    What does z-index means actually if I may asked?

    rep+
     
    proxywhereabouts, Sep 7, 2009 IP
  10. WebEvader

    WebEvader Well-Known Member

    Messages:
    1,026
    Likes Received:
    21
    Best Answers:
    0
    Trophy Points:
    115
    #10
    It makes the bar stay in front of all of the content on the site.
     
    WebEvader, Sep 7, 2009 IP
    proxywhereabouts likes this.
  11. proxywhereabouts

    proxywhereabouts Notable Member

    Messages:
    4,027
    Likes Received:
    110
    Best Answers:
    0
    Trophy Points:
    200
    #11
    Oh, I thought so. Previous code put the bar behind content and scrolling looks weird. This fixed it.

    Many thanks.
     
    proxywhereabouts, Sep 7, 2009 IP
  12. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #12
    No problemo, as explained above the z-index is the ordering of the elements on the page.

    So if you wanted to position things one above another, you'd give it a higher z-index than the other elements.
     
    wd_2k6, Sep 7, 2009 IP
  13. Connarhea

    Connarhea Active Member

    Messages:
    208
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    55
    #13
    I understand the idea behind having a fixed bar, but I think using it would put people off. to me it looks kind of like a scam site if you have fixed top and/or bottom bars.

    It also forces the viewer to realise you are trying your hardest to make money off the site which takes away their enjoyment and makes them feel as though they are just a money making tool for you.

    You should always try your hardest to keep your ads minimal as possible and make them flow with your site ie; they have the same background colour and text colours as the appropriate parts in your site (same link colours as the links in your site and same general font colours) this can also help CTRs as people may think it is a part of your site.
     
    Connarhea, Sep 7, 2009 IP