Text Blocks Over Multiple Images

[mpd4128]

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.

[TheDoc]

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

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

Tanker 123

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.

[mpd4128]

@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.

[mpd4128]

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;

}

[mpd4128]

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

[mpd4128]

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.

[TheDoc]

Okay – will have a look in a bit!

[mpd4128]

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.

[TheDoc]

Change the .image div to something like this:

.image {

position: relative;

width: 424px;

float: left;

}

You’ll need to fiddle a bit.

[mpd4128]

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.

[mpd4128]

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;

}

[TheDoc]

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;

}

[mpd4128]

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;

}

[mpd4128]

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.

[TheDoc]

It is really not liking that, eh?

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

[Author]

Posts