Clever Geek Handbook

Place the sprite image to the right of the anchor label?

I have a css image of a sprite. And it works great, but the problem is I want the image to be to the right of the anchor tag text. But it is displayed on the left side. The sprite image is here.

http://jstiles.com/temp/1360875952/ctrls/css-sprite.png

Expected Result:

[Mylinktext]<MyImagehere>

The actual result I am getting is

<MyImagehere>[Mylinktext]

I don't want to use after the pseudo class. Try it out in IE7. My code is below.

.ctrls
    {
        font-family:Arial;
        font-weight:bold;
        font-size:16px;
        color:black;
        background-image: url(images/ctrlsprite.png);
        //background-image: url(images/css-sprite.png);
        background-repeat:no-repeat;
        text-decoration:none;
        display: inline-block;
        padding-left:30px;  
    }
    .ctrls:hover
    {
        background-position: 0px -252px;
        text-decoration:underline;      
    }
    a.magenta
    {
        background-position:0px -144px;
    }

And HTML

<div>
    <p>Magenta</p>
    <a href="#" class="ctrls magenta">Et Movet</a>
</div>

How do I fit the right side of the image into the text?

+3


source to share


2 answers


How do I add <span>

to the right of the text in a tag anchor

? Demo

Html

<div>
    <p>Magenta</p> <a href="#" class="ctrls magenta">Et Movet <span class="icon"></span></a>
</div>


CSS

.ctrls {
    font-family:Arial;
    font-weight:bold;
    font-size:16px;
    color:black;
    text-decoration:none;
}
.ctrls:hover {
    text-decoration:underline;
}
.ctrls .icon {
    display: inline-block;
    background-image: url(http://jstiles.com/temp/1360875952/ctrls/css-sprite.png);
    background-repeat:no-repeat;
    width: 16px;
    height: 16px;
    background-position:0px -144px;
}
.ctrls:hover .icon {
    background-position: 0px -252px;
}
+5


source


When I tried my code, the result seems to be what you want: [Mylinktext] <MyImagehere>. I probably missed something. Try to explain what you will try to help you.



Personally, I wouldn't use a sprite. Instead, I would make one image per color (I find it easier to work with) or better yet, create a font with the character I want (link: http://mashable.com/2011/11/17/ free-font-creation-tools / ; i haven't tried any of the programs so i don't know how good they are) and then use the @ font-face rule (link: http://www.w3schools.com/cssref/css3_pr_font -face_rule.asp ).

0


source






More articles:


All Articles