Mini grid with 960 gs

HTML & CSS
1

this is a sidebar which has one large image and a series of smaller images around it. does anyone know how i would acheive this with 960 gs?

the large one is enough to take up 2 on the grid and the smaller ones are a 1.

2

Are the images all the same size always? If so just float them all left with margins or padding on them. End of problem. The little ones will just stack atop the big ones.

For example, let’s say your large image is 144x144, and your smaller images are 64x64 (I’m ballpark guessing based on your pic - it also helps to work with multiples of 8 for me) that would mean the need for 16px spacing to make them all equal height, and a 320px container… which I’d make 323px so that IE doesn’t hit up against the ‘perfect width’ bug.

No need to get too fancy on the markup for that:


<div class="stackGallery">
	<img
		src="images/bigPic.png"
		width="144"
		height="144"
		alt="big Picture"
	/>
	<img
		src="images/small1.png"
		width="64"
		height="64"
		alt="thumbnail"
	/>
	<img
		src="images/small2.png"
		width="64"
		height="64"
		alt="thumbnail"
	/>
	<img
		src="images/small3.png"
		width="64"
		height="64"
		alt="thumbnail"
	/>
	<img
		src="images/small4.png"
		width="64"
		height="64"
		alt="thumbnail"
	/>
	<img
		src="images/small5.png"
		width="64"
		height="64"
		alt="thumbnail"
	/>
	<img
		src="images/small6.png"
		width="64"
		height="64"
		alt="thumbnail"
	/>
	<img
		src="images/small7.png"
		width="64"
		height="64"
		alt="thumbnail"
	/>
	<img
		src="images/small8.png"
		width="64"
		height="64"
		alt="thumbnail"
	/>
<!-- .stackGallery --></div>

and for CSS:


/* assumes margins and padding are nulled */
.stackGallery {
	overflow:hidden; /* wrap floats */
	width:323px; /* also trips haslayout, wraps floats in IE */
	/* 
		width figured as follows:
		144 image + 16 margin == 160
		64 image  + 16 margin ==  80
		160+80+80             == 320. 
		Plus 3 px for
		IE being a retard     == 323
	*/
}

.stackGallery img {
	float:left;
	display:inline; /* prevent IE double margin bug */
	margin:0 16px 16px 0;
}

That really should be all there is to achieving that effect assuming you have control over the image sizes and they are always going to be uniform. All those floats should add up and stack properly. If it has any real problems with that, swap the margin for padding. (code untested, but should be sound)

Oh and Grid? Forget it exists. SERIOUSLY.

3

blech. i tried this with two columns (and not using 960), i found there is a lot of markup and it’s not as “tight” as i’d like it to be.

<style type=“text/css”>
#col1{
width:150px;
float:left;
}

.large{
margin-bottom:10px;
}

#col2{
width:150px;
float:right;
}

#flickr img{
margin-right:13px;
} // flickr is the general div that this belongs to

.duos{
margin-bottom:10px;
}
</style>

<div id=“col1” >
<img src=“images/largeImg.gif” class=“large” />

<div class=“duos”>
<img src=“images/smallImg.gif” />
<img src=“images/smallImg.gif” />
</div> <!-- end duos –>

</div> <!-- grid_2 –>

<div id=“col2” >

<div class=“duos”>
<img src=“images/smallImg.gif” />
<img src=“images/smallImg.gif” />
</div> <!-- end duos –>

<div class=“duos”>
<img src=“images/smallImg.gif” />
<img src=“images/smallImg.gif” />
</div> <!-- end duos –>

<div class=“duos”>
<img src=“images/smallImg.gif” />
<img src=“images/smallImg.gif” />
</div> <!-- end duos –>

</div> <!-- end col2 –>

4

That’s not that bad IMO :). Though a frmaework probably could make it slightly cleaner, noone else has posted…I don’t think many users on here even use frameworks (960 nonetheless).

If there is a 960 forum, I think you might want to check into that :slight_smile:

5

I personally don’t know of one, I don’t even know if one exists :).

I tried googling of one too, yet no avail.

Hopefully another member will come up who has experience in 960, otherwise your SOL I’m afraid :frowning:

I’m out :slight_smile:

6

Do you know where the forum is? I looked but couldn’t find it. A google for 960 forum brought me here :slight_smile:

7

Hi, I don’t use 960 so I can’t help here, but this can easily be achieved without using that framework, do you absolutely have to use it?

8

they are just images

9

You could :). It depends on how the smaller boxes would flow together (if they hold the same stuff) but you could do it into 2 columns, yes :slight_smile:

10

no i don’t have to use it, but the rest of the site is on this grid, so if i can figure out how to apply it to this small section it will all align super nice with very limited CSS.

without the grid system i assume i would divide this up into two columns right?