horizontal list

[sudhakararaog]

please look at this link

http://sudhakargolakaram.co.in/files/horizontallist.html

i have two images in this page to explain how i want the list to appear

i need 2 things, the 1st one is list1 when the page loads what i need is for the last list item i need the divider line at the right also


the 2nd one is as per the 2nd image list2 for example if i am on the current page then i need the divider line for that particular link on the left and right side like the 1st example and along with that i need the repeating blue gradient image and also the icon which is being hidden presently


i have used various combination of last child, adding additional classes to list item and a tag as well if i can display the divider line then the icon disappears and vice versa


for the 2nd list i have used a transparent png for the repeating blue gradient image

can anyone please suggest the code that will fix this issue in case of list1 and list2

thanks

[onlinetraining]

I cannot certainly write the entire HTML markup and CSS style for you but I can guide you.
<ul id="topnav">
<li>&nbsp;</li>
<li id="lijournals"><a href="#" id="journals">Journals</a></li>
<li id="liresources"><a href="#" id="resources">Author Resources</a></li>
....
</ul>

use your separator graphic as a background image for each li

#topnav{
/* specify the height of tour nav bar to be the same as the blue backgound image */
height:35px;
width:100%; /* or width in pixels */
background:url(path-to-the-light-blue-png) 0 0 repeat-x;
}


#topnav li{
background:url(path-to-separator-graphic) right top no-repeat;
}


#topnav li a#journals{
display:block;
background:url(path-to--css-sprite-image) 0 0 no-repeat;
}


I would then create a sprite image containing all the icons in each link with the appropriate background. I advise you google "css sprite" to find good resources. You can repeat the last style for all links and setting the right positioning

[sudhakararaog]

thanks for replying

what i have done is i have taken 1 background image which consists of all the divider line on the left and right side and used this for background for .topmenu and removed the divider image for each li

and then used the old code of creating a separate class for each list items a tag and specified the background image and used padding for these individual a tags

it works fine now

thanks