Skip navigation
Seaside333
Currently Being Moderated

Moving CSS Image Sprites On A Site

Apr 11, 2012 10:05 PM

I am using a rollover pure css image sprite on a site.

 

I was wondering how you would move them around, so you can wrap text around them? Basically treat the sprite like an image.

 

Thanks

 

Here is the CSS for the sprite I am using for the sprite:

 

a.image_sprite:link, a.image_sprite:visited {

    display:block;

    width:310px;

    height:259px;

    text-indent:-9999px;

    background-image: url(assets/image_one.jpg);

    background-repeat: no-repeat;

    background-position: 0 0;

 

}

a.image_sprite:hover, a.image_sprite:active {

    display:block;

    width:310px;

    height:259px;

    text-indent:-9999px;

    background-image: url(assets/image_one.jpg);

    background-repeat: no-repeat;

    background-position: 0 -259px;

    font-family: Arial, Helvetica, sans-serif;

}

 

 

Here is the sprite inside the html with text that i want to wrap around it:

 

<div class="content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla suscipit varius sem, ac tincidunt dolor egestas sed. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Cura</p><p><a href="#" class="image_sprite"></a></p>

  <p>Lorem ipsum <br/>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla suscipit varius sem, ac tincidunt dolor egestas sed. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Cura</p></div>

 
Replies
  • Currently Being Moderated
    Apr 11, 2012 10:07 PM   in reply to Seaside333

    Do you have a link or a screenshot so we can see what you are trying to do?

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 11, 2012 10:11 PM   in reply to Seaside333

    If I understand correctly you can either add an align rule to your css or select your image and set the alignment in the property inspector.

     

    Screen Shot 2012-04-11 at 10.09.38 PM.png

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 11, 2012 10:12 PM   in reply to Seaside333

    You may also need to remove the <p> tags from your image.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points