CODEWITHSUNDEEP
htmlcss
Zain
Zain

Reputation: 285

How to add text over a overlapping div tag

I like to add a div tag overlapping a div tag and add a text over the overlapped div tag. here is the code. . please help.

.center_prod_box{
     border-radius: 15px;
     width:190px;
     height: 260px;
     float:left;
     text-align:center;
     padding:0px 0px 5px; 0; 
     margin:0px 5px 0px 0;
     border:1px #000000 solid;
}

 .product_title{
     background:#cdf895;
     border-radius: 15px;
     textalign:center;
     font-size:12px;
     margin: 7px 5px;
     font-weight:bold;
     color:#ffffff;
     padding:5px 5px 5px 15px;
  }

<div class="center_prod_box">
     <img src="images/offer2.png" style="position:absolute; margin-left:50px; margin-top:-10px;" alt="" border="0" width="60"  height="60" Title="Amul Butter" />
      <div class="offertext" style=" position:absolute; margin-left:0px;">Hello</div>   
          <a href="" Title="Amul Butter">Amul Butter</a>
      </div>

Upvotes: 3

Views: 19806

Answers (2)

Afzaal Ahmad Zeeshan
Afzaal Ahmad Zeeshan

Reputation: 15860

For that you can use position: absolute; for the overlapping div. And add any text to that div.

That will be something like this:

<div style="position: relative;">
 <div style="position: absolute;">
  The text to be added, will be written here! :)
 </div>
</div>

You can use class or id to style them! In your image, you are using position: absolute; for image tag too. Use either position: relative; if you want to place the text on that image. Or you can use z-index for them, to place them one on other!

Edit: Text align is a bug in IE7: http://haslayout.net/css/Text-Align-Bug

Upvotes: 10

Joris Lindhout
Joris Lindhout

Reputation: 205

You want to place the div with class offertext somewhere else on the page? Also, it's better to get rid of all your inline css and the last </div> is one too many.

Upvotes: -2

Related Questions