Member Avatar for dantheman50_98

Hi There,

I'm trying to figure out the best method of marking up this list of images with captions. The images vary in height and the captions are aligned to the right of the images, sometimes with two lines of text and as close to vertically centred with the image as possible
See the below image for what I'm trying to achieve. I'd be tempted to use a definition list, floating the captions to the right, but getting each bit of text aligning correctly without styling each individual caption has got me stumped.

There will be a lot more images than those shown (the grey boxes are representing the images just to clarify), so a solution that works without resorting to applying diferent classes to each caption would be amazing!

[IMG]http://wa-learning.org.uk/images-test.png[/IMG]

All feedback greatly appreciated.

Dan

  • 2 Contributors
  • 5 Replies
  • 186 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Arkinder
Member Avatar for Arkinder

Use the vertical-align property while displaying the caption inline-block .

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<style type="text/css">
		
		#captionedImages {list-style-type: none;}
		.section {width: 1100px; padding: 50px; border-bottom: 1px solid #000;}
		.randomImages {vertical-align: middle; margin-right: 100px;}
		.caption {display:inline-block; width: 400px;}
		
		</style>
	</head>
	
	<body>
	
	<ul id="captionedImages">
		<li class="section"><img class="randomImages" alt="" src="http://wa-learning.org.uk/images-test.png"><p class="caption">Image one - text on <br> two lines, vertically centered</p></li>
		<li class="section"><img class="randomImages" alt="" src="http://images2.layoutsparks.com/1/146751/grey-matter-random-lines.gif"><p class="caption">Image two - <br> again on two lines</p></li>
		<li class="section"><img class="randomImages" alt="" src="http://rahonavis.w.interii.pl/random_crit_3_sketch.jpg"><p class="caption">Image three - one line</p></li>
		<li class="section"><img class="randomImages" alt="" src="http://www.soccercityusa.com/yabbfiles25/Attachments/random_shots_2_RE_Random_Animals_Contest-s597x576-12657.jpg"><p class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></li>
	</ul>
	
	</body>
	
</html>

Keep in mind that this was roughly done and everything has a fixed value, but you should be able to get the idea. Let me know if you have any questions.

Regards
Arkinder

Member Avatar for dantheman50_98

This works pretty well - thanks. Only problem is ie7...the captions are sitting beneath the images. Any solution to this hiccup?

Thanks again,
Dan

Member Avatar for Arkinder

No problem. I don't actually own IE - haven't for years. The problem is that it's treating .caption as a block-level element rather than an inline-block. If I'm not mistaken this is due to something only the IE7 browser has. Try this:

.caption {display:inline-block; width: 400px; zoom: 1; *display: inline;}

Other browsers should just ignore the properties. Unfortunately it isn't valid CSS because these properties only exist in IE7 - go figure.

Regards
Arkinder

Member Avatar for dantheman50_98

Wow man, you're good. That has worked a treat. I wish my brain was capable of storing this kind of information long-term.
Just out of interest, do you not feel the urge to test your sites in explorer at all?
As much as I hate ie, I could never launch a site without first testing in it first.

Member Avatar for Arkinder

Since IE is the most used browser on the market, I really don't have a choice. I don't support IE6 at all, and I don't support any version in my personal sites. You're probably wondering how my customers contact me, see my work, etc. I'm an 18 year old freelance designer in a small town. So there really isn't a need for a website since they know me already, and have heard about or currently use something I've done.

I always test in modern browsers (Firefox, Safari, Chrome, Opera) first with valid code. After, I test in IE. It's not really an issue as much as it's an annoyance. All of IE's bug are know and so are the fixes.

Regards
Arkinder

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.