/    Sign up×
Community /Pin to ProfileBookmark

How to change just one part of CSS?

Copy linkTweet thisAlerts:
Mar 01.2006

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:

[code]
#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;
[B]background:#dcd8fb url(images/bg_nav.jpg) repeat-x bottom;[/B]
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;

}
[/code]

to post a comment
CSS

13 Comments(s) ↴

Copy linkTweet thisAlerts:
@FangMar 01.2006 — You will have to change something on those pages; adding a separate css (just the #menu a background ) to override the existing style.
Copy linkTweet thisAlerts:
@BonRougeMar 01.2006 — 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;
}
Copy linkTweet thisAlerts:
@cusimar9authorMar 01.2006 — That'll do, thanks Fang! ?
Copy linkTweet thisAlerts:
@cusimar9authorMar 01.2006 — 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
Copy linkTweet thisAlerts:
@BonRougeMar 01.2006 — That doesn't sound right. As far as I can see, what I gave you should work fine. Can you show me it?
Copy linkTweet thisAlerts:
@cusimar9authorMar 01.2006 — 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:

<i>
</i>#owners #menu a {
background:#dcd8fb url(images/bg_owners_nav.jpg) repeat-x bottom;
}
Copy linkTweet thisAlerts:
@BonRougeMar 01.2006 — Thanks. Interesting. I'm not sure why that's happening... ?
Copy linkTweet thisAlerts:
@cusimar9authorMar 01.2006 — The wonders of website design lol!
Copy linkTweet thisAlerts:
@FangMar 01.2006 — bg_owners_nav.jpg (purple) is the same as bg_nav.jpg (purple) when it should be bg_nav_sel.jpg (red)
Copy linkTweet thisAlerts:
@ray326Mar 02.2006 — Specificity maybe?
Copy linkTweet thisAlerts:
@BonRougeMar 02.2006 — Specificity maybe?[/QUOTE]
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.
Copy linkTweet thisAlerts:
@ray326Mar 03.2006 — Ray, are you talking about what's happening when (s)he uses what I suggested?[/QUOTE]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.
Copy linkTweet thisAlerts:
@FangMar 03.2006 — The specificity is that [I]#owners #menu a[/I] takes preference over [I]#menu_selected a:link [/I]

Solutions:

Make [I]owners[/I] a class

or

Increase the specificity of [I]menu_selected[/I]; [I]#owners #menu_selected a:link[/I] etc.

The 2nd solution means adding even more rules for each page for [I]menu_selected[/I]

The 1st solution is using a class where an id is technically more correct.

btw "classitis": the class [I]menuitem[/I] is not needed, remove it and add [I]width:107px;[/I] to [I]#menu a[/I]

[edit] place [I]#menu a:hover[/I] after [I].owners #menu a[/I]
×

Success!

Help @cusimar9 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.25,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...