Click to See Complete Forum and Search --> : How to change just one part of CSS?
cusimar9
03-01-2006, 05:36 AM
I have a CSS menu that I'm very happy with, but on a few pages I need the background picture to be slightly different
Whats the most economical way of rewriting the css? I'd rather do it in the css file than change it in the code, and I'd rather not copy and paste the whole menu.
The bold line is the only line I'd like to change for menu2:
#menu {
width:759px;
list-style-type: none;
margin: auto auto auto 0px; padding: 0px;
}
#menu li {
float:left;
}
#menu a {
display:block;
height:23px; line-height:23px;
border-right:1px solid #acace2;
background:#dcd8fb url(images/bg_nav.jpg) repeat-x bottom;
color:#333;
text-align:center; vertical-align:bottom;
text-decoration:none;
font: Tahoma, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight:bold;
}
#menu a:hover {
background:#f6be29 url(images/bg_nav_o.jpg) repeat-x bottom;
color:#FFF;
}
You will have to change something on those pages; adding a separate css (just the #menu a background ) to override the existing style.
BonRouge
03-01-2006, 05:57 AM
So #menu2 is basically the same as #menu but on a different page?
To not change any of the html or the css for the menu, you can give the body of your second page an id - say 'page2', and do this: #page2 #menu a {
background:#dcd8fb url(images/different-image.jpg) repeat-x bottom;
}
cusimar9
03-01-2006, 06:03 AM
That'll do, thanks Fang! :D
cusimar9
03-01-2006, 06:04 AM
Ooh that looks interesting BonRouge, I'll try that as well, thanks :)
EDIT: That caused a few problems actually BonRouge, it seems the body #id tag caused some of the other css properties to be lost and had to be redefined.
For instance the a :hover attribute did not do what it originally did.
It seems to work fine by overriding the css in the HTML header, that's neat enough for me
BonRouge
03-01-2006, 09:44 AM
That doesn't sound right. As far as I can see, what I gave you should work fine. Can you show me it?
cusimar9
03-01-2006, 10:01 AM
Sure,
It looks like this:
http://www.firstchoicevacationhomes.com/faq_2.asp
When it should look like this:
http://www.firstchoicevacationhomes.com/faq_owners.asp
I've given the <body> tag the id "owners" and added the following in the css:
#owners #menu a {
background:#dcd8fb url(images/bg_owners_nav.jpg) repeat-x bottom;
}
BonRouge
03-01-2006, 10:26 AM
Thanks. Interesting. I'm not sure why that's happening... :confused:
cusimar9
03-01-2006, 10:36 AM
The wonders of website design lol!
bg_owners_nav.jpg (purple) is the same as bg_nav.jpg (purple) when it should be bg_nav_sel.jpg (red)
ray326
03-01-2006, 09:41 PM
Specificity maybe?
BonRouge
03-01-2006, 11:19 PM
Specificity maybe?
Ray, are you talking about what's happening when (s)he uses what I suggested? Specificity would account for it changing the background image in that menu, but why would everything else change? This has me kinda baffled.
ray326
03-02-2006, 10:21 PM
Ray, are you talking about what's happening when (s)he uses what I suggested?Yes but it's just a WAG. It just seems you've now thrown another, more specific selector into the mix and there may be sequence dependencies and there are non-love/hate anchor selectors in there.
The specificity is that #owners #menu a takes preference over #menu_selected a:link
Solutions:
Make owners a class
or
Increase the specificity of menu_selected; #owners #menu_selected a:link etc.
The 2nd solution means adding even more rules for each page for menu_selected
The 1st solution is using a class where an id is technically more correct.
btw "classitis": the class menuitem is not needed, remove it and add width:107px; to #menu a
[edit] place #menu a:hover after .owners #menu a