moving item to extreme right

Question

3.00/5 (1 vote)

See more:

this code i have used to design my navigation menu strip,

How do i move only logout li item to extreme right,it should be seperated from others

XML

<div id="menu">
    <ul>

        <li><a class="current" href="../home.aspx" accesskey="1" title=""><span>Home</span></a></li>
        <li><a  href="../Entry.aspx" accesskey="2" title=""><span>Entry</span></a></li>
        <li><a  href="../Help.aspx" accesskey="3" title=""><span>Help</span></a></li>
        <li><a href="../contact.aspx" accesskey="4" title=""><span>contact</span></a></li>
        <li><a href="../About.aspx" accesskey="5" title=""><span>About</span></a></li>
        <li><a   href="?id=4" accesskey="6" title=""><span>LogOut</span></a></li>

    </ul>
  </div>

how do i do that?

thanks in advance,

Posted 18-Dec-11 20:34pm

girish sp

Add a Solution

Comments

Sergey Alexandrovich Kryukov 19-Dec-11 2:54am

Was that really hard to do? Do you know CSS?
--SA

girish sp 19-Dec-11 3:26am

i am little low in CSS,

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
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.
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.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sergey Alexandrovich Kryukov · Accepted Answer · 2011-12-18T20:52:00

Solution 1

Use CSS, text-align:right style:

This is the simplest possible code sample:

XML

<html>
    <head>
        <style type="text/css"><!--
            li.right { text-align: right; }
        --></style>
    </head>
<body>

<ul>
<li>1</li>
<li>2</li>
<li class="right">3</li>
</ul>

</body>
</html>

—SA

Posted 18-Dec-11 20:52pm

Sergey Alexandrovich Kryukov

Updated 18-Dec-11 20:53pm

v2

Comments

girish sp 19-Dec-11 3:21am

this did not work,the tab still fits there:(

girish sp 19-Dec-11 3:22am

Might be the prob is because i am placing the list inside the content place holder

Sergey Alexandrovich Kryukov 22-Dec-11 1:57am

I did exactly what you want and it works. You can always spoil the effect. You can create another sample using this layout feature and something else you need to show what's wrong.
--SA

Amir Mahfoozi · Accepted Answer · 2011-12-18T20:54:00

How about giving your div a specific width and set your logout item right aligned :

XML

<div id="menu" style="width: 300px">
    <ul>

        <li><a class="current" href="../home.aspx" accesskey="1" title=""><span>Home</span></a></li>
        <li><a  href="../Entry.aspx" accesskey="2" title=""><span>Entry</span></a></li>
        <li><a  href="../Help.aspx" accesskey="3" title=""><span>Help</span></a></li>
        <li><a href="../contact.aspx" accesskey="4" title=""><span>contact</span></a></li>
        <li><a href="../About.aspx" accesskey="5" title=""><span>About</span></a></li>
        <li style="text-align: right"><a   href="?id=4" accesskey="6" title=""><span>LogOut</span></a></li>

    </ul>
  </div>

Hope it helps.