Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Jul 2010
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts

    How to move button all the way to the right. (on all browsers)

    I got a website with a nav bar that runs vertical. All the buttons are on the left of the nav bar. I want the last button to be all the way on the right.

    The current code I'm using is this.
    Code:
    <li><a href="index.html" class="active">HOME</a></li>
                <li><a href="services.html">SERVICES</a></li>
                <li><a href="about.html">ABOUT US</a></li>
                <li><a href="contact.html">CONTACT</a></li>            
                <li style="position:relative; left:597px;"><a href="clients">CLIENTS</a></li>
    But the button is off on Firefox and Safari.

    Is there any way to make it work on all browsers?
    Last edited by clawbog; 08-03-2011 at 06:16 AM.

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    try setting a class to the last li

    Code:
    <ul>
     <li></li>
     <li class="last-child"></li>
    </ul>
    Code:
    li.last-child {
     float: right;
    }
    float: right; will push it all the way to the right of its parent. if this doesn't work, try posting your full code of your website or posting a link to a live copy so that we can debug the problem. floating is the right way to do this

  • #3
    New Coder
    Join Date
    Jul 2010
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Not sure if I'm doing it right, it doesn't seem to work.

    Code:
    .menu_resize { width:960px; margin:0 auto; padding:0; background:#1f1f1f;}
    .menu { padding:0; margin:0; width:960px; float:left;}
    .menu ul { padding:0; margin:0; list-style:none; border:0; float:left;}
    .menu ul li { float:left; margin:0; padding:0; border:0;}
    .menu ul li a { float:left; margin:0; padding:13px 10px; color:#fff; font:bold 12px Arial, Helvetica, sans-serif; text-decoration:none; border:1px solid #000;}
    .menu ul li a:hover { color:#252525; background:#f1f1f1; border:1px solid #d3d3d3;}
    .menu ul li a.active { color:#252525; background:#f1f1f1; border:1px solid #d3d3d3;}
    .menu ul li.clients { float:right;}
    Code:
    <div class="menu_resize">
            <div class="menu">
              <ul>
                <li><a href="index.html" class="active">HOME</a></li>
                <li><a href="services.html">SERVICES</a></li>
                <li><a href="about.html">ABOUT US</a></li>
                <li><a href="contact.html">CONTACT</a></li>            
                <li class="clients"><a href="clients">CLIENTS</a></li>
              </ul>
            </div>
            <div class="clr"></div>
          </div>

  • #4
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    Code:
    .menu ul { padding:0; margin:0; list-style:none; border:0; float:left; }
    either take the float: left; out from the ul or set it to a width (at least 400px; to see a clear difference)

  • Users who have thanked Sammy12 for this post:

    clawbog (08-03-2011)

  • #5
    New Coder
    Join Date
    Jul 2010
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks, it's working now.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •