15 replies [Last post]
nvent
nvent's picture
Offline
Regular
Last seen: 16 years 12 weeks ago
Joined: 2005-09-10
Posts: 35
Points: 0

hello all,
First, can I hear a huge "hooray" for these forums? I don't know how I ever got by without them Smile

I have to build a gallery layout. I've read the articles here and here, but They're not quite addressing what I want to do.

See attached image.

I want to set up a gallery that is essentially a three-in-one gallery, and it would be great to keep the same-column div items next to each other in the code, so that the categories are grouped, if that makes sense. The items could be irregular, but all centering within their columns with a fixed width of padding to the top and bottom.

Also the borders are complex: I'm assuming the header would be three divs with bottom borders, and two of the main columns would have a border on one side only, with the third one having no border.

Anyhow, Thanks for any guidance Smile

nvent
nvent's picture
Offline
Regular
Last seen: 16 years 12 weeks ago
Joined: 2005-09-10
Posts: 35
Points: 0

Unique Gallery thumbnail layout assistance

Due to the fact that I want to respect everyone's time, i am going to post my attempt, please stay tuned. Someimtes it takes me days to grapple with div positioning problems across browsers... Smile

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Unique Gallery thumbnail layout assistance

You could probably do that with a list with the <li>s floated left and with the same width. Then you could put a header at the start of each <li> which has a bottom border for the horizontal line. Then you'd need to contain your images within another element that has a right border (for the vertical lines) and get it to butt up against your headers. You'll need to have no margins or padding on the <li>s to get it to work, but could apply padding to the elements contained within.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

nvent
nvent's picture
Offline
Regular
Last seen: 16 years 12 weeks ago
Joined: 2005-09-10
Posts: 35
Points: 0

Unique Gallery thumbnail layout assistance

First, I set up my divs:

<div class="container">
<div class="header">header</div>
<div class="header">header</div>
<div class="header">header</div>
<br />
<div class="column">column1</div>
<div class="column">column2</div>
<div class="column2">column3</div>
</div>

The container is because I want to float the whole thing to the right within another div.

The last column is class="column2" because I don't need a border on that one.

nvent
nvent's picture
Offline
Regular
Last seen: 16 years 12 weeks ago
Joined: 2005-09-10
Posts: 35
Points: 0

Unique Gallery thumbnail layout assistance

Next, I'm setting up some styles to get basically what I need in terms of general layout:

<style type="text/css">
	.header{
		float: left;
		text-align: center;
		border-bottom: 1px solid Gray;
		padding: 10px;
	}
	.column{
		text-align: center;
		border-right: 1px solid silver;
		float: left;
		padding: 10px;
	}
	.column2{
		text-align: center;
		float: left;
		padding: 10px;
	}
	.clearboth { clear: both; }
</style>

<div class="header">header</div>
<div class="header">header</div>
<div class="header">header</div>
<br class="clearboth" /> 
<div class="column">column</div>
<div class="column">column</div>
<div class="column">column</div>

nvent
nvent's picture
Offline
Regular
Last seen: 16 years 12 weeks ago
Joined: 2005-09-10
Posts: 35
Points: 0

Unique Gallery thumbnail layout assistance

Now I start to run into problems:

I add my thumbnail divs, and a style tag to clarify things a bit:

This class:

.thumbnail{
		background: #ADD8E6;
		margin: 5px;
	}

and these thumbnail divs, colored for easy viewing:

<div class="column">
<div class="thumbnail">Thumbnail</div>
<div class="thumbnail">Thumbnail</div>
<div class="thumbnail">Thumbnail</div>
</div>

but now, I get a header that is out of whack because of the width of my thumbnail divs. See attached image. The complexity starts to go up and up...

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Unique Gallery thumbnail layout assistance

Did you read what I wrote? I think you need to have your header in the same element (an <li> in the example I gave) if you want them to line up properly.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

nvent
nvent's picture
Offline
Regular
Last seen: 16 years 12 weeks ago
Joined: 2005-09-10
Posts: 35
Points: 0

Unique Gallery thumbnail layout assistance

So now I try to text-align: center the container div to make things line up in the middle, but it doesnt work for who knows why. This is where CSS gets fun...

.container{
		text-align: center;
		}

This made no visual change.
I turn on the borders of the header columns to better visualize alignment....

Next, I figure that I'd better pixel-control everything to try and get the 3 header columns to line up with the bottom three colums.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Unique Gallery thumbnail layout assistance

Hello! Are you actually listening to me or just talking to yourself? :?
This seems to be close to what you're after:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
* { margin: 0; padding: 0; }
 ul { list-style: none; }
li { float: left; width: 30%; }
h1 { border-bottom: 1px solid black; text-align: center; }
div.rightborder { border-right: 1px solid black; }
div { padding: 10px; }

</style>
</head>
<body>
<ul>
	<li>
		<h1>Header</h1>
		<div class="rightborder">
		Image 1
		Image 1
		Image 1
		Image 1
		Image 1
		Image 1
		</div>
	</li>
	<li>
		<h1>Header</h1>
		<div class="rightborder">
		Image 2
		Image 2
		Image 2
		Image 2
		Image 2
		Image 2
		</div>
	</li>
	<li>
		<h1>Header</h1>
		<div>
		Image 3
		Image 3
		Image 3
		Image 3
		Image 3
		Image 3
		</div>
	</li>
</ul>

</body>
</html>

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

nvent
nvent's picture
Offline
Regular
Last seen: 16 years 12 weeks ago
Joined: 2005-09-10
Posts: 35
Points: 0

Unique Gallery thumbnail layout assistance

Tyssen wrote:
Did you read what I wrote? I think you need to have your header in the same element (an <li> in the example I gave) if you want them to line up properly.

I did, but I don't know how to get a bunch of <li> to stack in columns of three.

I'm trying to adhere to these forum's policies by showing my efforts... as much as they stink Smile

nvent
nvent's picture
Offline
Regular
Last seen: 16 years 12 weeks ago
Joined: 2005-09-10
Posts: 35
Points: 0

Unique Gallery thumbnail layout assistance

Tyssen,
You are a genius, your example is beautiful and simple, for some reason mine always go so complex.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Unique Gallery thumbnail layout assistance

No problem. Wink

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

nvent
nvent's picture
Offline
Regular
Last seen: 16 years 12 weeks ago
Joined: 2005-09-10
Posts: 35
Points: 0

Unique Gallery thumbnail layout assistance

Although...... Wink

When I drop images into it, I get a broken top border: (see image)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>
<style>
	* { margin: 0; padding: 0; }
	ul { list-style: none; }
	.container {width: 400px;}
	li { float: left; width: 30%;
		text-align: center;}
	h1 {
		border-bottom: 1px solid Silver;
		text-align: center;
		font-size: x-small;
	}
	div.rightborder { border-right: 1px solid silver; }
	div { padding: 10px; }
</style>

<div class="container">
<ul>
   <li>
      <h1>Header</h1>
      <div class="rightborder">
<img src="images/portfolio/test.jpg" alt="" width="107" height="90" border="0">
<img src="images/portfolio/test.jpg" alt="" width="107" height="90" border="0">
<img src="images/portfolio/test.jpg" alt="" width="107" height="90" border="0">
<img src="images/portfolio/test.jpg" alt="" width="107" height="90" border="0">
      </div>
   </li>
   <li>
      <h1>Header</h1>
      <div class="rightborder">
<img src="images/portfolio/test.jpg" alt="" width="107" height="90" border="0">
<img src="images/portfolio/test.jpg" alt="" width="107" height="90" border="0">
<img src="images/portfolio/test.jpg" alt="" width="107" height="90" border="0">
<img src="images/portfolio/test.jpg" alt="" width="107" height="90" border="0">
      </div>
   </li>
   <li>
      <h1>Header</h1>
      <div>
<img src="images/portfolio/test.jpg" alt="" width="107" height="90" border="0">
<img src="images/portfolio/test.jpg" alt="" width="107" height="90" border="0">
<img src="images/portfolio/test.jpg" alt="" width="107" height="90" border="0">
<img src="images/portfolio/test.jpg" alt="" width="107" height="90" border="0">
      </div>
   </li>
</ul>
</div>
</body>
</html>

also, I notice you put the "div" in div.class{} within your styles, what's the benefit of that?

nvent
nvent's picture
Offline
Regular
Last seen: 16 years 12 weeks ago
Joined: 2005-09-10
Posts: 35
Points: 0

Unique Gallery thumbnail layout assistance

Hmm, on further trial and error, I found that my limiting the container to 400px wide caused that, when I open it to 500px wide, it fixes itself.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Unique Gallery thumbnail layout assistance

nvent wrote:
also, I notice you put the "div" in div.class{} within your styles, what's the benefit of that?

That just means that style will only affect div elements. If you want it to be usable on different elements, you'd remove the div reference. It can also be helpful as a reminder if you have a hefty CSS file to what element you've attached something.
Depending on the width of your layout and your images, you'll have to play around with the widths of the container and the <li>s, keeping in the mind that if your images are wider than your <li>s, they're going to break your layout.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

nvent
nvent's picture
Offline
Regular
Last seen: 16 years 12 weeks ago
Joined: 2005-09-10
Posts: 35
Points: 0

Unique Gallery thumbnail layout assistance

Thanks a ton man, I've learned a few things tonight : )
Now to bed for some much deserved zzzz's