Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Div tag within img tag

Tags:

html

dom

image

I need to add a text on each of the image and I have the image gallery constructed using img tags. Can't I append div tags under img tags. Similar to the one shown here :

<img id="img1" class="img1_1" src="hello1_1">
  <div class="textDesc">HELLO1_1</div>
</img>

Though the div is appended to img tag , but I cant see the text "HELLO1_1" on the image.

Please can anyone help me? If you need the source code I can share it with you.

Here is the link to test the scenario : http://jsfiddle.net/XUR5K/9/

like image 662
KashCSS Avatar asked May 03 '12 05:05

KashCSS


2 Answers

An image tag can not have child elements. Instead, you need to position the DIV on top of the image using CSS.

Example:

<div style="position: relative;">
    <img />
    <div style="position: absolute; top: 10px;">Text</div>
</div>

That's but one example. There's plenty of ways to do this.

like image 169
DA. Avatar answered Nov 08 '22 19:11

DA.


The img element has a self closing tag, so you can't give it child elements and expect it to work. Its content model is defined as empty. Source.

I suspect any children you specify won't be rendered because an img element is a replaced element, as mentioned in the W3C spec.

like image 27
alex Avatar answered Nov 08 '22 18:11

alex