Image and text problem

[SirChick]

I have a question i have an image and a bit of text which is meant to be on the image so i have done this in my css and html page but it wont work:

HTML:

<div id='image'>
<img src="menu_gradient.gif" id="Shape1" align="top" alt="" border="0" width="307" height="440">
		<div id="bv_textleft">
			What The Heck?

		</div>


</div>

 

CSS:

 

body {
background-color: #466B98;
}

#wrapper {
margin: 0 auto;
width: 1000px;
}
#banner {
width: 100%;
height:94px;
margin: 0 auto;
}
#image {
margin-left: 0px;
margin-top: 15px;
}
#bv_text {
width: 100%;
height:36px;
text-align: center;
font-family: "Lucida Bright";
font-size: 32px;
text-decoration:underline;
font-weight:bold;
margin: 0 auto;
padding-top: 10px;
color: #FFFFFF;
}
</style>

[dbrimlow]

<div id="bv_textleft">
			What The Heck?

		</div>

 

You don't have any id in you css named #bv_textleft.

 

And if you did, this is where it would use position:absolute. However, you would have to make it "relative" to the containing wrapper and not the browser window. Sort of like this:

 

#image {
position:relative;
margin-left: 0px;
margin-top: 15px;
}
#bv_textleft {
position:absolute;
font-family: "Lucida Bright";
font-size: 32px;
text-decoration:underline;
font-weight:bold;
top: 10px;
        left:200px;
color: #FFFFFF;
}

 

Adjust the "top" and "left" amount to replicate "centering. Absolute positioned elements do not use margins.