Moving text around in a div without moving the div

Question

I have a div, inside the div is a background image that looks like a button and I have text in the div saying "Home". By default the text is snapped to the top and does not look right. How could I move the text around in the div without moving the div?

css file: http://pastebin.com/xrAFMVDd

html file: http://pastebin.com/b5Fubte0

Solution

One way of doing this is to wrap your text in a <p> tag and use CSS attributes top and left with position: relative to specify the position of the text relative to the top left of the div.

See an example here: http://jsfiddle.net/zvMKH/

Comments

[Admin]

OOO! I really thought that was going to work but again... it moved the background with it. Maybe a different variation of what you did?

[Jeff]

Hmm that's strange, it doesn't seem to be moving the background @ jsfiddle.net/zvMKH/1 (you can play around the with left/top values to check)

[Jeff]

Can you edit your question to include JUST the html/css for the div you're talking about? You can paste right into your question and use the 'code' button to format it nicely.

[Admin]

its too big for the comment box. ill give you pastebin instead. html:pastebin.com/xuLqhWkk css:pastebin.com/QdPSkkk6 Remember we are editing the "Home" button.