Putting the span on the left

With some great help in this forum I was able to change my menu line (thanks again).

A part of the menu line, however, I’d like floated all the way to the left side of that line, if possible. I’d like the text: Welcome! You Are Now Logged In, to appear (once a user is logged in) as it does now, but be positioned all the way to the left. Can you help me with this? Thanks

<table>
    <tr>
        <td class="menu"><div class="menu1"> &nbsp; <a href="[var.base_url]">&nbsp;<font color="#333333" face="arial">home</font></a>&nbsp;
                &nbsp;|&nbsp;&nbsp;<a href="page.php?page=16"><font color="#333333" face="arial">faq</font></a> &nbsp;|&nbsp;&nbsp;<a href="[var.base_url]/join.php"><font color="#333333" face="arial">register</font></a> &nbsp;|&nbsp;&nbsp;<a href="[var.login_out_link]"><font color="#333333" face="arial">log in</font></a> &nbsp;|&nbsp;&nbsp;<a href="page.php?page=9"><font color="#333333" face="arial">search</font></a> &nbsp;|&nbsp;&nbsp;<a href="page.php?page=6"><font color="#333333" face="arial">upload</font></a> </div>
            <!--Begin Sub-Navigation.  This only appears when a user is logged in.-->
            <div class="sub-nav">
                <!--submenu 1-->
                <div class="sub-nav-links">
                    <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="logout.php"><font color="#800000">log out</font></a></p>
                        <!--[onload;block=div;when [var.loggedin]=1;comm]-->
                    </div>
                </div>
            </div>
    </tr>
    </td>
    
</table>

<style>
.menu1 {
    font-size: 11px;
    font-family: arial;
    text-align: right;
    color: #333333;
 text-align: right margin: 0px 22px 0px 0px;
    padding: 0px 0px 0px 0px;
}
.sub-nav {
    font-size: 11px;
    font-family: arial;
    text-align: right;
    color: #333333;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}
.sub-nav1 {
    font-size: 11px;
    font-family: arial;
    text-align: right;
    color: #333333;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}
.sub-nav-links {
    font-size: 11px;
    font-family: arial;
    text-align: right;
    color: #333333;
    margin: 0px 0px 0px 0px;
}
.menu {width:100%}
.menu1 {float:left}
.sub-nav {float:right}
.sub-nav p {margin:0}

Thanks for all of your help.
It looks good now.
Thanks again

Thanks for your reply.
However, with the new html code you’ve provided the outcome is the same as I’ve shown in the images.

Any other help would be appreciated.

Thanks for the help. But it’s not quite there yet.
I’ve attached two screen shots. Menu1 image shows the Main nav menu before a user logs in. Menu2 image shows the nav menu after the user logs in, based on the html and css you provided.

I’m trying to get the

“my account l credits: l log out”

to appear to the right of the Main nav menu (after the user logs in).

And I’m trying to get

“Welcome! You Are Now Logged In”

to appear to all the way to the left side of the web page (after the user logs in).

Any additional help will be greatly appreciated.

I think my reading comprehension is a little off tonight.

this shoudl do it:

.menu1 {
font-size: 11px;
font-family: arial;
text-align: right;
color: #333333;
margin: 0px 22px 0px 0px;
padding: 0px;
}
.sub-nav {
font-size: 11px;
font-family: arial;
color: #333333;
margin: 0;
padding: x;
}
.sub-nav1 {
font-size: 11px;
font-family: arial;
color: #333333;
margin: 0;
padding: 0;
float:right;

}
.sub-nav-links {
font-size: 11px;
font-family: arial;
text-align: right;
color: #333333;
margin: 0px 0px 0px 0px;
float:right;
}
.menu {width:100%;position:relative }
.menu1 {float:right}
.sub-nav {float:right;}
.sub-nav p {margin:0}
#welc{ position: absolute; left:22px;}

I could not see your upload images, yet.

The easiest and most semantic way would be to switch your code order.
Since you want what is included in #sub-nav to be the rightmost, place that FIRST , then #menu.

BTW, since you are using PHP you could opt to have the code only be out put if the user is logged in … but thats another post all together

your markup would now be this:
<div class=“menu”>

<!–Begin Sub-Navigation. This only appears when a user is logged in.–>
<div class=“sub-nav”>
<!–submenu 1–>
<div class=“sub-nav-links”>
<div class=“sub-nav1”>
<p class=“account”><span id=“welc”>Welcome! You Are Now Logged In.</span> <a href=“members/[var.user_name]”><font color=“#000000”>my account</font></a>  |  <a href=“logout.php”><font color=“#800000”>log out</font></a></p>
<!–[onload;block=div;when [var.loggedin]=1;comm]–>
</div>
</div>
</div>

<div class=“menu1”>   <a href=“[var.base_url]”> <font color=“#333333” face=“arial”>home</font></a> 
 |  <a href=“page.php?page=16”><font color=“#333333” face=“arial”>faq</font></a>  |  <a href=“[var.base_url]/join.php”><font color=“#333333” face=“arial”>register</font></a>  |  <a href=“[var.login_out_link]”><font color=“#333333” face=“arial”>log in</font></a>  |  <a href=“page.php?page=9”><font color=“#333333” face=“arial”>search</font></a>  |  <a href=“page.php?page=6”><font color=“#333333” face=“arial”>upload</font></a> </div>

<div></div></div>

you don’t have to change the CSS, but this will add a nice dotted line between the segments of your menus:

.menu {width:100%;position:relative }
.menu1 {float:right}
.sub-nav {float:right; margin: 0 1em 0 0;}
.sub-nav p {margin:0; border-left:1px dotted #000; margin-left:1em ; padding-left:1em}
#welc{ position: absolute; left:22px;}

Chris: this is what I am getting:
http://raym31.home.comcast.net/~raym31/temp/spanonleft.html

which seems to be working fine…

remember there may be something that your PHP is adding… or removing.

ADDITIONALLY:
You should take advantage of the PHP rather than work against it. I would advice reworking the coding strategy as follows

<div id=“navigation”>
<div id=“message”><?// output logged message content that goes on the left :“you are now logged in…”
?>
</div>
<div id=“logged”><?// output logged in nav
?>
</div>
<ul id=“mainav”>
<?php // php that will output LI and links
?>
</ul>
</div>

then you could simply have:
#mainav, # logged { float:right;}
#message {float:left}

THATS IT!

your CSS is fine, but you are using the wrong mark up.

this is what you want:
<div class=“menu”><div class=“menu1”>   <a href=“[var.base_url]”> <font color=“#333333” face=“arial”>home</font></a> 
 |  <a href=“page.php?page=16”><font color=“#333333” face=“arial”>faq</font></a>  |  <a href=“[var.base_url]/join.php”><font color=“#333333” face=“arial”>register</font></a>  |  <a href=“[var.login_out_link]”><font color=“#333333” face=“arial”>log in</font></a>  |  <a href=“page.php?page=9”><font color=“#333333” face=“arial”>search</font></a>  |  <a href=“page.php?page=6”><font color=“#333333” face=“arial”>upload</font></a> </div>
<!–Begin Sub-Navigation. This only appears when a user is logged in.–>
<div class=“sub-nav”>
<!–submenu 1–>
<div class=“sub-nav-links”>
<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>  |  <a href=“logout.php”><font color=“#800000”>log out</font></a></p>
<!–[onload;block=div;when [var.loggedin]=1;comm]–>
</div>
</div>
</div>

        &lt;div&gt;&lt;/div&gt;

BTW, avoid using <table> for layout.
==:)

hope I’ve been able to help.

Thanks for your reply.
However, when I put in your code, it puts the sub menu on the right, and the main menu on the left. I’m looking for everything on the right and “Welcome…” on the far left.
Any additional help will be appreciated.