#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2012
    Posts
    150
    Rep Power
    3

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


    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:
    Code:
      <table width="100%" cellpadding="0" cellspacing="0" border="0">
       <tr>
        <td width="65%" align="left">
    
    <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>
    
        </td>
        <td width="35%" align="right"> <!-- 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>
        </td>
       </tr>
      </table>
    And, the CSS code:
    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?
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2012
    Posts
    150
    Rep Power
    3
    Update:

    I've completely changed the CSS that's involved:
    Code:
    #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?
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2012
    Posts
    150
    Rep Power
    3
    Update:

    Scrapping having the "Sign In" link on the same menu bar. Just too problematic and hacky to "fix."

    See newer thread with width:100% issue now that I've taken the "Sign In" link out of this div.

    http://forums.devshed.com/css-help-1...th-949226.html
    Last edited by we5inelgr; July 27th, 2013 at 02:58 PM.

IMN logo majestic logo threadwatch logo seochat tools logo