SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,920
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Text next to Heading

    Pardon the basic question, but I haven't done any CSS in over a year!!

    What is the best way to make it so that I can nudge text up along side a Heading?

    I would like something similar to this...
    Inbox Your have 87 messages, with a limit of 100. (What's this?)
    I am thinking you have to make the Heading block: inline; but am unsure...


    Also, if I can make it so the Heading is left-aligned in the containing block and the other text is right-aligned that would be even better!

    Sincerely,


    Debbie

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,578
    Mentioned
    63 Post(s)
    Tagged
    2 Thread(s)
    Hi, Debbie. Could you fill in just a little more of the picture, please?

    [InBox] [The text in this box is left-aligned and is nudged close to the InBox box]

    [InBox] [The text in this box is right-aligned and is nudged close to the InBox box]

    I'm missing the picture.

  3. #3
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,880
    Mentioned
    74 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    Pardon the basic question, but I haven't done any CSS in over a year!!

    What is the best way to make it so that I can nudge text up along side a Heading?

    I would like something similar to this...


    I am thinking you have to make the Heading block: inline; but am unsure...


    Also, if I can make it so the Heading is left-aligned in the containing block and the other text is right-aligned that would be even better!

    Sincerely,


    Debbie
    Try this:

    PHP Code:
    // CSS
         
    .jb  {background-color:#9ff; width:100%;height:1em; line-height:1em; }
         
    jb i {float:rightfont-size:0.42em}

    // HTML
         
    $total 87
         
    $limit 888;
         echo 
    '<h1 class="jb">Inbox: <i>Your have ' .$total .' messages with a limit of '$limit .'(What\'s this?)</i><h1>'
    Learn how to be ready for The New Move to Discourse

    How to make Make Money Now with a *NEW* look

    Be sure to congratulate Wolfshade on earning Member of the Month for August 2014

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,296
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    You have various options, like:

    —floating the heading and the following text (one left and one right, if you like)
    —as John noted, placing a span or other element around part of the text within the single heading element and floating it

    Off Topic:

    Your have 87 messages
    "Your"?

  5. #5
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,920
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by John_Betong View Post
    Try this:

    PHP Code:
    // CSS
         
    .jb  {background-color:#9ff; width:100%;height:1em; line-height:1em; }
         
    jb i {float:rightfont-size:0.42em}

    // HTML
         
    $total 87
         
    $limit 888;
         echo 
    '<h1 class="jb">Inbox: <i>Your have ' .$total .' messages with a limit of '$limit .'(What\'s this?)</i><h1>'
    I don't think it is correct to have all of that in an <h1>...

    Right now I have...
    HTML Code:
    <h2>Inbox</h2>
    <!-- All of my Inbox stuff goes here... -->

    Maybe my question wasn't clear...

    I thought Heading were block items that took up the whole line?

    I figured that I needed to make this particular <h2> an inline element so that I could put something next to it on the same line?

    Like this...
    HTML Code:
    <h2>Inbox</h2><span>You have 87 messages, with a limit of 100.  <a href=''>(What's this?)</a></span>

    I am not sure how to change the CSS to get what is described above.

    Does that make more sense?

    Sincerely,


    Debbie

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,296
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    I am not sure how to change the CSS to get what is described above.
    Like this:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <style>
    
    h2 {display: inline;}
    
    </style>
    </head>
    <body>
    
    <h2>Inbox</h2> <span>You have 87 messages, with a limit of 100.  <a href=''>(What's this?)</a></span>
    			
    </body>
    </html>
    In reality, you'd want to add a class to this particular H2, as you don't want that to happen to all H2s.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <style>
    
    .inline {display: inline;}
    
    </style>
    </head>
    <body>
    
    <h2 class="inline">Inbox</h2> <span>You have 87 messages, with a limit of 100.  <a href=''>(What's this?)</a></span>
    			
    </body>
    </html>

  7. #7
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,578
    Mentioned
    63 Post(s)
    Tagged
    2 Thread(s)
    Yet another method:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>nudging</title>
    <!--
    http://www.sitepoint.com/forums/showthread.php?1177492-Text-next-to-Heading
    2013.11.12 23:26
    DoubleDee
    -->
        <style type="text/css">
    
    .heading {
        outline:1px solid magenta;
        display:inline-block;
    }
    h2 {
        font-weight:bold;
        font-size:1.25em;
        font-family:Arial,Verdana,sans-serif;
    }
    .heading span {
        display:inline-block;
        font-weight:normal;
        font-size:.75em;
        padding-left:.5em;
    }
    
        </style>
    </head>
    <body>
    
    <div class="heading">
        <h2>InBox <span>You have 87 messages, with a limit of 100. (What's this?)</span></h2>
    </div>
    
    </body>
    </html>
    div.heading is not necessary. It's there to simulate whatever container in which the <h2> is placed.

  8. #8
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,880
    Mentioned
    74 Post(s)
    Tagged
    6 Thread(s)
    I agree with how @ralph.m makes the H2 tag inline and it will work fine.

    By including the span inside H2 then Search Engines will give a higher ranking to whatever is inside the H2 brackets.

    Perhaps you could rephrase "You have 87 messages, with a limit of 100. <a href='#'> (What's this?) </a>" to something more useful that punters may include in their search.
    Learn how to be ready for The New Move to Discourse

    How to make Make Money Now with a *NEW* look

    Be sure to congratulate Wolfshade on earning Member of the Month for August 2014

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,296
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Off Topic:

    Quote Originally Posted by John_Betong View Post
    By including the span inside H2 then Search Engines will give a higher ranking to whatever is inside the H2 brackets.
    Yes ... although in this case, that text is not very edifying for search engines, so I don't think it's useful to have it indexed, and this is probably just a log in area anyhow, so the search engines won't see it.

  10. #10
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,578
    Mentioned
    63 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Off Topic:


    Yes ... although in this case, that text is not very edifying for search engines, so I don't think it's useful to have it indexed, and this is probably just a log in area anyhow, so the search engines won't see it.
    Agreed. When I wrote my code yesterday, it was written with <p> tags instead of <h2>'s. Seemed like it would be easier and more appropriate that way.

  11. #11
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,920
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Ralph,

    What you did below is what I was trying to say in my original post.

    Quote Originally Posted by doubledee
    I am thinking you have to make the Heading block: inline; but am unsure...

    I think the new construct of block:inline covers my bases, don't you?!


    Quote Originally Posted by ralph.m View Post
    Like this:

    In reality, you'd want to add a class to this particular H2, as you don't want that to happen to all H2s.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <style>
    
    .inline {display: inline;}
    
    </style>
    </head>
    <body>
    
    <h2 class="inline">Inbox</h2> <span>You have 87 messages, with a limit of 100.  <a href=''>(What's this?)</a></span>
    			
    </body>
    </html>

    As a follow up, is it okay to have the other text just wrapped by <span>?? (Doesn't in need to be in a <p> parent?)

    Sincerely,


    Debbie

    P.S. If I want the text right-aligned, will this latest approach work, or do I need to use Floats or something else?

  12. #12
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,920
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by John_Betong View Post
    By including the span inside H2 then Search Engines will give a higher ranking to whatever is inside the H2 brackets.

    Perhaps you could rephrase "You have 87 messages, with a limit of 100. <a href='#'> (What's this?) </a>" to something more useful that punters may include in their search.
    Um, you would *never* want to have copy like "You have 87 messages..." picked up by Search Engines?!

    First of all, nobody would ever search for that. (Come on?!)

    Secondly, it is *inside* a Member's Account making it "off limits"!!

    Sincerely,


    Debbie

  13. #13
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,880
    Mentioned
    74 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    Um, you would *never* want to have copy like "You have 87 messages..." picked up by Search Engines?!

    First of all, nobody would ever search for that. (Come on?!)

    Secondly, it is *inside* a Member's Account making it "off limits"!!

    Sincerely,


    Debbie
    I agree In this particular instance there will be no benefit.

    I do think the technique and careful wording choice is worth bearing in mind for public pages.
    Learn how to be ready for The New Move to Discourse

    How to make Make Money Now with a *NEW* look

    Be sure to congratulate Wolfshade on earning Member of the Month for August 2014

  14. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,296
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    As a follow up, is it okay to have the other text just wrapped by <span>?? (Doesn't in need to be in a <p> parent?)
    It's better to have it in a block level element, IMHO, but it doesn't really matter all that much. I'd wrap it in a div.

    If I want the text right-aligned, will this latest approach work, or do I need to use Floats or something else?
    No, it won't work without something like a float.

    Be careful of floating it right, though, because if the user is on a wide screen, the message might be too far away from the heading to be meaningful.


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
  •