PDA

View Full Version : CSS Menu


richcodesign
09-21-2011, 08:37 AM
I would like to have one of my menu buttons be a different colour from the rest. I am not sure if this can be done by just defining a class to that particular button (I tried it and it didnt work - not sure if my css was right)

I would like the "prices" button to view with a red background, white text and with a blue background and black text when rolled over.

The link is
http://www.resinco.co.uk/floor_coatings/high_build_epoxy_floor_coating.html

At the moment all the buttons are just grey and turn black when rolled over, the others can stay like this, I just wonder if the 'prices' button can be different?

edbr
09-21-2011, 09:53 AM
assign the class to the li,. < li class="red class">

richcodesign
09-21-2011, 11:33 AM
Thanks for your help.

Righto... I have done that to one of the pages, but it does not seem to be working for me (no change!) Im not sure what I have done wrong/right???

http://www.resinco.co.uk/anti_slip_coatings/anti_slip_uvr.html
Page in question can be found at the link above. The "prices" tab is still grey???

gentleone
09-21-2011, 12:47 PM
In which stylesheet did you declare the rule for redmenu class? I can't find it in the stylesheets you're pointing to in the head.

richcodesign
09-21-2011, 12:55 PM
style.css

Hope you can see it. Thanks again :-)

gentleone
09-21-2011, 01:26 PM
No, i stiil don't see it. I've searched up and down, but no rule for .redmenu

richcodesign
09-21-2011, 01:37 PM
hmmmm.... Sorry about that.

This is the css

.redmenu {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #EEE;
background-color: #B00;
text-decoration:none;
font-size:12px;
}
.redmenu a: {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #EEE;
background-color: #B00;
text-decoration:none;
font-size:12px;
}

richcodesign
09-21-2011, 01:39 PM
This is the menu bar

<div class="productspecs">
<ul>
<li><a href="anti_slip_uvr.html (http://www.dreamweaverclub.com/forum/view-source:http://resinco.co.uk/anti_slip_coatings/anti_slip_uvr.html)">Information</a></li>
<li><a href="anti_slip_uvr_benefits.html (http://www.dreamweaverclub.com/forum/view-source:http://resinco.co.uk/anti_slip_coatings/anti_slip_uvr_benefits.html)">Benefits</a></li>
<li><a href="anti_slip_uvr_specifications.html (http://www.dreamweaverclub.com/forum/view-source:http://resinco.co.uk/anti_slip_coatings/anti_slip_uvr_specifications.html)">Specifications</a></li>
<li><a href="anti_slip_uvr_installation.html (http://www.dreamweaverclub.com/forum/view-source:http://resinco.co.uk/anti_slip_coatings/anti_slip_uvr_installation.html)">Installation Guide</a></li>
<li><a href="anti_slip_uvr_prices.html (http://www.dreamweaverclub.com/forum/view-source:http://resinco.co.uk/anti_slip_coatings/anti_slip_uvr_prices.html)" class="redmenu">Prices</a></li>
<li><a href="anti_slip_uvr_datasheets.html (http://www.dreamweaverclub.com/forum/view-source:http://resinco.co.uk/anti_slip_coatings/anti_slip_uvr_datasheets.html)">Data Sheets</a></li>
</ul>
</div>

gentleone
09-21-2011, 01:40 PM
Okay, but did you put those css rules in your stylesheet (I don't see those styles in style.css), because if they're not there then it will never be red.

richcodesign
09-21-2011, 02:06 PM
There is nothing to update in my dreamweaver file.

The information in on this link below (not all pages)
http://resinco.co.uk/anti_slip_coatings/anti_slip_uvr.html

richcodesign
09-21-2011, 02:37 PM
I can see them in my source file???

gentleone
09-21-2011, 02:39 PM
Yep, now I see them in style.css

I think you have to be more specific if you want to override your previous rules on the a tag.

You could also drop some properties, because these are already set in your previoius css rules on the a and li of that menu.

This should do it.

.productspecs .redmenu {
color: #EEE;
background-color: #B00;
}
The second css rule, .redmenu a:, you can delete

richcodesign
09-21-2011, 05:36 PM
Thanks again for your input.
I have made those changes and can now understand what i have done.

However... still no change :-(

gentleone
09-21-2011, 05:56 PM
I see... still not specific enough he? :) This will do it for sure... I've tested it (notice the a)


.productspecs a.redmenu {
color: #EEE;
background-color: #B00;
}

richcodesign
09-28-2011, 04:53 PM
Cheers :-)

Works a treat!

Thanks again for your help.