creating a color background

i want to create a background around the store categoreis on http://theguitarresource.com/store to make them stand out more. how would i do this? thanks!

 

Specify a background color that targets the HTML tags you want using CSS:

selector {
    background: white;
    color: black;
}

Code (markup):

Where "selector" is the HTML tag, class or ID you are targeting (classes and IDs may have to be added though).
To target a class, do this:

.class { }

Code (markup):

Where .class is the value of the class attribute in your HTML you are targeting (like class="section").

For IDs:

#id { }

Code (markup):

Where #id is the value of the ID attribute you are targeting in your HTML (like id="content").

 

Did you want to create a background color just on the links themselves?

If so, you could simply use this code:

.series_links a {
    background: #cccccc;
}

Code (markup):

Replace #cccccc with whatever color code you'd like. If this isn't what you meant, let me know and I can post the appropriate code.

 

Just make sure that you provide a color value as well, even if it's just "inherit" - not to shut the CSS validator up, but in case someone forces a user stylesheet over yours.

 

so how would i then apply this style to the are i want? do ii need to add a div class?? also, is there a way to just get it to surround the links, but with maybe some extra padding, but not stretch all the way to the right edge of the page?


thanks guys for your help so far...

 

Do you want the background on the list of links, or on the links themselves (and the answer is no, you don't need extra markup)?

 

i want it around that area. almost like my sidebar on my homepage, just not too the side...

 

You could use something like this (add <div class="bg"> and </div> inside the series_links div):

.series_links .bg {
    width: 400px;
    background: #cccccc;
    padding: 12px;
}

Code (markup):

So your HTML code would look like this:

<div class="series_links">
<div class="bg">
your links
</div>
</div>

Code (markup):

Hope that helps. If not, let me know

 

thanks! that worked. check it out! but how do i decrease the empty space at the top? http://theguitarresource.com/store/

 

That's not the best way to do it, and in fact just adds bloat to the page.

 

any reccomendations?

 

"Never rush a miracle worker. All you'll get are bad miracles." -- Miracle Max (I think that was his name), "The Princess Bride"

(that means I'm working on it - just bouncing around from computer to computer at the moment though)