Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Text overlay on list items Re: Text overlay on list items

#67491
RichyVn
Member

Hi there,

I recently used a simple css rule to do just that. It uses relative and absolute positioning.

This is the simple xhtml I used:

 


VesselName

This is the css for it: which will create a nice transparent bar across the image with the Vessel name in it centered:

.ImgNameOverlayBig {
color: #FFF;
background-image: url(../images/blue-trans.png);
background-repeat: repeat;
text-align: center;
font-family: Tahoma, Geneva, sans-serif;
font-size: 14px;
font-weight: bold;
height: 18px;
width: 300px;
padding-top: 7px;
padding-bottom: 5px;
display: block;
z-index: 5;
position: absolute;
top: 11px;
left: 0px;
}
#ImagesContainer {
position: relative;
z-index: 2;
height: auto;
width: auto;
}

Here’s the page with the content example (I later replaced the hardcoded text with text from a mysql database) Your text to link…

Hope this will do the trick for you.

Regards,
Richard