Putting menu and sub-menu on one line

HTML & CSS
1

I’m wondering how I can put the nav menu and the sub-menu on the same line. Currently, once a user logs in, the sub menu information appears underneath the nav menu. How can I get the sub-menu to appear to the right of the nav menu, once it appears? The sub menu would essentially push the nav menu to the left. Please overlook the font tags, that is a seperate issue that I’m working on. Thanks.


<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>

<!--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>

CSS:

.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;
}
2

Thanks for taking the time to help me out today.
That was very helpful. Much thanks.

The only thing I can’t figure out is why the menu is centered and not flush right. If you have any ideas on that please feel free to enlighten me.
Thanks again

3

Got it.

4

Hi,

Assuming that you have missed the closing div to .menu1 and that we can put it back in place then you could float the menu left and the subnav right.

This would also assume that the table-cell is wide enough to accommodate both.

e.g.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<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;
}
[B].menu {width:100&#37;}
.menu1 {float:left}
.sub-nav {float:right}
.sub-nav p {margin:0}[/B]


</style>
</head>
<body>
<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> [B]</div>[/B]
            <!--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>
</body>
</html>