Spacing out two lines of text

HTML & CSS
1

I have a line of text that looks like this:
Welcome! You Are Now Logged In. my account l credits l log out

I’d like it so that “my account l credits l log out” is on the far right of the page, on the same line. It would take too many of these:   to move that text over. What is a better way to do it? Here’s the current code:
thanks

<div class="sub-nav1">
						        <font color="#999999">Welcome! You Are Now Logged In.</font></a>

		            <a href="members/[var.user_name]"><font color="#000000">my account</font></a>
		          &nbsp;|&nbsp;
			   <a href="credits.php"><font color="#000000">[var.lang_my_credits]: [var.member_credits]</font></a>
			   &nbsp;|&nbsp;
		          <a href="logout.php"><font color="#800000">log out</font></a>
			    <!--[onload;block=div;when [var.loggedin]=1;comm]-->
		        </div>
2

Something in your code is causing a problem, as I tested it on Firefox. It might be the redundant /span at the end:

<div class="sub-nav1">
<p class="account"><span>Welcome! You Are Now Logged In.</span>
<a href="members/[var.user_name]"><font color="#000000">my account</font></a>
&nbsp;|&nbsp;
<a href="credits.php"><font color="#000000">[var.lang_my_credits]: [var.member_credits]</font></a>
&nbsp;|&nbsp;
<a href="logout.php"><font color="#800000">log out</font></a></p>
<!--[onload;block=div;when [var.loggedin]=1;comm]-->[COLOR="Red"]</span>[/COLOR]
</div>
3

Have you considered external stylesheets? You could place the elements exactly where you want on the page.

There is a tutorial on CSS? The link below will take you to the page in the tutorial that demonstrates how to reference an external stylesheet. You can either read through the rest or use it for reference.

Chris

4

Thanks for that help.
It appears perfect in IE7,
but in Firefox the text is not all the way over to the right.

Here’s the new improved code with your addition:

<div class="sub-nav1">
<p class="account"><span>Welcome! You Are Now Logged In.</span>
<a href="members/[var.user_name]"><font color="#000000">my account</font></a>
&nbsp;|&nbsp;
<a href="credits.php"><font color="#000000">[var.lang_my_credits]: [var.member_credits]</font></a>
&nbsp;|&nbsp;
<a href="logout.php"><font color="#800000">log out</font></a></p>
<!--[onload;block=div;when [var.loggedin]=1;comm]--></span>
</div>

Any idea how to make the text appear all the way to the right in Firefox?

Thanks again

5

You are using some old looking code there, such as font tags. Better to modernize.

Anyhow, you can just do something like this:

HTML

<p class="account"><span>Welcome! You Are Now Logged In.</span> my account l credits l log out</p>

CSS

p.account {text-align: right;}
p.account span {float: left;}