Click here to Skip to main content
15,881,172 members

How to move the last to float right of the menu?

Nuha IT asked:

Open original thread
Hi,

I have a menu and I need to move the last list in it to the right corner, while the rest are in their left positions.

But I could not move the last to right corner, where tried to put all the
  • to float:left;

    and the last item to float:none; this is also havn't worked!

    Currently, I am using margin-left property to the last list, but this is not an ideal solution due to different resolutions.

    What other solution can be done to make the last item float to the right corner?

    This is the menu

    http://im29.gulfup.com/3mun1.png[^]


    This is the code

    HTML
    /* menus::base */
    div#menus {
        height:41px;
        background:url(images/main-bg.png) center repeat-x;
    }
    
    div#menus ul {
        margin: 0;
        padding: 0;
        list-style: none;
        float: left;
    }
    div#menus ul.menus {
        padding-left: 0px;
    }
    
    div#menus li {
        position: relative;
        z-index: 9;
        margin: 0;
        padding: 0 5px 0 0;
        display: block;
        float: left;
    }
    div#menus li:hover>ul {
        left: -2px;
    }
    
    div#menus a {
        position: relative;
        z-index: 10;
        height: 41px;
        display: block;
        float: left;
        line-height: 41px;
        text-decoration: none;
        font: normal 12px Trebuchet MS;
    }
    div#menus a:hover, div#menus a:hover span { color: #fff; }
    div#menus li.current a {}
    
    div#menus span
    {
        display: block;
        cursor: pointer;
        background-repeat: no-repeat;
        background-position: 95% 0;
    }
    div#menus ul ul a.parent span {
        background-position:95% 8px;
        background-image: url(images/item-pointer.gif);
    }
    div#menus ul ul a.parent:hover span {
        background-image: url(images/item-pointer-mover.gif);
    }
    
    /* menus::level1 */
    div#menus a {
        padding: 0 10px 0 10px;
        line-height: 30px;
        color: #e5e5e5;
    }
    div#menus span {
        margin-top: 5px;}
        /**@replace#1*/
    div#menus li { background: url(images/main-delimiter.png) 98% 4px no-repeat; }
    div#menus li.last { background: none;margin-left:260px;}
    
    /* menus::level2 */
    div#menus ul ul li { background: none; z-index: 9;}
    div#menus ul ul {
        position: absolute;
        top: 38px;
        left: -999em;
        width: 163px;
        padding: 5px 0 0 0;
        background: rgb(4,57,123);
        margin-top:1px;
        z-index: 9;
    }
    div#menus ul ul a {
        padding: 0 0 0 15px;
        height: auto;
        float: none;
        line-height: 24px;
        color: rgb(169,169,169);
        z-index: 9;
    }
    div#menus ul ul span {
        margin-top: 0;
        padding-right: 15px;
        _padding-right: 20px;
        color: rgb(169,169,169);
        z-index: 9;
    }
    div#menus ul ul a:hover span {
        color: #fff;
    }
    div#menus ul ul li.last { background: none; z-index: 9;margin-left:260px;}
    div#menus ul ul li {
        width: 100%;
        z-index: 9;
    }
    
    /* menus::level3 */
    div#menus ul ul ul {
        padding: 0;
        margin: -38px 0 0 163px !important;
        margin-left:172px;
        z-index: 9;
    }
    
    /* colors */
    div#menus ul ul ul { background: rgb(4,67,142);z-index: 9; }
    div#menus ul ul ul ul { background: rgb(5,70,150);z-index: 9; }
    div#menus ul ul ul ul { background: rgb(5,81,173); z-index: 9;}
    
    /* lava lamp */
    div#menus li.back {
        background: url(images/lava.png) no-repeat right -44px !important;
        background-image: url(images/lava.gif);
        width: 13px;
        height: 44px;
        z-index: 8;
        position: absolute;
        margin: -1px 0 0 -5px;
    }
    div#menus li.back .left {
        background: url(images/lava.png) no-repeat top left !important;
        background-image: url(images/lava.gif);
        height: 44px;
        margin-right: 8px;
    }
Tags: Menu

Plain Text
ASM
ASP
ASP.NET
BASIC
BAT
C#
C++
COBOL
CoffeeScript
CSS
Dart
dbase
F#
FORTRAN
HTML
Java
Javascript
Kotlin
Lua
MIDL
MSIL
ObjectiveC
Pascal
PERL
PHP
PowerShell
Python
Razor
Ruby
Scala
Shell
SLN
SQL
Swift
T4
Terminal
TypeScript
VB
VBScript
XML
YAML

Preview



When answering a question please:
  1. Read the question carefully.
  2. Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
  3. If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
  4. Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.
Let's work to help developers, not make them feel stupid.
Please note that all posts will be submitted under the http://www.codeproject.com/info/cpol10.aspx.



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900