Grow your CSS skills. Land your dream job.

[Solved] CSS position: fixed and floating

  • # December 29, 2009 at 4:37 pm

    Afternoon!

    I am having some trouble with positioning and floats. maybe you can help me or point me in the right direction.

    What I am trying to do is have a "status bar" (aka: quick links) on the bottom of my page for easy access, here is the css for that. This works great so far.

    Code:
    #statusBar{
    position:fixed;
    padding-top: 5px;
    background:transparent url(../images/statusbar_image_02.png) repeat-x scroll center center;
    background-color: #ccc;
    left:0;
    bottom:0;
    height:26px;
    width:100%;
    z-index:1000;
    }

    Now I would like to add some buttons to the status bar that I have created. Here is that css.

    Code:
    a.statusbar-button{
    display: block;
    height: 32px;
    float: left;
    color: #444;
    background: transparent url(‘../images/button-link-end.png’) no-repeat scroll center right;
    font: normal 12px arial, sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    margin-right: 6px;
    padding-right: 18px;
    position: fixed;
    bottom: -3px;
    }
    a.statusbar-button span {
    position: relative;
    display: block;
    float: left;
    background: transparent url(‘../images/button-link.png’) no-repeat scroll center left;
    padding: 8px 0 8px 18px;
    }
    a.statusbar-button:hover{
    outline: none;
    color:#990000;
    }
    a.statusbar-button:active span {
    background-position: center left;
    }
    .small-button-left{
    display: block;
    float: left;
    left: 0;
    bottom: 0;
    width: 30px;
    }
    .small-button-right{
    display: block;
    float: right;
    right: 0;
    bottom: 0;
    width: 30px;
    }

    here is the html for the whole status bar and buttons.

    the problem is that the floats on the buttons are not working. They are just piling up on each other. what am I doing wrong. As you can see in the attached image. I have been fighting this for a few days now and just fixing to give up. HELP!!

    # December 29, 2009 at 8:34 pm

    I have uploaded a live example of what I am talking about.

    http://wattsupnow.com/sandbox/

    Thanks for taking the time and looking!

    # December 31, 2009 at 12:43 pm

    I usually construct things like this (which have a horizontal layout) using a UL method. That is to say that you could reconstruct the status button segment using <ul><li>..</li></ul> constructs. You would still use the CSS display:block method, float:left as you are now, but the <li> items would flow side by side, which is enforced based on the container which they are placed within.

    Something like this..

    With the Style looking something like this..

    Code:
    #statusbar {
    position:fixed;
    padding-top: 5px;
    background:transparent url(../images/statusbar_image_02.png) repeat-x scroll center
    }

    #statusbar ul li a.statusbar-button {
    display: block;
    height: 32px;
    float: left;
    color: #444;
    background: transparent url(‘../images/button-link-end.png’) no-repeat scroll center right;
    font: normal 12px arial, sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    margin-right: 6px;
    padding-right: 18px;
    position: fixed;
    bottom: -3px;
    }

    Obviously, I’m hacking up your code and some things are missing, but just want to give you the idea… hope it helps.
    And to give you an example, this is a site that I’m getting together for a proposal for a client.. http://acecga.mikehuckle.com/ – it’s not completed yet but the top horizontal nav menu is set up this way.

    # December 31, 2009 at 8:39 pm

    atlhuck, Thanks for you post. I went ahead and used your ideal. works good now. Thanks

    # January 1, 2010 at 1:28 pm

    Glad to hear that it worked.. send a link to the page when you get it done!

    # June 10, 2013 at 9:03 am

    you can see an example on my site as well.
    [example page](http://neutrosolutions.com/services/website-design-development.html “example link”)

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".