CSS - Images and Text

I have a wordpress theme that I am working on. In the header, the title is centered horizontally and to the left of it is a small background image.

This works really well.

The problem is that I will be releasing the wordpress theme. Someone can change the title from the Generic "Wordpress Theme" to whatever they want. If you change the title to more characters then the current title, it overwrites the image to the left of the title.

Is there a way that to prevent this with CSS? Is there some sample code someone could provide if this is possible to prevent?

Thank you

 

Do you have a sample url I can take a look at? You can PM the url and I can fix this.

Thanks

 

Here is a sample url http://bluemanteamtest.byethost9.com/

Notice how the text overlaps the image. I know how to position the image if the text doesn't change, but with wordpress, anyone can change the title and if they change from the default, then the spacing gets messed up.

 

You can find your results here: h##p://csscharm.com/test/index.html

I stripped out all but header info and made it adjustable so you can make it as big or small as you wish.

Note: The padding in the ".header-title a" should be the same for left and right and be the size of your background-image.

hope this works out good for you.

 

Thanks so much for your help, I'm going to look at the code a little more in the morning when I'm a bit more awake, but essentially, the only change I made on my theme was add one line:

padding: 0 48px 0 48px;

Everything works, regardless of the length of the blog title.

To summarize, is that really the only change I need to make?

Also, you mentioned that it needs to "be the size of your background-image"? Could you clarify what exactly that means and where in the code you made the change to meet this requirement.

Thank you

 

Actually, it's more code than you need If the padding on each side is going to be the same, then you can just say padding:0 48px;

But yeah, adding padding will likely prevent overwriting your image - I use padding this way a good deal when using a negative margin to position elements inside a heading like say... the date of a news item.