CODEWITHSUNDEEP
htmlcssmenunavigation
DannyW86
DannyW86

Reputation: 201

Adding multiple background images/colors to a navigation bar

Just wondering if anyone can help me out here. What i'm looking to do (ugly as it is) is add two background colors to a nav bar on a site. Basically all of the list items will have a red background except one which needs to have a blue background. I tried to solve this using 1 long background image but this didn't work cross browser as the positioning of text changed between Chrome and Firefox.

What im wondering is if there is a way that I can give all the elements a red background but maybe use a span or something to select the single element in the navigation that I want to have a blue background?

This is what im looking to achieve (like I said incredibly ugly I know)

dual colored navigation

Any ideas or help anyone can give me would really be great

Thanks!

Upvotes: 0

Views: 983

Answers (3)

Dion
Dion

Reputation: 3335

Don't give the whole navigation bar a background, but all of the elements of your navigation bar. Then you can give one a class called blue and in CSS: .blue { background: blue; } or something like that. Example: http://jsfiddle.net/A7RMA/2/

Upvotes: 1

Roko C. Buljan
Roko C. Buljan

Reputation: 206008

DEMO

<nav>
  <ul>
    <li><a href="#">Samples</a></li>
    <li><a href="#">Testimonials</a></li>
    <li><a href="#" class="active">Contact</a></li>
  </ul>
</nav>


nav ul{
  list-style:none;
}
nav a{
  display:block;
  float:left;
  padding:10px 20px;
  background:red;
  color:#fff;
  text-decoration:none;
}
nav a.active, nav a:hover{
  background: blue;
}

Upvotes: 1

Amber
Amber

Reputation: 810

for your static blue item, use the CSS advised by DRP96:

.bluemenu
{ 
    background: blue; 
}

for the other items, do the same, but red:

.redmenu
{ 
    background: red; 
}

to make the red menu's blue when hovering over them you can use:

A:hover
{ 
    background: green; 
}

(replace 'A' in the above fragment with whatever object you use for the menu items. This should also be the same as the items to which you apply the redmenu and bluemenu classes)

Upvotes: 0

Related Questions