Solved

How to add to or override part of a class definition

Posted on 2014-12-12
3
139 Views
Last Modified: 2014-12-12
In my file, I have a pre-set definition of a class, say ".nav", and it has a number of properties:

.nav {position: relative; width: 980px; display: inline-block; border-bottom: 1px solid #126a13; padding: 12px 0 8px 0; background: url('images/nav_bg.gif') repeat-x top center; clear: both; text-transform: uppercase; line-height: 1em; font-weight: 400;}

Lower in the page, I want to be able to replace just one property, the background, with a new value e.g.

.nav {background: url('../../../image-new/nav_bg_new.gif')}

The problem is that it seems to replace the entire first definition of .nav, instead of replacing just the one value, for backgroun. Alternatively I can get the desired effect by repeating the entire first class definition with the one value changed, but I wonder if there is a way in CSS to say "keep all the existing properties, just replace this one". Thanks in advance.
0
Comment
Question by:opalcomp
  • 2
3 Comments
 
LVL 83

Accepted Solution

by:
Dave Baldwin earned 500 total points
ID: 40495695
"keep all the existing properties, just replace this one".
No but that is the way it works.  However the original background defintion is "background: url('images/nav_bg.gif') repeat-x top center;" and your replacement is "background: url('../../../image-new/nav_bg_new.gif')".  Note that you do not have a ';' at the end of your replacement.  Under some circumstances that can throw things off.  It never hurts to add it like "background: url('../../../image-new/nav_bg_new.gif');".
0
 
LVL 1

Author Closing Comment

by:opalcomp
ID: 40496029
Excellent, and thank you. I had not noticed the additional values that I omitted. I also added the trailing ";" to be safe. Now everything works and is cleanly coded. Much better. If interested, the site is http://tildet.com.
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 40496846
You're welcome, glad to help.
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
This article discusses four methods for overlaying images in a container on a web page
The purpose of this video is to demonstrate how to manually back up a WordPress Database. This will be demonstrated using a Windows 8 PC. The Host used will be IPage.com Log into your Hosting account. IPage will be used for demonstration : Locat…
The purpose of this video is to demonstrate how to set up basic WordPress SEO. This will be demonstrated using a Windows 8 PC. The plugin used will be WordPress SEO by Yoast. Go to your WordPress login page. This will look like the following: myw…

820 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question