Containment Problem

Hi Guys,
I wonder if you can help me with this problem: http://simonpaultest.host-ed.me/

The four thumbs here are all links. The pics of websites are background-images applied to the link tags. The captions below the images have been created by formatting the link text.

The clearfix style has been applied to to the parent element

section#folioPreview

However, although the images are being contained, the captions are not. Does anyone have any idea why this is or how it can be corrected.

Many thanks in advance,
simon

An easy solution would be something like this:


#folioPreview {
  min-height: 320px;
}

but it’s inelegant.

Because you have a height on the <a> and the caption within that, you are creating an unnecessary problem, though. It would be better to have a container for image and caption together.

Thanks Ralph,
Sorry to be a bit dim here, but could you please give me an example of how the code would look to have a container for image and caption.

Thanks
si

Just something like this, for example:

HTML

<a id="thumb1" href="http://www.avenue27.co.uk/" target="_blank">
    <div></div>
    <div><span>Avenue 27</span> Boutique. Everything from handbags to shoes...</div>
</a>

CSS

#folioPreview div:first-child {
  width: 180px; height: 180px;
}

a#thumb1 div+div {
  background: url(images/thumbSprite.png) 0px 0px no-repeat;
  margin-left: 20px;
}

Of course, rather that :first-child and div+div, you could just put a special class on each div and target them that way.

Hi again Ralph,
I hate to be a pain, but I’m pretty new to this, so I was wondering if you had the time to explain this in a way that a complete idiot would easily understand.

This is what happens when I insert the code as is:

http://simonpaultest.host-ed.me/

Is the first div actually meant to be empty?

Cheers,
si

Hm, yes, it needs some refinement. Could you put back the original CSS you had? I can’t remember how it was all styled now.

Edit:

Ah, it see it’s commented out, but it would still be handy to have it uncommented.

Hi Ralph,
I’ve updated the page with the previous code:

http://simonpaultest.host-ed.me/

Just to clarify what I’m trying to achieve:

  1. I would like to be able to change the height of the thumbnail image without having to alter other elements. (ie have the containing elements expand automatically)

  2. I would like to be able to increase/decrease the amount of copy in the caption without altering the code. (ie have the containing elements expand automatically)

  3. I would like the caption to also trigger the image rollover, and vice versa.

Thank you very much for your help so far,
si

I’ve been trying everything to solve this, and this is the closest I can get:

http://simonpaultest.host-ed.me/arrrrg.html

Is it really a very bad way of doing things?

It looks fine to me. :slight_smile: I did try to create an example like I showed above, but it was difficult to modify the code on your site remotely, so I had to stop at the time. But wrapping it all in a div like that is fine. Ideally, the text at the bottom shouldn’t be hanging out of the <a> like that, but as long as it works, it’s fine. What I was aiming to do was put the image inside a div of its own within the <a>, and put the borders on the div. Anyhow, well done.

Cheers Ralph,
Although I’ve just run the page through BrowserLab and the entire thing falls apart im IE8, So it looks like it’s back to the drawing board lol.
si

That may be because of all the HTML5 stuff you are using (to no real purpose). Elements like <section> aren’t recognized by older browsers without a life support system of JavaScript. And there’s no advantage to using those elements—at least for the present—because their semantics are not understood yet.

This is not a complex layout, so I’d recommend using good old HTML4. So replace <header> with a div and a class, and do the same with <sections> etc. Then, instead of wrapping block elements in <a>s, reverse them so that the divs are around the <a>s.

Good advice Ralph - thanks

Let us know if you need some help. I ran out of time to try to knock up some code for you … and it’s a bit hard (and frustrating) when the files aren’t local. If you do rebuild it, I recommend you do it in stages, and check each stage in a range of browsers as you go, to identify issues as they arise. :slight_smile: