Aligning text over an image background

[alawna]

Hi everybody.
I am setting up wordpress to use as a blog on my site. and ofcource doing the layout with css. Till now everything went fine except for this problem:
I have an image to use as a background for text when I want to make a very important note(for example). So I wrote this in the css:

div#importantnote{
width: 450px; //*because the image is 450px wide
height: 135px;//*because the image is 135px high
padding-right: 50px;
padding-left: 50px;
padding-buttom: 50px;
padding-top: 50px;
background-image: url(images/note01.jpg);
background-repeat: no-repeat;
font-family: "Times New Roman", Times, serif;
font-style: italic;
font-variant: normal;
color: black;
font-size: small;
}

now when I want to use the image I just type this:

<div id="importantnote">.....the text goes here.....</div>

My problem is that padding-left will push the text to the right and ignore the padding-right.
I am not sure the whole padding thing is right to be used here or not. I mean any idea on how to align text over a background image that may be use anywhere on the page?
Thanks

[createErrorMsg]

alawna, welcome to WebmasterWorld.

Two things...
1) Did you try text-align: center? If your goal is simply to get the text to the center of the div (which is what an equal padding on left and right seems to be aimed at doing), text-align should work just fine. If you're also aiming for vertical centering, that's a whole different story.

2) Your example code has the importantnote as an ID (#importantnote), but if there is any chance you'll be using it multiple times on a page, you'll need to use a class selector (.importantnote) instead. ID=1; CLASS=many.

[alawna]

Thank you for the response. I think the email notification of rerplies is not working:-)
I wanted both vertical and horizontal aligning of the text. It only worked by creating another div in addition to the one in the first post so they look like this now:

div#imp-note{
background-image: url(images/note01.jpg);
background-repeat: no-repeat;
width: 450px;
height: 150px;
font-family: "Times New Roman", Times, serif;
font-style: italic;
font-variant: normal;
color: black;
font-size: small;
}

div#im-note-inside{
width: 300px;
background-color: transparent;
margin-left: 75px;
padding-top: 5%;

}

then I used these like this:

<div id="im-note"><div id="im-note-inside">...text here...</div></div>

This works great and I used it multiple times in the page. Tested this with firefox and IE6 where the page looks identical in both.

I wanted however to note a small problem here that I mamged to fix concerning firefox and margins.

the div#im-note-inside was like this at first:

div#im-note-inside{width: 300px;
background-color: transparent;
margin-left: 75px;
margin-top: 30px;}

and worked fine with IE6 but not in firefox. It seemed that firefox did not care about margin-top whatever the value is where on the other side IE responded as expected.
The prob was fixed when used padding-top instead of margin-top. I am still confused. Why did that happen? Am ý missing something?
ALso is my code very messy?
Thanks

[createErrorMsg]

It seemed that firefox did not care about margin-top whatever the value is where on the other side IE responded as expected.
The prob was fixed when used padding-top instead of margin-top. I am still confused. Why did that happen?

The answer here is collapsing margins. Since FF is a compliant-browser (follows the W3 specs) you can expect it to treat margins as they were meant to be treated. This means that whenever two adjacent margins meet, with no borders or padding between them, they collapse together forming one margin space the equivalent of the larger value. Padding does not collapse, which is why it gave you the result you wanted, but bear in mind that there is a difference between what a margin is/does and what padding is/does. They are not interchangeable. Here's the W3 page on Collapsing Margins [w3.org] if you want to take a look.

and I used it multiple times in the page

Again, using IDs more than once on a page can cause problems. IDs are intended for use one time on a page. If you're going to use the same style element multiple times on a page, use a CLASS. That's what they're for.

Setting up a class is not different from setting up an ID. Instead of using the hash mark (#) you use a period (.), then refer to it in the markup with class="" as opposed to id=""...

.CLASSNAME {
PROPRTY:VALUE;
}

<div class="CLASSNAME">Stuff</div>

[alawna]

Thank you for the explanation. Now this was a good lesson for me:-)