How to move this <li> based link to right most justified?

Move CSS <LI> link to the right.

[we5inelgr]

Hi all,

I've got a CSS menu bar, that I need to get the "Sign In" link moved to a right most justified position on the menu bar, leaving the other links as their current left justified positions. In other words, the "Sign In" link should be on the same horizontal line, but separated out to the far right from the other links.

Code on the html page:

 <table width="100%" cellpadding="0" cellspacing="0" border="0">
 <tr>
 [b]<td width="65%" align="left">[/b]

<div id="CSSMTNtopmenubar" class="CSS-Menu_Top-Nav">
<ul>
 <li><a href="http://theSite.com">Home</a></li>
 <li><a href="http://theSite.com/folder1/a.html" rel="CSSMTNsubmenu1">Link 1</a></li>
 <li><a href="http://theSite.com/folder2/w.html" rel="CSSMTNsubmenu2">Link 2</a></li>
 <li><a href="http://theSite.com/folder3/h.html">Link 3</a></li>
 <li><a href="http://theSite.com/folder3/j.html">Link 4</a></li>
</ul>
</div>

<script type="text/javascript">
CSSMTNlevelsmenu.setup("CSSMTNtopmenubar", "topbar")
</script>



<ul id="CSSMTNsubmenu1" class="CSSMTNsubmenustyle">
 <li><a href="http://theSite.com/folder1/a.html">Sub Link 1 a</a></li>
 <li><a href="http://theSite.com/folder1/b.html">Sub Link 1 b</a></li>
 <li><a href="http://theSite.com/folder1/c.html">Sub Link 1 c</a></li>
</ul>

<ul id="CSSMTNsubmenu2" class="CSSMTNsubmenustyle">
 <li><a href="http://theSite.com/folder2/w.html">Sub Link 2 w</a></li>
 <li><a href="http://theSite.com/folder2/x.html">Sub Link 2 x</a></li>
 <li><a href="http://theSite.com/folder2/y.html">Sub Link 2 y</a></li>
 <li><a href="http://theSite.com/folder2/z.html">Sub Link 2 z</a></li>
</ul>

 [b] </td>
 <td width="35%" align="right">[/b] <!-- THIS WAS COMBINED (into 1 td) WITH THE TD ABOVE, FOR 100%, BUT THIS <li> WAS EVEN CLOSER TO THE 'Link 4' link.
<div id="CSSMTNtopmenubar" class="CSS-Menu_Top-Nav">
<ul>
 <li><a href="http://theSite.com/folder3/s.html">Sign In</a></li>"; <!--THIS IS THE LINK THAT NEEDS TO BE RIGHT MOST JUSTIFIED, BUT ISN't RIGHT NOW. -->
</ul>
</div>
 [b]</td>[/b]
 </tr>
 </table>

And, the CSS code:

.CSS-Menu_Top-Nav ul{
margin: 0;
padding: 0;
font: bold 12px Verdana;
list-style-type: none;
border-bottom: 1px solid gray;
background: #4c597f;
overflow: hidden;
width: 100%;
}

.CSS-Menu_Top-Nav li{
display: inline;
margin: 0;
}

.CSS-Menu_Top-Nav li a{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 6px 8px; /*padding inside each tab*/
border-right: 1px solid black; /*right divider between tabs*/
color: white;
background: #4c597f;
}

.CSS-Menu_Top-Nav li a:visited{
color: white;
}

.CSS-Menu_Top-Nav li a:hover{
background: black; /*background of tabs for hover state */
}

.CSS-Menu_Top-Nav a:selected{
background: black; /*background of tab with "selected" class assigned to its LI */
}

.CSS-Menu_Top-Nav li j{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 6px 8px; /*padding inside each tab*/
border-right: 1px solid black; /*right divider between tabs*/
color: white;
background: #4c597f;
}

I realize the splitting of the <td> into two (bolded), instead of one isn't the best solution. However, if it's only one td at 100% the "Sign In" <li> is right next to the "Link 4" link. With it split into two <td>'s, the "Sign In" link is moved to the right a bit more, but still no where near right most justified.

How can I move that "Sign In" link to be right most justified?

[lucy24]

Oh, lord, that's funny. As soon as I saw the subject header I thought "That's easy: set it to {display: table-cell} and you can set its horizontal and vertical alignment separate from everything else" ...

... and then we get to the code and find the whole thing is already infested with tables. OK, just one-- apparently totaling two cells? --but it feels like an infestation.

Just kidding. You don't need a {display: table-cell}; that's just for messing with vertical alignment. Why can't you simply set

li.some-name-here {text-align: right;}

?

And, for heaven's sake, dump the table-for-layout business.

[we5inelgr]

Thanks for the reply.

As you might have guessed, I'm not a presentation layer person :) but I'm having to play one until we backfill a vacated position.

I placed text-align: right; in each definition in the css (just for now, for testing purposes), and it didn't have any affect (cache cleared an all). For now, I recombined the two <td>'s into just one. With the text-align: right; in place, the "Sign In" link is still immediately next to the 2nd to last link.

Ideas?

[we5inelgr]

UPDATE:

I've completely changed the CSS that's involved:

#top_nav ul{ margin:0;padding:0;list-style:none;border-bottom: 1px solid gray;font: bold 12px Verdana; }
#top_nav > ul > li { margin:0;padding:4px 20px;position:relative;float: left;height:30px;line-height:30px;background-color:#4c597f; z-index: 100;} 
#top_nav > ul > li > a { display: block;text-decoration: none;margin: 0;color: white; }
#top_nav li > ul { visibility:hidden;width:150px;position: absolute;top:0px;left:200px;border-left:1px solid #000; } 
#top_nav > ul > li > ul { top:38px;left:0; } /* Controls sub menu position relative to top of main ul */
#top_nav > ul > li > ul a { display: block;text-decoration: none;margin: 0;padding: 5px;background-color:#e8eff6;color: black; }
#top_nav li:hover { background-color: #000000; } 
#top_nav li:hover > ul { visibility: visible; }
#top_nav .spacer { margin:0;padding-left: 195px;position:relative;float: left;height:30px;line-height:30px;background-color:#4c597f; }
#top_nav .spacer li:hover { background-color: #4c597f; }
#top_nav .spacer li:hover ul { visibility:visible; }

The .spacer class is used to make a "gap" between the "Sign In" link and the "Link 4."

I then placed a <li class="spacer"></li> in between the two that need to be separated.

I know, this isn't a great way to do this, but it's functioning as needed for now.

Except for, when I mouseover the "spacer" section, it currently turns black apparently picking up the other background color #top_nav li:hover { background-color: #000000; }.

I'm trying to get it to pick up the other color: #top_nav .spacer li:hover { background-color: #4c597f; }

Why isn't it picking up this definition, for .spacer?

[lucy24]

#top_nav .spacer li:hover

Wouldn't it be

#top_nav li.spacer:hover
?

.spacer li

means "a list-item inside (= descendant of) some element with class 'spacer'".

You might be better off with something like {background-color: inherit;} though.

[we5inelgr]

Many thanks for the reply. It now works with your suggestion.

One last question about this please.

I'm trying to get the sub menu to change color when an item (link) in the list is hovered over. Right now, the sub menu has a different background from the parent menu, when the parent menu item is hovered over:

#top_nav > ul > li > ul a { display: block;text-decoration: none;margin: 0;padding: 5px;background-color:#e8eff6;color: black; }

So when a user mouses over one of the links in the sub menu, I'd like for it to change yet another color.

The closest thing I've got is this:

#top_nav > ul > li > ul:hover a { display: block;text-decoration: none;margin: 0;padding: 5px;background-color:#7D9EC0;color: black; }

but the problem with that is, when the user mouses over the sub menu, the whole sub menu changes color, instead of just the single list item (link) in the sub menu changing color.

how to single it out so that just one link at a time, in the sub menu, changes color?

[lucy24]

Time for a chorus of
I really hate this damned machine
I wish that they would sell it
It never does quite what I want
But only what I tell it.

The very last thing in the CSS is

ul:hover

If you want to constrain it to a single menu item you'll need to add one more step so the package goes

#top_nav > ul > li > ul > li:hover a

... though at this point frankly I'd think about attaching a class name to the submenus so it can simply say
ul.myclass li:hover
Obviously not convenient if you've got a dozen submenus and more to come, but if there are only a few, you can do the onetime work and save effort for the browser. (Descendant selectors can make coding much easier, but in exchange the browser has to keep counting on its fingers: a is the child of b which is the child of c which is ... et cetera, instead of homing in on the element itself.)

Edit: Does the "a" need to be there? Can't you hover over a list item? If some items are shorter than others-- as they normally would be-- I think the user might expect the whole block to respond, rather than only the part that contains text.

[we5inelgr]

wow, yeah that's getting a little complex there. there won't be any additional submenus (at this point anyway, lol), so I think I'll take your advice and convert the sub menu stuff to it's own class.

Thanks for your help and suggestions!