...

View Full Version : Resolved How to move button all the way to the right. (on all browsers)



clawbog
08-03-2011, 04:35 AM
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.


<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?

Sammy12
08-03-2011, 04:37 AM
try setting a class to the last li



<ul>
<li></li>
<li class="last-child"></li>
</ul>




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

clawbog
08-03-2011, 04:48 AM
Not sure if I'm doing it right, it doesn't seem to work.



.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;}




<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>

Sammy12
08-03-2011, 04:53 AM
.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)

clawbog
08-03-2011, 05:16 AM
Thanks, it's working now.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum