SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Align Images with Text (Span + CSS Backgrounds)

    This is the problem I'm currently facing, the images are suppose to be "indenting" with the text but instead they're breaking lines. I'm using spans with id and then using CSS with backgrounds to replace the images, i tried many things but still no luck. Any suggestions?

    Here's a picture for better understanding:

    http://img.skitch.com/20100505-q2hnp...sbgctq1ny6.png

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,761
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Hi, impossible to tell without a link .

    DO the spans have display:block set? Are there any block elements wrapping the words? If so, that's your issue

    If the above isn't true, then post a link and we will help
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here we go! I'm using display block for the spans and i'm not wrapping it (I think).

    Here's the link:

    http://igotjosh.com/sitedev/

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,761
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Yep, on #f and #rails_logo you set display:block. Remove that
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    You will probably need to use display:inline-block to control it a bit better.

    Code:
    #f {
        line-height:25px; 
        display:-moz-inline-box;/* ff2 - remove if you don't care */
         display:inline-block;    
         height:25px;
        width:20px;
        background: #3b5998 no-repeat center;
        border:1px solid white;
        text-align:center;
        text-transform:uppercase;
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •