CODEWITHSUNDEEP
csscss-sprites
svk
svk

Reputation: 4553

Place the Sprite image right side of the anchor tag?

I am having the css sprite image.And it works fine but the issue is I want the image right side of the anchor tag's text.But it displays in the left side.The sprite image is here.

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

Expected result:

[Mylinktext]<MyImagehere>

Actual result what I am getting is 

<MyImagehere>[Mylinktext]

I don't want to use after pseudo class.Becuase it wont work out in the IE7 browser too.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 can I place the image right side of the Text?

Upvotes: 3

Views: 3551

Answers (2)

matsolof
matsolof

Reputation: 265

When I tried your code, the result seems to be as you want: [Mylinktext]<MyImagehere>. I'm probably missing something. Try and explain what and will try and help you out.

Personally, I wouldn't use a sprite. Instead, I would make one image per color (I find that easier to work with) or, even better, make a font with the character I want (reference: 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 (reference: http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp).

Upvotes: 0

Hari Pachuveetil
Hari Pachuveetil

Reputation: 10374

How about adding a <span> to the right of the text in the anchor tag? 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;
}

Upvotes: 5

Related Questions