Home/ Questions/Q 3999988
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T07:43:34+00:00

The html code for the widget header is as follows. <div class=widget-header> <span>caption</span> <a

  • 0

The html code for the widget header is as follows. 

    <div class="widget-header">
                        <span>caption</span>
                                                    <a href="sh/index.php?type=rec">more</a>
                        <img src="/img/widgets/widgets_more.gif" />

    </div>

My CSS code is

.widget-header span { float: left; }
.widget-header a, img { float: right; }

If this, the widgets_more right arrow would position to the left of text ‘more’ like this,
enter image description here

How can I get the right order with modifying the css code?

Thanks.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Instead of placing the arrow next to the link as an image, you should set it as a background image in a class.

    Something like this should do it (untested but should work):

    CSS:

    a.widgets-more{
    background-image:url(/img/widgets/widgets_more.gif);
    background-position:right;
    background-repeat:no-repeat;
    padding-right:10px;
}

    If you want the link to appear on the left of the link, then use the following:

    a.widgets-more{
    background-image:url(/img/widgets/widgets_more.gif);
    background-position:left;
    background-repeat:no-repeat;
    padding-left:10px;
}

    Then apply the class to your link:

    <a class="widgets-more" href="sh/index.php?type=rec">more</a>

    Also, the element floated to the right should be stacked above the element floated to the left. So rearrange your HTML to look like this:

    <div class="widget-header">
    <a class="widgets-more" href="sh/index.php?type=rec">more</a>
    <span>caption</span>
</div>
    • 0