I am trying to align and caption images similar to the way that is done on AdRants, i.e., wrapping text and captioned images. I am having difficulty getting it to work properly, so any help would be appreciated.

I apologize for the length of the code stubs, but having searched this forum, hopefully it will help someone else. Adrants code is perfect, it just doesn't work for my layout because of my requirement for the .content class.

The syntax used by AdRants is as follows:

This yields a left aligned image with the caption underneath the image.

Here are the relevant CSS definitions:

.content - has all of the 'blog stuff' associated with MT in a center column in a three column layout. I have to use .content and not #content, but that's a different story... So, this is my code.



This is the code 'as is' from adRants. For brevity, I've just included the 'lefts', not the rights:

And what's not working for you? A quick first glance at the code and css and they look okay. A link to your site would be helpful.

Kristine

I've posted a copy of my test page here. All of the CSS is embedded so you see what's going on.

You can see the image I'm trying to get to work towards the bottom of the page. I initially thought that I had a layering problem, but there also something going on with the length of the caption underscore and margin.

I've tried switching the DIV.imageleft to content.imageleft, and while closer, it still doesn't work. I'm not that fluent in CSS, particularly when you have to start sub classing. I think the problem is in the DIV.imageleft DIV portion, but I'm not sure.

Thank you for any help/guidance you can provide.

I'm still not sure what you are seeing that's the problem. You have a lot of code going on together, and some validation of both the html and css may help you out. Each browser renders this differently, but here's what I'm seeing:

* The image is hiding under the colored layer.
* The image and caption are expanding below the yellow container.

The first issue can be fixed by removing the position:relative; in the .content section.

The second issue can be fixed by adding right before the closing div of that .content section. But it seems like there may be a better way. Will you be using this in a blog layout where there will be a posted line below the content? If so, you can add clear:both; to the .posted stylesheet definition, and that would make it finish the yellow container before starting the posted line.

If these ideas don't help, asking on a CSS forum or web designer list would probably be more likely to know how to help.

Kristine

Thanx for the help.

I tried removing the position: relative; definition out of .content. Naturally the space between the #banner and the center content is gone now, but the image does show through. (Now the layout is more like Glish.com than BlueRobot's, which mine is modelled after.)

I still can't get the caption to show through though. Now, you asked:



I will be using it in a blog layout as well as elsewhere. I'm hoping that I can make the layout and style-sheet very generic - I know that I want to be able to include captioned images in a non-MT environment. I'd love to be able to 'hard-wire' the style/layout only to the css and not any specific MT tags.

Thanx for the help Kristine, (can you recommend any good css forums - in case I've burned you out?)

Here are two great sites:

CSSCSS Forums

and

DevShed

The first (CSS Forums) is specific and they're brilliant. Devshed guys are brilliant too but field a lot more varied questions; I'd try at the CSS Forums first. =)