• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Tim Cooke
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Liutauras Vilda
Sheriffs:
  • Rob Spoor
  • Junilu Lacar
  • paul wheaton
Saloon Keepers:
  • Stephan van Hulst
  • Tim Moores
  • Tim Holloway
  • Carey Brown
  • Scott Selikoff
Bartenders:
  • Piet Souris
  • Jj Roberts
  • fred rosenberger

List item css for last li

 
Ranch Hand
Posts: 39
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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;}

 
reply
    Bookmark Topic Watch Topic
  • New Topic