Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to put a span over an image

Tags:

html

css

I have this code : 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?

like image 936
kwichz Avatar asked May 12 '11 23:05

kwichz


People also ask

Can you put an image in a span tag?

The element can contain a piece of text or an image directly. So, when it is required to wrap a run of text (or an image) to be styled or manipulated and no other element is found suitable, the span is used.

How do I display an image in a div?

The key is the container has to be positioned relative and the tag positioned absolute. Show activity on this post. You need to set relative positioning on the container and then absolute on the inner tag div. The inner tag's absolute positioning will be with respect to the outer relatively positioned div.

How do you use span tags?

The <span> tag is an inline container used to mark up a part of a text, or a part of a document. The <span> tag is easily styled by CSS or manipulated with JavaScript using the class or id attribute. The <span> tag is much like the <div> element, but <div> is a block-level element and <span> is an inline element.

How do I put an image on top of a div?

Add CSS. Add a relative div placed in the flow of the page. Set the background image as relative so as the div knows how big it must be. Set the overlay as absolute, which will be relative to the upper-left edge of the first image.


1 Answers

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

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

like image 175
Thomas Shields Avatar answered Sep 20 '22 15:09

Thomas Shields