background color for text area main page...?

[wasana]

It's got to be easy but I can't figure it out.

I want to add background color for a paragraph of text on the main page... I'm on a localhost so can't post but this must be a simple thing...

aardvark sez the area is called

div, id: indexcategoriesMaincontent, class:content

but that also includes an image that I rather not have the same background

the page is

/includes/languages/english/html_includes/MYTEMPLATE/define_main_page.php

I tried playing around to create something with that id in CSS but I ain't got the skills man...

I thought it might be what the stylesheet calls 'textarea' duh, but there might be something else overriding that... sorry can't post URL but hope you might be able to point in right direction.

A bit of a primer on how to create the CSS identity would be most appreciated.

thanks

[kuroi]

You don't say how the paragraph gets into your define_main_page.php, but I'm going to assume that you have access to the source code somehow.

So you're going to find the paragraph that needs the background and give it a semantically named class such as follows

<p class="bgHighlight">Your special text in here</p>

Then you'll hop over to your stylesheet and add something like the following

.bgHightlight {background-color: pink}

OK, you can choose a color other than pink if you really want ...

[wasana]

insert school girl giggles here...

thought you'd catch me with the typo - eh..?...(hightlight vs highlight)

THANK YOU - that small bit of advice launched me to the next level

(pink is interesting but too much of a class clash with the rest of my outfit...

[kuroi]

thought you'd catch me with the typo - eh..?...(hightlight vs highlight)

Naw, you're too smart for that. It's that this old brain just can't keep up with the fingers anymore

[wasana]

if I want to create a class for the image above the text...for to center it...?

I tried to cheat and mangled it a bit by adding in the define_main_page.php:

<p class="TEST_CLASS_NAME_img"<img src="images/large/TEST_IMAGE.jpg" alt="TestImage" title="TestTestTest" /></a></p>

then added a class per your example in the CSS ... not elegant but worked in Firefox but Internet Exasperater fails... proper terms for creating class...?

adding the paragraph <p also creates space I rather not have...

THANKS

[kuroi]

There are a few problems with this as posted. The Initial p tag isn't closed and the a tag isn't opened. Hopefully just typos in the post.

Assuming that they were right, this may still not work as a way of centering the image. The reason is because the image may be giving each of the elements wrapped around it their width. So if the a tag and the p tag are only as wide as the image, then by default the image is already centered inside them.

I'd get rid of the p tag altogether it probably serves no useful function. Then I'd attach the class to the a tag. Provided the a tag is inline and not block or floated (can't tell from here) that should center the a tag and the image inside it within the div that contains them.

[wasana]

thanks for the help -- as an interim mangle I'm using the <p's -- works okay in both FF & IE -- just adds some spacing I don't need - I must learn some of the details about divs/tags/classes etc. -- all in due time..your posts helped a lot