Forums

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:

<div class="image">
    <a href="#">
        <img src="http://www.cashfd.com/wp-content/gallery/tanker-22/thumbs/thumbs_img_0164.jpg&quot; alt="" align="left">
        <span class="caption">Tanker 123</span>
    </a>
</div>

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 </ br> 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!

wolfcry911

add to .caption {
position: absolute;
top: 12px;
left: 12px;
}

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.

wolfcry911

@mpd4128,
you have 26 errors, some directly related to the content in question (basically missing closing span tags). The whole thing is bit overkill really. You don't need two spans where the caption is full width anyway (Chris added additional spans in the article to pad floating multi-line caption). You also don't need to class the remaining span - you can target it with descendant selectors ( .equipmentimage span { } ).

<div class="equipmentimage">
  <a href="http://www.cashfd.com/department-info/equipment/squad-20/"&gt;
    <img src="http://www.cashfd.com/wp-content/gallery/squad-20/thumbs/thumbs_img_0268.jpg&quot; alt="" />
    <span>Squad 20</span>
  </a>
</div>

Further, you may not even need to class each div - you could enclose the whole image area in an element (I'd use a ul) with a single id and target everything you need with that one id.

mpd4128

It's only a problem with IE8 (Windows XP). I have opened the page in chrome for mac, safara for mac, IE9 for windows 7... all look perfect! I have found some reports of IE8 having format issues but the fix isn't working for me.

TheDoc

I didn't catch the missed closing span, nice find @wolfcry911.

mpd4128

Again, life savers... it's amazing that 1 out of 3 browsers tested is THAT picky. Don't get me wrong, it was definately a fowl up on my part... but why in the world did the other two browsers get it right?!?!?

treehouse : what would you like to learn today?

Forums

[Solved] Text Blocks Over Multiple Images