Jump to content

Positioning of a sprite?


hariskar
 Share

Recommended Posts

In my page www.mikroviologos.gr I have made a sprite for some images, but would like to add login.png in this sprite. The problem is that I can not make the login.png from sprite to show in the login/logout block.Here is the code of the block:

<img src="http://static.mikroviologos.gr/image/hktheme/login.png" alt="Έξοδος μελών" width="16" height="16" style="margin:0 5px 0 25px;"> <a href="/user/logout">Έξοδος <?php global $user; print $user->name;?></a>

Of course I change login.png to sprite1.png, but where should I define the positioning and size of the part of the sprite?Regardless what I do, the whole sprite shows instead of the wanted part.Thank you!

Edited by hariskar
Link to comment
Share on other sites

Thank you, I have done this for login/logout.But I have difficulties positioning the iso image in the block like it is now. For

<p class=iso>text text</p>

If I put

.iso{background:url(http://static.mikroviologos.eu/image/hktheme/sprites2.png) 0 10px no-repeat;}

the image becomes a background of the text. How can I achieve float:left with the sprite?

Edited by hariskar
Link to comment
Share on other sites

You need a different element to put the sprite in.
Not! necccesssssarillllly
.iso{background:url(http://static.mikroviologos.eu/image/hktheme/sprites2.png) 0 10px no-repeat; height: 30px; line-height:30px; padding-left: 30px;float: left;}

<p class="iso">text text</p>

Link to comment
Share on other sites

Thank you, I made a div element inside p

<p><div class="imageiso" style="float:left";</div>text text</p>

and in css

.imageiso{background:url(http://s.mikroviologos.gr/image/hktheme/sprites2.png) 0 10px no-repeat;}

but I can not make the float:left. With

<p class="iso">text text</p>

the block text is outside the block, there is no block styling, only the title. Also, the padding is for all lines and not only for the lines beside the iso image.Thank you for helping!

post-94250-0-21336200-1336727600_thumb.jpg

Edited by hariskar
Link to comment
Share on other sites

<p class="iso">text text</p>

the block text is outside the block, there is no block styling, only the title. Also, the padding is for all lines and not only for the lines beside the iso image.Thank you for helping!

??? I honestly can't figure out what you are trying to describe here? I think you mean this kind of layout
.iso{background:url(http://static.mikroviologos.eu/image/hktheme/sprites2.png) 0 10px no-repeat; height: 30px; line-height:30px; padding-left: 30px; margin: 0.5em 0;}

<div><h5 class="iso">Title text</h5><p>text text</p><p>text text</p><p>text text</p><p>text text</p><p>text text</p></div>

  • Like 1
Link to comment
Share on other sites

Thank you!It works now:

<div><img class="iso"></h5><p>text text</p></div>

.iso{background:url(http://s.mikroviologos.gr/image/hktheme/sprites2.png) 0 -67px no-repeat;height:81px;width:82px;margin-right:5px;float:left}

Edited by hariskar
Link to comment
Share on other sites

  • 11 months later...

You have a image tag that is not complete. <img class="iso" /> It should have an alt="" and src="image.url.here.jpg" Either fix that or remove the image tag if you don't need it. If you are trying to display an image to the left of your content (text) then you don't need css background.

Edited by newseed
Link to comment
Share on other sites

The image is a sprite and the path is defined in css:

.iso{background:url(http://s.mikroviologos.gr/image/hktheme/sprites2.png) 0 -67px no-repeat;height:81px;width:82px;margin-right:5px;float:left}

Should it be defined in <img class="iso" /> too? I fixed the alt="" error.

Edited by hariskar
Link to comment
Share on other sites

You are using the image tag incorrectly. It still has an error per the validator. It must have src="image-file-url.jpg". Since you want to use a background image then I suggest you use span tag instead. <span class="iso"></span><p>text here</p>

Edited by newseed
  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...