Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] CSS position: fixed and floating

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #27366
    wattsup
    Member

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

    #68756
    wattsup
    Member

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

    http://wattsupnow.com/sandbox/

    Thanks for taking the time and looking!

    #68830
    atlhuck
    Participant

    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.

    #68816
    wattsup
    Member

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

    #68850
    atlhuck
    Participant

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

    #138202
    azeemgujjar
    Participant

    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)
  • The forum ‘CSS’ is closed to new topics and replies.