0

I'm working on a site which will have a variety of captioned images. These images will change over time and the widths will vary. I want the caption to always be the same width as the image without having to state the actual image width.

I found a JQuery script on this forum provided by Marc Audet ("CSS - div width depending on image size above" March 30, 2011) which seems to work. I changed the class names to match my own, but otherwise the script should be the same as he provided.

$(document).ready(function() {
    theWidth = $(".photo_caption img").css('width');
    $(".photo_caption").css('width',theWidth);
});

However, there are two things that I have questions about.

1-None of the CSS styling on .photo_caption works. I can give it a purple 4 px border, add float right, add 100px of padding, but none of these things happen. Why isn't the styling applying? I also wondered if this problem relates to problem number two below.

2-I'd like the surrounding paragraph text to wrap around the image and caption. I've tried adding a float left on the .photo_caption div but so far nothing has worked.

Here's a link to the site. It's the middle column, "HIGH SCHOOL SENIORS, APPLY NOW FOR THE NBCAF ART SCHOLARSHIP," to which I'm referring.

www.laurafigdesign.com/nbcaf

As a very novice designer I appreciate any suggestions to solve these problems.

Thanks, Laura

Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
Laura Fig
  • 1

1 Answers1

2

Regarding problem #1 - CSS Styling not applying.

When I look at the rule in your stylesheet for .photo_caption, I see this:

.photo_caption {
    width:1%;
    border: 1px solid orange;
    margin: 0 auto;
    float:left;
    padding:12px;
    background-color:  #f00;
}

There seem to be some strange unicode characters in there (ahead of border, etc). Get rid of those and it should work.

As for getting the surrounding text to wrap, floating it should work. I think this might be related to your previous issue.

Malevolence
  • 1,857
  • 12
  • 9
  • Thanks so much! I'm using a pretty basic text editor and never thought to turn on invisibles. Removing the characters fixed both problems. – Laura Fig Nov 04 '11 at 16:50
  • Although this fixed my original problems it revealed a couple more. It appears that the JQuery script applies the same width to all images so even though my two images have different widths, the width of the first is being applied to both. This shows what's happening. http://www.laurafigdesign.com/nbcaf/ I could use a different class for each image, but is there an easier way? Also I wanted the text under "Featured artist" to go below the image and caption. I tried a bunch of variations on the floats but didn't get anything to work. Thanks for any suggestion! – Laura Fig Nov 04 '11 at 17:57
  • You need to calculate the width for each image instead of just for the first one. You should use the .each() function to iterate through all of the photos and apply the custom width for each photo. Give me a minute and I'll throw together a jsfiddle with an example. – Malevolence Nov 04 '11 at 18:34
  • 1
    Check this out. I think it does what you want: http://jsfiddle.net/MKJym/ – Malevolence Nov 04 '11 at 18:45
  • Malevolence, thank you again for your help on this. Yes, it's great in your example, but I must be doing something wrong on my end. I don't know JQuery and had originally plugged in a script Marc Audet has proposed. Can you tell what I'm doing wrong? laurafigdesign.com/nbcaf – Laura Fig Nov 04 '11 at 20:57