Question

This is my code:
<li><div class="onleft"></div><a href="<? echo $site;?>top-likes" id="on">Top</a><div class="onright"></div></li>

This is my css’s:

.onleft{
        display:block;
        position:relative;
        color:#0d95d4;
        float:left;
        background-image:url(images/logonav_onleft.png);
        background-repeat:no-repeat;
        width:4px;
        height:47px;
        font-family: Helvetica, Tahoma, sans-serif;
        font-size: 14px;
        font-style: normal;
        line-height: 27px;
        font-weight: bold;
        font-variant: normal;
        text-decoration:none;
    }

    .onright{
        display:block;
        position:relative;
        color:#0d95d4;
        float:right;
        background-image:url(images/logonav_onright.png);
        background-repeat:no-repeat;
        width:4px;
        height:47px;
        font-family: Helvetica, Tahoma, sans-serif;
        font-size: 14px;
        font-style: normal;
        line-height: 27px;
        font-weight: bold;
        font-variant: normal;
        text-decoration:none;
    }

    #on{
        display:block;
        margin-top:-10px;
        color:#0d95d4;
        float:left;
        background: url(images/logonav_on.png) repeat-x;
        width:100%;
        height:47px;
        font-family: Helvetica, Tahoma, sans-serif;
        font-size: 14px;
        font-style: normal;
        line-height: 27px;
        font-weight: bold;
        font-variant: normal;
        text-decoration:none;
    }

My problem is that, instead of the right and left images showing ON the x-repeated image, each image shows in a new line.
I tried solving it with the display property but it didn’t work…
I think it might be like that because the width is set to 100% in #on but I don’t really know what to do in order to fix that.

Any suggestions? Thank you!

Link : http://ilikeyou.tk/top-likes

Answer 1

To use float:, you’ll have to remove position: and display:block;.

Also, I don’t know how you can have 100% on #on when it’s really 100% minus the width (8 pixels) of .onleft and .onright. I would reduce it to something that works for most common window widths.

.onleft{
 /* display:block; <-- REMOVE THIS LINE */
 /* position:relative; <-- REMOVE THIS LINE */
    color:#0d95d4;
    float:left;
    background-image:url(images/logonav_onleft.png);
    background-repeat:no-repeat;
    width:4px;
    height:47px;
    font-family: Helvetica, Tahoma, sans-serif;
    font-size: 14px;
    font-style: normal;
    line-height: 27px;
    font-weight: bold;
    font-variant: normal;
    text-decoration:none;
}

.onright{
 /* display:block; <-- REMOVE THIS LINE */
 /* position:relative; <-- REMOVE THIS LINE */
    color:#0d95d4;
    float:right;
    background-image:url(images/logonav_onright.png);
    background-repeat:no-repeat;
    width:4px;
    height:47px;
    font-family: Helvetica, Tahoma, sans-serif;
    font-size: 14px;
    font-style: normal;
    line-height: 27px;
    font-weight: bold;
    font-variant: normal;
    text-decoration:none;
}

#on{
 /* display:block; <-- REMOVE THIS LINE */
    margin-top:-10px;
    color:#0d95d4;
    float:left;
    background: url(images/logonav_on.png) repeat-x;
    width: 98%;  /* Adjust this to suit your design */
    height:47px;
    font-family: Helvetica, Tahoma, sans-serif;
    font-size: 14px;
    font-style: normal;
    line-height: 27px;
    font-weight: bold;
    font-variant: normal;
    text-decoration:none;
}