Using CSS to put some DIVs over a picture (+explaining images)

'.$row['titulo'].''.$contenido.time_since(s开发者_开发知识库trtotime($row['dt'])).' '); } ?>

The styles are in a separate file and they are:

.newsticker-jcarousellite { width:600px; }
.newsticker-jcarousellite ul li{ list-style:none; display:block; padding-bottom:1px; margin-bottom:5px; }
.newsticker-jcarousellite .thumbnail { float:left; width:50px; height:50px; }
.newsticker-jcarousellite .info { float:right; width:535px; }
.newsticker-jcarousellite .info span.cat { display: block; font-size:10px; color:#808080; }

All generates this:

But now, i need to add 3 litle div on the lower part of the profile picture all of them with a black (35% transparent) background where i can put some text, the result must look like this:

Im very new at css, and i realy dont have any idea how to do this, thanks for any help!

Complete code (untested):

HTML/PHP:

<div id="newsticker-demo">    
    <div class="newsticker-jcarousellite">
<ul>
<?php
echo('<li>
<div class="thumbnail"><img src="'.$fotoperfil.'">
    <div class="txt">
        <span>t1</span>
        <span>t2</span>
        <span>t3</span>
    </div>
</div>
<div class="info"><a href="'.$linkpregunta.'">'.$row['titulo'].'</a><span class="cat">'.$contenido.time_since(strtotime($row['dt'])).'</span></div>
<div class="clear"></div>
</li>');
}
?></ul></div></div>

CSS:

.newsticker-jcarousellite { width:600px; }
.newsticker-jcarousellite ul li{ list-style:none; display:block; padding-bottom:1px; margin-bottom:5px; }
.newsticker-jcarousellite .thumbnail { float:left; width:50px; height:50px; position:relative /* <- new property */ }
.newsticker-jcarousellite .info { float:right; width:535px; }
.newsticker-jcarousellite .info span.cat { display: block; font-size:10px; color:#808080; }

/* new */
.newsticker-jcarousellite .thumbnail .txt { position:absolute; left:0; right:0; bottom:0; background:#000; background:rgba(0,0,0,0.35); }

Well, if you add the CSS property position: relative the style of .newsticker-jcarousellite ul li, you could simply add another div inside that block, and set the style to be position: absolute, and set the top offset to be ~30-40px or so. If you need to put multiple divs on top of the image, maybe it would be a better solution to make that image a background-image, as per the CSS property, and then use paddings to get most of the text to flow around it.

As it is, do you need to have multiple text items above it, rather than one block item containing multiple things of text?

the solution is the attribute z-index, the image has a lower z-index than the 3 divs with the text you just have then to position them relative to the image or absolute

You could do something like this.

.thumbnail { display:block; float:left; width:125px; height:125px; background:#666; position:relative }
.thumbnail-info { position:absolute; bottom:0; width:100% } /* info inside the thumbnail positioned absolute to the bottom */
.thumbnail .text1, .text2, .text3 { margin:0 2px } /* margin on the right and left */
.thumbnail .text1 { float:left; color:#fff; font-size:10px } /* floated text */
.thumbnail .text2 { float:left; color:#fff; font-size:10px }
.thumbnail .text3 { float:left; color:#fff; font-size:10px }

<div class="thumbnail"><img src="/image">
  <div class="thumbnail-info">
   <span class="text1">Date</span>
   <span class="text2">Time</span>
   <span class="text3">Hour</span> 
  </div>
  <!-- thumbnail info end -->
</div>

For the trasparency you can use:

.youInternalDivs="opacity:0.4;filter:alpha(opacity=40);background-color:gray"

Firefox and Chrome use the property opacity:x for transparency, while IE uses filter:alpha(opacity=x).

You can also set an image as background for your smaller divs.