SitePoint Sponsor

User Tag List

Results 1 to 14 of 14

Hybrid View

  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,777
    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,526
    Mentioned
    61 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,838
    Mentioned
    73 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 Patche on earning Member of the Month for July 2014

  4. #4
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,777
    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

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 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>

  6. #6
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,838
    Mentioned
    73 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 Patche on earning Member of the Month for July 2014

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 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.

  8. #8
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,777
    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

  9. #9
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,777
    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?

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 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.

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 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"?

  12. #12
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,526
    Mentioned
    61 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.


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
  •