Grow your CSS skills. Land your dream job.

Can CSS do multi colored background list items?

  • # August 19, 2009 at 5:00 pm

    I am working on upgrading one of my sites from table based layout to CSS. I think I have a plan for everything except the main nav bar. I can do the menu with a horizontal UL, but do not know how to make the multicolored backgrounds for the various links – turquoise, lime, orange and so on. It will be template based in Dreamweaver.

    See the top line in this site – CM Commercial

    Looking for suggestions on how to do this.

    mark

    # August 19, 2009 at 5:07 pm

    You should be able to do this by assigning each of the links a unique class, and then giving that class a different background color using CSS.

    # August 19, 2009 at 11:56 pm

    Ken,

    Thanks for the tip, I think I am on the right track. I have the system working with my menu, but have two new issues.

    my test site

    On the top nav menu I have the colors in place, but there are small gaps of the turquoise navcontainer showing in between the white borders and the various colored li elements. I have firebugged it to death, but cannot find any random padding or margin that will make it go away. Any suggestions for me.

    Second issue, the lack of white border to the left of the Home link is kind of annoying, but if I put in a left and right border on the li element, it is too thick everywhere else. Is there a solution to this?

    My CSS is here:

    http://www.water-well-pumps.net/styles.css

    Thanks in advance,

    mark

    # August 20, 2009 at 3:08 am

    float those bad boys left.

    Code:
    ul#navlist li {float:left;}

    BAM

    # August 20, 2009 at 1:31 pm

    Cool, works great, thanks for your help.

    mark

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".