Question

I’d like to put the span element menu_label over the image, not at the bottom.

Dunno why it start to get the top and left from the bottom of the container (that is, with class menu).

Any ideas?

.menu {width:170px; text-align:center; float:left; background-color:#CCCCCC; padding-top:10px; padding-bottom:10px;}

.menu_label {width:154px; color:#FFFFFF; background-color:#F43B05; float:left; padding:3px; position:relative; top:50px; left:5px;}

.photoStyle{max-width:125px; border:0px; margin:auto;}

<div class="menu">
    <img src="http://www.hokiesports.com/radio/images/ilogo.jpg" class="photoStyle" />
    <span class="menu_label">
        This is my span
    </span>                                            
</div>

http://jsfiddle.net/uc8jc/

Answer 1

Change the position on the menu_label to absolute and add position:relative to menu

http://jsfiddle.net/uc8jc/2/