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

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #31147
    enigmajr
    Member

    Hey everyone,

    I’ve been working on a page that pulls out information from individual artist pages in order to make a list of all the artists. When I had a static list I simply used a table and had the labels underneath the images, as you can still see in the second list on the page titled “Distribution Clients.”

    When I updated it to be dynamic, I thought I would move the titles from underneath to an overlay like in the slider (newtownartists.com/contact). I figured I could use something similar to the Text Blocks Over Image article. I was unable to make it work, I think because of the images being in a list.

    I figured I would at least make it look similar to how it did previously before putting it away for the night, but when I tried to do that I was unable to get the text to center under the images. It would instead throw the text next to the image and make everything wonky. I’m sure that has to do with how I had to do the columns, which was using floats.

    So, my question is, is that the best way of making a two column dynamic list with text overlays for the images? Would it be better to go back to using tables and trying that way?

    #67686
    aaronsilber
    Participant

    Howdy, I wish I could see what you had before you said, “I’m unable to make this work.” I’ll bet we could have made it work together!

    Using an unordered list is the right way to mark this up. In the tutorial, you’ll just need to treat the “div class=image” as a li instead of a div. Post back if you try it again, but can’t quite get it. I’ll take a look at any live code you have.

    #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

    #67213
    enigmajr
    Member

    Thanks for the responses!

    Richard, I tried your method and ended up having the one of the same problems I had before. For some reason all of the names are ending up layered on top of one another, seemingly positioning themselves absolutely to the first div rather than their respective div.

    You can see it on the same page. Do you have any idea as to what I’m doing wrong to screw up their positioning? Thanks again!

    #67057
    enigmajr
    Member

    Thanks virtual! I updated the page with your code and with a little more tinkering I’m VERY close to what I wanted. In fact, I pretty much am where I want it to be, I just have a question now as to why the css won’t work how I think it should be.

    If you go to the page you’ll notice the first image is out of line. That is because for some reason it is the only li in the #artist_list that obeys this code.

    #artist_list li {
    margin-bottom: 25px;
    }

    I realized that I had assigned a class to each li but this doesn’t work either.

    .artist_list_li {
    margin-bottom: 25px;
    margin-right: 25px;
    }

    The only thing that seems to work is increasing the margins for the ImagesContainer. Am I misunderstanding something? Thanks everyone for all the help so far.

    #66771
    enigmajr
    Member

    Yeah I understand that would make everything look right, I was just curious as to why that was only applying to the first in the list. Thanks for all the help!

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.