CODEWITHSUNDEEP
htmlcss
user977706
user977706

Reputation:

Sprites and text size

Text making line

I've created a sprite at a website I'm using to learn CSS at http://flexibletheme.tumblr.com/, however since the width is set at 24px the text tries to make a small vertical column.

Anyway to get it to render normally with 24px of margin on the right?

Upvotes: 0

Views: 201

Answers (5)

albert
albert

Reputation: 8153

ditch the width:24px; add padding-left:24px

Upvotes: 0

Tyom
Tyom

Reputation: 303

If IE7 support (and below) is not an issue, you could use :before pseudo element without adding any extra mark-up:

#links a {
    display: block;
    position: relative;
    padding: 2px 2px 2px 30px;
    min-height: 20px;
    line-height: 24px;
}
#links a:before {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    width: 24px;
    height: 24px;
    background: url(http://static.tumblr.com/wgijwsy/itFlt1l8x/links.png);
}
a#rss:before { background-position: -24px 0 }
a#facebook:before { background-position: 0 -24px }
a#twitter:before { background-position: 0 -48px }

Otherwise, add span inside the anchors and replace a:before with a span.icon.

And move the h2 outside of your ul. That's invalid HTML.

Upvotes: 0

sandeep
sandeep

Reputation: 92803

write this white-space: nowrap; in your a tag 

#links li a{white-space: nowrap;}

Upvotes: 0

George Hess
George Hess

Reputation: 689

You should put your sprite inside of a nested <span> instead of wrapping it around your link text. Like this:

<a href="#"><span class="sprite"></span>Sample Link</a>

Be sure to either float your sprite to the left or make it display:inline-block; so that it can retain a width and height but still be inline with your link text.

Upvotes: 1

Hedde van der Heide
Hedde van der Heide

Reputation: 22449

You should wrap the element around your sidebar unordered list and children instead of closing it before it does anything:

<aside>
   <ul>
      <li>stuff</li>
   </ul>
</aside>

Then give it a width, or let content and sidebar float and clear them after. (I'd also recommend looking into stuff like grids for ease.. http://978.gs/)

Upvotes: 0

Related Questions