Win a copy of Mesos in Action this week in the Cloud/Virtualizaton forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

List item css for last li

 
sadanand munswamy
Ranch Hand
Posts: 39
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi Rancher, I have a ol with li elements i want to render the last li item to the extreme right of the page
and the rest sequentially from the left, Can any one tell me what CSS i need to use, also do i need to insert empty
li items to prove space between the last and remaining li items. HELP !! header.jsp

my css file [code=xml]*{
list-style:none;
}
#menucontainer{
position:relative;
height:50px;
color:#FFFFFF;
background:#383636;
width:100%;
font-family:Helvetica,Arial,Verdana,sans-serif;
}
#menunav{
position:relative;
height:38px;
font-size:12px;
text-transform:uppercase;
font-weight:bold;
background:#fff url(images/background.jpg) repeat-x bottom left;
padding:0 0 0 20px;}

#menunav ul{
margin:0;
padding:0;
list-style-type:none;
width:auto;
float:left;}

#menunav ul li{
display:block;
float:left;
margin:0 1px;}

#menunav ul li a{
display:block;
float:left;
color:#EAF3F8;
text-decoration:none;
padding:0 0 0 20px;
height:38px;}

#menunav ul li a span{
padding:12px 20px 0 0;
height:21px;
float:left;}

#menunav ul li a:hover{
color:#fff;
background:transparent url(images/hover.jpg) repeat-x bottom left;}

#menunav ul li a:hover span{
display:block;
width:auto;
cursor:pointer;}
#menunav ul li a.current, #menunav ul li a.current:hover{
color:#fff;
background:#1D6893 url(images/left.jpg) no-repeat top left;
line-height:275%;}
#menunav ul li a.current span{
display:block;
padding:0 20px 0 0;
width:auto;
background:#383636 url(images/right.jpg) no-repeat top right;
height:38px;}

 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic