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
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.
Try this:
// CSS
.jb {background-color:#9ff; width:100%;height:1em; line-height:1em; }
jb i {float:right; font-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>';
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
[ot]
Your have 87 messages
“Your”? [/ot]
I don’t think it is correct to have all of that in an <h1>…
Right now I have…
<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…
<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
Like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
[COLOR="#FF0000"]h2 {display: inline;}[/COLOR]
</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.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
[COLOR="#FF0000"].inline {display: inline;}[/COLOR]
</style>
</head>
<body>
<h2 [COLOR="#FF0000"]class="inline"[/COLOR]>Inbox</h2> <span>You have 87 messages, with a limit of 100. <a href=''>(What's this?)</a></span>
</body>
</html>
Yet another method:
<!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.
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.
[ot]
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.[/ot]
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.
Ralph,
What you did below is what I was trying to say in my original post.
I think the new construct of block:inline covers my bases, don’t you?! 
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?
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.
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.