Positioning of a sprite?

[hariskar]

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 May 2, 2013 by hariskar

[eTianbun]

http://www.w3schools.com...image_sprites

[dsonesuk]

Sprite image won't work for image as its used as background, and you are not supposed to use background-image on img element, but it can be used for anchor element.

[hariskar]

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 May 11, 2012 by hariskar

[Ingolme]

You need a different element to put the sprite in.

[dsonesuk]

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>

[hariskar]

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!

Edited May 25, 2012 by hariskar

[dsonesuk]

<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>

[hariskar]

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 May 25, 2012 by hariskar

[hariskar]

I get 2 errors in html validator for this image http://validator.w3.org/check?uri=http%3A%2F%2Fwww.mikroviologos.gr&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.3+http%3A%2F%2Fvalidator.w3.org%2Fservices Any help?Thank you

[newseed]

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 May 2, 2013 by newseed

[hariskar]

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 May 2, 2013 by hariskar

[newseed]

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 May 2, 2013 by newseed