SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2002
    Location
    Madison, WI
    Posts
    198
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Floating <span> to right edge of <h3>

    Hi,

    Not sure how to do this (see image).

    I have a span with the PRO background image. I want to have it follow the h3.





    PHP Code:
    <div class="recent-user">
                        <
    a href="/user/profile/JuliaMcConahay">
                            <
    img class="simple-border"  src="/dimages/load/11539_329332820388_636320388_9943867_1593113_n.jpg/tiny">
                        </
    a>
                        <
    h3>
                            <
    a href="/user/profile/JuliaMcConahay" class="more">
                                
    JuliaMcConahay</a>
                        </
    h3><span class="pro-badge"></span
    Not sure what CSS to use for <span class="pro-badge"></span>.

    I have this:
    Code:
    span.pro-badge { 
    margin-left:3px; 
    float:right; 
    width:21px; 
    height:13px; 
    background:url('/img/profile/pro-badge.png'); 
    background-repeat:no-repeat; }
    but it doesn't cooperate.

    Thanks,

    Ben
    :::::::::::::::::::::::::::::::::::::::::::::::::::
    Versa Studio
    ExpressionEngine experts
    bas (at) versa studio dot com

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Firstly, you'd need to put the span inside the H3 for better results. But …

    If you are just using a background image, there's no need for the span at all. Instead, put some right padding on the H3 and add in the image there as a background.

    Only thing is, you'd need to put a special class on any H3s with that image. E.g.

    Code:
    h3.pro-badge { 
      padding-right:24px;  
      background:url('/img/profile/pro-badge.png') no-repeat 100% 50%; 
    }

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,553
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    As Ralph said you could just use a background image n the h3 if you want the image at the far right. However if you want the image to be at the end of the text and not the end of the line then you will need to have the span follow the text and then set it to inline-block.

    e.g.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style>
    .recent-user h3 span {
        display:inline-block;
        width:21px;
        height:13px;
        background:url('/img/profile/pro-badge.png') no-repeat;
        margin:0 0 0 5px;
       overflow:hidden;
    }
    </style>
    </head>
    <body>
    <div class="recent-user">
        <p><a href="/user/profile/JuliaMcConahay"><img class="simple-border"  src="/dimages/load/11539_329332820388_636320388_9943867_1593113_n.jpg/tiny"></a></p>
        <h3><a href="/user/profile/JuliaMcConahay" class="more"> JuliaMcConahay</a><span></span></h3>
    </div>
    </body>
    </html>
    No class necessary unless you have loads of spans in h3s in that context.

    If using floats then floats must come first before the block content you want then to wrap so you would have to float the anchor to the left as well and then float the span left (or right if needed).

    Be careful with all the inline elements left hanging in mid air as it causes a number of bugs in iE at times and is bad semantically also. Always keep elements at the right level so an inline element shouldn't end and then run straight into an opening block level tag. That's why I wrapped your first line in a p element (although a div would be fine also).

  4. #4
    SitePoint Zealot
    Join Date
    Oct 2002
    Location
    Madison, WI
    Posts
    198
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks to both, this is very helpful!
    :::::::::::::::::::::::::::::::::::::::::::::::::::
    Versa Studio
    ExpressionEngine experts
    bas (at) versa studio dot com


Tags for this Thread

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
  •