Forum Moderators: not2easy
I have simple seeming design brief which has got me stumped, not sure if this should go under 'HTML' or 'CSS', or if it's been asked before but here goes..
I need to make a seamless grid of images (all of which are 100x100px) held in a container that will resize. "Easy!" I hear you shout. Now comes the tricky part .. I lied, some are 200x200px.
So imagine a grid of boxes, except one is twice as big as the others. How can I achieve that effect in HTML/CSS?
By default the larger image push the next row down a line, leaving a gap. I've looked into 'float' and 'align' but they dont seem to help.. I need some kind of vertical float effect.
A table with rows of cells would not allow the images to wrap onto the next line on resizing. Playing with individual divs would seem to have the same problem..
Well thanks a lot if you have any good ideas,
All the best,
Ultraniblet
What's going to happen to these images when your container resizes? I'm not sure that you can have it both ways. Maybe if you define overflow, you can just not show some of the images....
I don't think you can use different sizes of images, float them, and expect to see the browser respond happily. And I'm not sure you can float them without getting spaces between the images on at least a few browsers. (I'm not sure about that.) That kind of pixel perfect design is really hard with CSS and not worth the aggravation.
I'll assume that you really want no gaps. If I were doing this, I'd try it without the resizing ability, making sure that the width was small enough to be seen on a monitor set to 800x600.
I'd probably use absolute positioning to make sure the images were exactly where I wanted them. Define all positions from the same reference point, like this:
First row, first image:
top: 0px; left: 0px;
First row, second image:
top: 0px; left: 100px;
First row, third image:
top: 0px; left: 200px;Second row, first image:
top: 100px; left: 0px;
Second row, second image:
top: 100px; left: 100px;
Second row, third image:
top: 100px; left: 200px;
Third row, first image: /*big image*/
top: 200px; left: 0px;
Third row, third image:
top: 200px; left: 200px;
Fourth row, third image: /*partial row*/
top: 300px; left: 200px;
....etc.
HTH
Thanks a lot for your response.
I don't think my clients design concept is very CSS/HTML friendly .. They wanted a grid of images in a resizable window, and the images double in size when rolled over / return to normal when rolled out. It's a bit embarassing to say it's not possible because it seems so simple!
Thanks for your code, I will try to convince them to take a different approach.
I suppose HTML's design system is based around lines of text, and CSS is mostly used for positioning in absolute terms, so designs like this fall in between somewhere ..
Thanks again!
Niblet
the images double in size when rolled over / return to normal when rolled out.
Here's a thought: place each image in a 200px by 200px div. Center the image horizontally and vertically within that div. Float all of those divs in one direction. This will give you a grid of 200X200 blocks, inside of which will be 100px seperated images. The rollover will work fine without disrupting the layout.
If your client balks at this, if what they want is for the images to sit border-to-border, it may be time to build either a graphic mock up or a small demo page to show them how awful this concept will work and look if implemented as border-to-border 100pxX100px images that resize to 200X200 on rollover. Just ONE image resized like that will shuffle the whole thing around, moving images from the end of row one to the beginning of row two and botching up the whole deal. Doing it on ROLLOVER will mean that the page never sits still as users move the mouse over it. Yuck. I'm getting motion sick just thinking about it.
[ADDED]
Here's a hastily thrown together test page. Instead of images, it uses widthed and heighted divs, so the behavior is slightly different than actual images would be. For instance, you'll see in the bottom sample grid, the "image" part is not vertically centered. This is tricky to do with divs, but shouldn't be hard to accomplish with actual images. For easy and quick coding, I also applied the :hover to the divs, which means the demo will only work in Firefox.
Regardless, the top grid on this page gives some sense of the madness that your client is after. Show it to them if you like, just make sure they're not epileptic or the hover effect might set them off.
The second grid is somewhat saner.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Image Grid with :hover Resize</title>
<style type="text/css">
#container1{
width:90%;
}
#container1 .image{
float:left;
width:100px;
height:100px;
background:#369;
color:#fff;
text-align:center;
}
#container1 .image:hover{
width:200px;
height:200px;
}
#container1 .image p{
height:100%;
margin:0;
padding:0;
border:1px solid #123;
}#break_it_up{
clear:left;
height:50px;
}#container2{
width:90%;
}
#container2 .image_box{
float:left;
width:200px;
height:200px;
background:#123;
}
#container2 .image{
width:100px;
height:100px;
background:#369;
color:#fff;
text-align:center;
margin: 0 auto;
}
#container2 .image:hover{
width:200px;
height:200px;
}
#container2 .image p{
height:100%;
margin:0;
padding:0;
border:1px solid #123;
}</style>
</head>
<body>
<div id="container1">
<p>100px images, side-by-side, resize to 200px on :hover</p>
<div class="image"><p>1</p></div>
<div class="image"><p>2</p></div>
<div class="image"><p>3</p></div>
<div class="image"><p>4</p></div>
<div class="image"><p>5</p></div>
<div class="image"><p>6</p></div>
<div class="image"><p>7</p></div>
<div class="image"><p>8</p></div>
<div class="image"><p>9</p></div>
<div class="image"><p>10</p></div>
</div>
<div id="break_it_up"></div>
<div id="container2">
<p>100px images, in 200px blocks, resize to 200px on :hover</p>
<div class="image_box"><div class="image"><p>1</p></div></div>
<div class="image_box"><div class="image"><p>2</p></div></div>
<div class="image_box"><div class="image"><p>3</p></div></div>
<div class="image_box"><div class="image"><p>4</p></div></div>
<div class="image_box"><div class="image"><p>5</p></div></div>
<div class="image_box"><div class="image"><p>6</p></div></div>
<div class="image_box"><div class="image"><p>7</p></div></div>
<div class="image_box"><div class="image"><p>8</p></div></div>
<div class="image_box"><div class="image"><p>9</p></div></div>
<div class="image_box"><div class="image"><p>10</p></div></div>
</div></body>
</html>
cEM
I think maybe they've seen something in Flash & want it done in HTML?! :-) Maybe it was that '10x10' thing which pulled in images from current news into a grid...
I will show them your example CeM, which is great by the way, and Zoller your idea is a very practical alternative.
So thanks again, you've really helped me!
Kindest regards,
Niblet
<table width="600">
<tr>
<td width="200" valign="top">
<table width="200">
<!-- create as many tr's as needed -->
<tr>
<td>
<img src="myImage">
</td>
</tr>
<tr>
<td>
<img src="myImage">
</td>
</tr>
</table>
</td>
<td width="200" valign="top">
<table width="200">
<tr>
<td>
<img src="myImage">
</td>
</tr>
</table>
</td>
<td width="200" valign="top">
<table width="200">
<tr>
<td>
<img src="myImage">
</td>
</tr>
</table>
</td>
</tr>
</table>
This would then allow you to display the 100X100 image and then enlarge it to 200X200 when the user rolls over the image. It will push all the other images in that table down but not effect the other columns containing images.
Hopefully this will help, I've done similar things like this before and it has worked for me. If I'm understanding your problem correctly that is.
Aaron
If you are wanted the images to touch on both sides and pull the image out larger without realigning the height and width they you will either need to use flash or do some really nifty javascript programming using layers. I hope this helps.
Then 'float' the 200 image left, so it does have a blank row sometimes when you resize the window? It works great if you can deal with having the larger one on the left.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Image Grid with :hover Resize</title>
<style type="text/css">#container1{
width:90%;
}.image1{
float:left;
width:100px;
height:100px;
background: navy;
color:#fff;
text-align:center;
}
.image2{
clear:left;
float:left;
width:200px;
height:200px;
background:red;
color:white;
text-align:center;
}</style>
</head>
<body>
<div id="container1">
<p>100px images, side-by-side, resize to 200px on :hover</p>
<div class="image1"><p>1</p></div>
<div class="image1"><p>2</p></div>
<div class="image1"><p>3</p></div>
<div class="image1"><p>4</p></div>
<div class="image2"><p>5</p></div>
<div class="image1"><p>6</p></div>
<div class="image1"><p>7</p></div>
<div class="image1"><p>8</p></div>
<div class="image1"><p>9</p></div>
<div class="image1"><p>10</p></div>
<div class="image1"><p>11</p></div>
<div class="image1"><p>12</p></div>
<div class="image1"><p>13</p></div>
<div class="image1"><p>14</p></div>
<div class="image1"><p>15</p></div>
<div class="image1"><p>16</p></div>
<div class="image1"><p>17</p></div>
</div></body>
</html>
