Forums

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

Home Forums CSS Text Blocks Over Multiple Images

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #36263
    mpd4128
    Member

    First off, please bare with me as I am completely new to html/css so it is a miracle that I have gotten this far… I followed the tutorial here but had to make some modifications to get it to work. Instead of one image on the page I have 6 and, therefore, the only way I could get the objects to place was to create a sperate tag for each item due to the absolute format. I don’t believe this is correct and would greatly appreciate any feedback one could give on how to clean up my css list as I am currently using for this simple effect and I actually need to add more on a separate page.

    The page in question is here.

    #95236
    TheDoc
    Member

    Yea, so using h6+ etc, which won’t validate and is also incorrect usage.

    What you’ll want to do is something like this:

    If you make sure that the ‘image’ div has a position of relative then you’ll be able to absolutely position the span with the class of ‘caption’ within it. It will then be applied to all of the captions, but only relative to the div that they’re in.

    #95253
    mpd4128
    Member

    @TheDoc: This is exactly what I was looking for. I am giving it a try right now and I truly appreciate your assistance. I knew from prior research that using h6+ was invalid but for some reason it worked when I tried it so I was forced to stick with it until someone smarter, like yourself, could point me in the right direction. Thanks again.

    #95255
    mpd4128
    Member

    Ok, I’ve updated with the changes you mentioned but I guess I’m not positioning the photos properly. I’ve removed all of the extra photos until I can get the caption right on this first item. Here are the two css items

    .image {
    position: relative;
    width: 100%; /* for IE 6 */
    }

    .caption {
    position: absolute;
    color: white;
    font: bold 24px/45px Helvetica, Sans-Serif;
    letter-spacing: 1px;
    background: rgb(0, 0, 0); /* fallback color */
    background: rgba(0, 0, 0, 0.7);
    padding: 5px 283px 5px 2px;
    }
    #95256
    mpd4128
    Member

    I have also removed the absolute position from the caption class.. that was experimental

    #95257
    mpd4128
    Member

    I also just descovered that my web editor is placing if I skip lines in HTML code. I have since removed all of the breaks, still nothing.

    #95258
    TheDoc
    Member

    Okay – will have a look in a bit!

    #95262
    mpd4128
    Member

    Done, but with errors. The absolute position is not allowing the caption to follow other photos. The updates are posted. Thanks for the continued help, I am literally at a loss.

    #95264
    TheDoc
    Member

    Change the .image div to something like this:

    .image {
    position: relative;
    width: 424px;
    float: left;
    }

    You’ll need to fiddle a bit.

    #95265
    mpd4128
    Member

    Ok, that basically works but this is where I’ve ran into problems in the past. Now the right caption is off just a bit. Page updated for your viewing.

    #95266
    mpd4128
    Member

    Sorry, here’s the latest css

    .image {
    position: relative;
    width: 449px;
    float: left;
    }

    .caption {
    color: white;
    font: bold 24px/45px Helvetica, Sans-Serif;
    letter-spacing: 1px;
    background: rgb(0, 0, 0); /* fallback color */
    background: rgba(0, 0, 0, 0.7);
    padding: 5px 280px 3px 5px;
    position: absolute;
    top: 136px;
    left: 12px;
    }
    #95272
    TheDoc
    Member

    That’s because you have ‘align=right’ on the image.

    I would do this:

    .image {
    position: relative;
    width: 424px;
    float: left;
    margin-right: 50px;
    }

    .image:nth-child(even) {
    margin-right: 0;
    }

    .caption {
    color: white;
    font: bold 24px/45px Helvetica, Sans-Serif;
    letter-spacing: 1px;
    background: rgb(0, 0, 0); /* fallback color */
    background: rgba(0, 0, 0, 0.7);
    padding: 5px 0;
    width: 100%;
    position: absolute;
    top: 136px;
    left: 12px;
    }
    #95291
    mpd4128
    Member

    Problem solved thanks to your amazing help! I did have to modify the final css a bit to fit my needs but the page looks great with what I feel is a much cleaner css and html list. My final page is here and below is my final css list. Thanks again to all who assisted, especially @TheDoc who continually provided support as I made more and more mistakes.

    .image {
    position: relative;
    width: 435px;
    float: left;
    margin-left: 15px;
    margin-bottom: 15px
    }

    .caption {
    color: white;
    font: bold 24px/45px Helvetica, Sans-Serif;
    letter-spacing: 1px;
    background: rgb(0, 0, 0); /* fallback color */
    background: rgba(0, 0, 0, 0.7);
    width: 92%;
    position: absolute;
    top: 144px;
    left: 12px;
    }

    .captionspacer {
    padding:0 5px;
    }
    #95491
    mpd4128
    Member

    Ok, new issue with this same setup… I cannot, for the life of me, get this css to display properly on IE8 for Windows XP. This problem is confirmed with two seperate computers running the same version of IE8.

    #95494
    TheDoc
    Member

    It is really not liking that, eh?

    I don’t really know why, but it’s not liking your absolutely positioned caption.

Viewing 15 posts - 1 through 15 (of 18 total)
  • You must be logged in to reply to this topic.