Having trouble using css instead of tables for photo gallery

Please see http://www.comicceramics.com for reference to this post. This is a practice site I am making for my daughter. (It’s really just practice for me in website design.) I know that you should only use tables for tabular data, but it was far easier when I started to put her pictures in a table. Now I am going back to do it the right way, and am having trouble doing so on the home page (I haven’t attempted the actual photo gallery yet). I have tried every type of grouping and floating that I can think of, to no avail. What I thought would work was to have a main container for the photo thumbs, with a heading, then having two nested divs, one floated left, the other floated right, and in the floated left div I would have all the images set to float left. I also tried variations on this idea. But what happens is either the top two smaller thumbs and the taller thumb line up correctly across the div but the bottom two thumbs appear below the the taller picture and to the left (see Figure 1 on attached “Whats Happening.doc”) or the taller thumb lines up horizontally with with the bottom two thumbs instead of the top (see Figure 2 on attached “Whats Happening.doc”). Is there a way to position the thumbs to look like they do in the table in the referenced website? Can you not have floats within floats? Any comments would be most appreciated.

Hi. Your attachment is still pending, but looking at what you have using a table, describes what you want. I normally use lists for galleries etc. Maybe this helps you out somehow:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
html,body,address,blockquote,div,form,fieldset,caption,h1,h2,h3,h4,h5,h6,hr,ul,ol,ul,li,table,tr,td,th,p,img {
	margin: 0; 
	padding: 0; 
}

ul, ol, li {
	list-style-type: none; 	
}

.life { 
	width: 500px;
	float: left;
	oveflow: hidden;
}

.life h2 {
	width: 498px;
	height: 22px;
	line-height: 22px;
	margin-bottom: 5px;
	background: #FFF;
	border: #000 solid 1px;
	text-align: center;
	font-size: 14px; 
}

.life .gallery {
		width: 250px;
		float: left;
		overflow: hidden;
}

.life .img-gr,
.life .gallery li {
	width: 248px;
	float: left;
	overflow: hidden;
	padding: 5px 0;
	background: #FFF;
	border: #000 solid 1px;
	text-align: center;
	font-size: 13px;		
}

.life .gallery li {
	width: 118px;
	margin: 0 5px 5px 0;
	padding: 15px 0 5px;
	display: block;
}

.life .img-gr .text,
.life .gallery li .text {
	width: 100%;
	height: 20px;
	line-height: 20px;
	font-weight: bold;
}

</style>
</head>

<body>
<div class="life">
<h2>4 - Stages" Vase</h2>

<ul class="gallery">

<li>
<a href="gallery/pages/babyKatie.htm">
<img src="gallery/thumbnails/BabyKatie_thumb.jpg" alt="" width="80" height="100" /> 
</a>
<span class="text">BabyKatie</span>
</li>
<li>
<a href="gallery/pages/lilKatie.htm">
<img src="gallery/thumbnails/LilKatie_png.jpg" alt="" width="80" height="100" /> 
</a>
<span class="text">LilKatie</span>
</li>

<li>
<a href="gallery/pages/crazyKatie.htm">
<img src="gallery/thumbnails/CrazyKatie_thumb.jpg" alt="" width="80" height="100" /> 
</a>
<span class="text">CrazyKatie</span>
</li>
<li>
<a href="gallery/pages/wiseKatie.htm">
<img src="gallery/thumbnails/WiseKatie_thumb.jpg" alt="" width="80" height="100" /> 
</a>
<span class="text">WiseKatie</span>
</li>

</ul>

<div class="img-gr">
<img src="gallery/thumbnails/LilKatie_png.jpg" alt="" width="210" height="260" /> 
<span class="text">LilKatie</span>
</div>

</div>

</body>
</html>


You have to play a bit with dimensions, margins and paddings of course

Galleries can be easily constructed if the thumbnail images are all one size - I often use 125px x 125px. This means that in most cases you need to choose a representative portion of the larger image and then crop it to size.

If you want to maintain the same aspect ratio (width to height) as the larger image you need to decide on either the height or the width being the same for all thumbnails. For instance, you might choose to make all heights 125px and let the widths vary.

When you have the thumbnail images you place them all into a div in a long line <div><img><img><img>… etc…</div> Don’t leave any spaces or breaks in this line.

Next you set up your CSS for the div so that the width of the div is slightly larger than a multiple of the image width. For instance 125px images two wide would need about 260px to allow for the scroll bar at the right side. The CSS for the div might look like this:
#myDiv { position:absolute; top:300px; left:600px; width:260px; text-align:center; }

You also need to apply style to the images within the div as follows:
#myDiv img { right-margin:5px; bottom-margin:5px; }

This method keeps the images separated and centered within the div. After the first row of images the next one drops to the next row and continues across the div. It drops down because the width of the div is fixed, causing the images to wrap.

This method works well because you don’t need to do anything more than set up a single div to hold all the thumbnails. It will not work where the thumbnails are different in both width and height. This is why you are having trouble with 4 squares and one rectangle.

Thank you, donboe. I tinkered with the code (mainly changing widths, margin and padding) you suggested using the actual pictures and it worked just fine! I created a single html doc then took a screenshot of the results, and I have attached the finished product (which I guess you will have to wait for it to be approved before you can see it, but it looks great). I had not thought of using lists, so this is useful information. Thank you so much for taking the time to put together your suggestions.

I used the suggestion from donboe above and it worked. I am going to try your suggestion, too, but I have not had time so far. I am excited to know that, Yes, I can accomplish a gallery with varying height thumbnails without using a table (even though that way is by far easier). I may be asking for clarification, as I’m not a pro. Thank you for sending the suggestion.

You might want to take a look at inline-block galleries. The approach will work for variable sized images and allows for captions.

cheers,

gary

You’re more than welcome. gary’s suggestion for variable sized is a good one. Thank you gary for that :tup: I just saw one size images so didn’t think about that.

The article at inline-block.galleries was very interesting. It seems to explain what donboe proposed. I have lots to experiment with now. Thanks for passing on the link, Gary.

If you want to use a float gallery, and would like to recreate an inline-block style with jquery, you can also look at jQuery Masonry (http://desandro.com/resources/jquery-masonry/)

Materialdesigner – I will have to bookmark this link for later use because I haven’t yet learned java script or jquery. I looked at the link and know that it is beyond my capabilities right now, but I have already bookmarked it for when I do learn java script (which hopefully will be soon). Thank you for posting the link. (I have to apologize to everyone about my avatar. I don’t know what I’m doing wrong in creating it but always looks like p__p! I tried to edit my profile so it wouldn’t show up but it is ignoring my request.)

No problem.

Some other things I would suggest, make sure to specify alt=“” tags for all of your images, it’s required for validation.

Also, I would cut out the deprecated tags like <center> (and obviously the tables for non-tabular information) and try to move to an XHTML strict doctype while using CSS for all display purposes.

I would also change the ids inside of your Content from #lftContent and #rtContent to something more semantic, such as #contentInformation and #photoSidebar or something like that, so that if you ever decide to move the sidebar to the left side of the page, you aren’t doing something like #rtContent { float: left; } which doesn’t make any sense.

Also, I would remove the margin-left from the sidebar and float it right. Then add overflow:hidden to Content, and make the widths of #lftContent = 52% and #rtContent = 40%.

You can then remove the background image from #lftContent and instead do a border-right: 4px solid black;

Thanks for all the great suggestions. I agree with all of them, except the last one about removing the background image and adding a border to #lftContent. The reason I did the background image is so that it would continue down to the footer border. Once I changed the widths to percentages, removed the bkgrnd img from Content (which is where the background image was located, instead of on #lftContent), and added a border-right: 4px solid black, the black vertical line stopped at the end of the last paragraph in the #leftContent area instead of extending down to the footer line. Did I miss something in your suggestion? Also, why would I need “overflow: hidden” in the Content div? What would be “overflowing”? Thanks again for your review of my site and for answering my questions.

adding overflow hidden makes sure that the containing element contains all of its floated children.

There are other ways of containing floated children, but this one is one of the easier solutions.

Yeah, you’re having an issue with equal height columns. It’s one of the larger lurking CSS problems. We would be able to fix it very easily (using display: table for the container, and display: table-cell for the children) except that it’s not supported in IE7 and below.

One method for fixing it is: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

But that produces a ton of extra code, and it’s (to me) non-intuitive.

I would use javascript (jQuery) for something like that. Obviously, that means it will display differently for users without javascript enabled, but in this case the only thing that will look different is that the border won’t go all the way to the footer (IMO, an acceptable fall back).
http://www.cssnewbie.com/equalheights-jquery-plugin/

You also may be wondering “Why go through all the trouble?”
a) Moving to a flexible or fluid layout is significantly easier to maintain. If you ended up wanting to change the width of the content (say for a @media query for users on a smaller res screen), then you would just have to change #pageWrapper width and all of your layout would look exactly the same.

b) Changing the design stylistically (more than just widths) is also easier. Instead of having to go open up photoshop, fix the color or design of the border (say from solid to dashed), reupload the image, and change your css, you jsut have to change your CSS’s #lftContent border-right

c) There are obviously other reasons, but I’m super tired, haha.

Would it be wrong to use the background image as the border line? And if so, why? That seems easier than relying on java script (in case a person doesn’t have it enabled)? Forgive me my questions, I’m just trying to understand why things are done certain ways instead of other ways.

From my post above.

There are other reasons too.

d) Using a background image creates an extra HTTP request (which slows down performance).

I will admit that the file is small, so it’s not a huge issue, and it will end up just being cached. There are ways around this, like using a data uri inside of the css, but this has its drawbacks as well (like increasing the CSS file size).

e) You are using a transparent png, which if you checked in IE6, will have a greyish background, because they aren’t supported. You would have to use a filter hack to fix this.

f) Some dialup users (god, people still use that?) will have images turned off. They will not see your border if this is the case. This is why most people provide color fallback for background images.

g) Unless you plan on keeping your #lftContent exactly the same width + margins + padding, it will no longer align with the border image. There is absolutely no flexibility or fluidity.

So overall, it’s not a terrible thing, which is why I’m not shouting “OMG GO FIX IT NOW.”

It’s entirely acceptable, and your page looks very beautiful as it is. But it’s really only a manageable solution for a small site that doesn’t get updated often and is extremely static.

Since you’ve stated this is your first practice in web design, I’m pointing best practices out to you for your own betterment :slight_smile: Especially if you want to get more serious about this (and take on larger and more complex sites), these are all things to know.

@ materialdesigner: I Agree that Matthew James Taylor’s method is quite a bit of extra chuck to digest :), but I wouldn’t suggest Javascript though, while it is possible to use just CSS. If you look at Paul OB’s method . He uses three extra divs as well (absolute positioned), but unlike Matthew’s method are they only used to hold the background and not to wrap around any other content.

@katieB Yeah you could use a background image to create equal height ( Liquid Faux ) Columns. If the layout is not to complicated It can make things quite easy :slight_smile:

Great points, all. I haven’t even begun to think about designing for smart phones, etc. But I do need to know all these things, and I do want to use best practices, so thanks for pointing them out.

yup. forgot about this one. not a bad option if you want a CSS only method.