Text over an image with CSS -
first want quite newbie css. without changing lot of code have text on image. current code is:
#container { width: 1010px; margin-left: auto; margin-right: auto; } #left-box { width: 681px; float: left; margin-right: 29px; } #data { width: 206px; height: 140px; background-color: #fff; float: left; margin-right: 10px; margin-left: 11px; margin-bottom: 20px; }
<div id="container"> <div id="left-box"> <div id="data"> <img src="img/img1.jpg" /> <<<< here want put text, should on image >>>> <h2 class="h2-data"><a href="#">some text</a></h2> <p class="stats">text</p> </div> </div> </div>
i tried adding code found google, text appearing @ top of website when use absolute position. , relative text under image, not on image.
anyone can me?
use position: relative
block enclosing image , position: absolute
text after assigning class it.
#container { width: 1010px; margin-left: auto; margin-right: auto; } #left-box { width: 681px; float: left; margin-right: 29px; } #data { width: 206px; height: 140px; background-color: #fff; float: left; margin-right: 10px; margin-left: 11px; margin-bottom: 20px; position: relative; } .text { top: 0; left: 100; position: absolute; }
<div id="container"> <div id="left-box"> <div id="data"> <img src="http://placehold.it/200x140"></img> <div class="text"> <<<< here want put text, should on image>>>></div> <h2 class="h2-data"><a href="#">some text</a></h2> <p class="stats">text</p> </div> </div> </div>
Comments
Post a Comment