best way to mark-up a grid of images

PeakOutput

Hi,

I am currently coding a portfolio type site were the home page is going to be dominated by a 3*2 grid. Each section of the grid will represent an area of expertise or a service the site owner offers. in each section there will be 4 equally sized images that are examples of the owners work in that area.

When you mouse over each section it will change color and show a paragraph briefly describing the service. When you click it it will either enlarge that section for a better view or take the user to a seperate page for that service, I havnt decided yet.

My question is how should I mark-up the grid with the images. I was initially thinking of a 3*2 table with another 2*2 table in each box but I feel like divs might be a better way if you can arrange the divs correctly using css.

Any ideas? Here is what I am thinking so far as far as divs go.This would represent one section of the grid with 4 images inside it. Not sure if each image really needs its own class but I would appreciate any advice you have.

  <div class="main">
    <div class="sub">
      <div class="image">
        <img class="img1" src=""></img>
        <img class="img2" src=""></img>
        <img class="img3" src=""></img>
        <img class="img4" src=""></img>
      </div>
    </div>
  </div>

PeakOutput

Here is what I have so far. Now I am trying to figure out how to style the images so they fit in how I want

codepen.io

KonFusion

I'd ditch the divs. Maybe do it as an unordered list.

no, they don't each need a seperate class. Use a css selector.

Why are you using a % for your width if you wish to maintain the 3x2? Do you wish for it to be responsive?

Any good with photoshop? Got a mockup of the site? Even just draw out some squares in paint or something.

There's a much cleaner way to mark this whole thing up, and style it. If you give me a mock up or something so I can get a better idea then I'll stick an example on codepen you can work off.

And no tables! Tables are only for tabular data

PeakOutput

KonFusion wrote: »

I'd ditch the divs. Maybe do it as an unordered list.

no, they don't each need a seperate class. Use a css selector.

Why are you using a % for your width if you wish to maintain the 3x2? Do you wish for it to be responsive?

Any good with photoshop? Got a mockup of the site? Even just draw out some squares in paint or something.

There's a much cleaner way to mark this whole thing up, and style it. If you give me a mock up or something so I can get a better idea then I'll stick an example on codepen you can work off.

And no tables! Tables are only for tabular data

Thanks, I would like it to be responsive, although just getting it right on my screen initially is the goal, so figured starting out with percentages and ems would help with that when it came to it. I have run into the problem I imagine you foresaw already though, when I resize the browser window it loses the 3*2.

I have a mock-up I can email it to you if you pm me your email address. I am trying to learn though so instead of just doing it for me if you could just point me in the right direction that would be appreciated.

KonFusion

PeakOutput wrote: »

I have a mock-up I can email it to you if you pm me your email address. I am trying to learn though so instead of just doing it for me if you could just point me in the right direction that would be appreciated.

No problem.

No need for the email. I just want an idea of your layout and what content you wish to place in these, er, squares. Is it just images?

Have you any text on the home page, or is it just these 5 images?

Whats the purpose of the site?

PeakOutput

there is a centered logo at the top of the page

then a nav section which will have 4 links 2 to the left of the logo and 2 to the right.

then the images, in total there will be 24 images in groups of 4, arranged 3*2

each group represents a service the company offers and when you hover your mouse over the group of 4 images its opacity will change and text will appear over that group of images. although I will worry about that particular next week. just want the best way to arrange the images right now.

at a later date each individual image may need to be clickable.

When I have all the html / css and js done, I will be trying to convert it to a wordpress theme.

I hope this makes sense, this is mainly just a learning excersise for me.

Deliverance XXV

PeakOutput wrote: »

there is a centered logo at the top of the page

then a nav section which will have 4 links 2 to the left of the logo and 2 to the right.

then the images, in total there will be 24 images in groups of 4, arranged 3*2

each group represents a service the company offers and when you hover your mouse over the group of 4 images its opacity will change and text will appear over that group of images. although I will worry about that particular next week. just want the best way to arrange the images right now.

at a later date each individual image may need to be clickable.

When I have all the html / css and js done, I will be trying to convert it to a wordpress theme.

I hope this makes sense, this is mainly just a learning excersise for me.

What do you mean by "arranged 3*2"? Do you mean six rows and four columns or different amounts of images in each row?

I done something similar recently where I built a photo-blog that outputs 20 of the most recent images on the homepage which are arranged in groups of 4. The way I worked it was by using set-size images in a fixed size div and the images just move down to the next line when space runs out. Just made sure that the numbers added up. When using effects on the images, as usual IE was a PITA! Link is in my sig if you are interested at looking how the structure works out.

PeakOutput

Deliverance XXV wrote: »

What do you mean by "arranged 3*2"? Do you mean six rows and four columns or different amounts of images in each row?

I mean 2 rows of 3 columns. Each space on the grid is then filled with 4 equally sized images arranged 2 high and 2 wide.

stevenmu

Do you have to write it yourself?

There's lots of gallery/slideshow modules out there that will have all or most of what you want with a bit of configuration. They can display your images, have roll-over descriptions, open them in either a new page or a lightbox with or without paragraphs of text and so on.

GreeBo

+1 on avoiding tables!

Id take a look at some jquery plugins, you are better off not trying to invent the wheel on this one imo.

PeakOutput

I was going to use jquery for the interactivity alright but yeah I want to do it without using plugins wordpress or otherwise just to learn.

I have some experience and my degree is development related however I have been travelling for the last couple of years and am returning in may so trying to get back into the swing of things now so I can try and get back into the industry. I have the theory down pretty well but putting it into practice is another story so thats were I am right now.

Giblet

Some "clever" css and just image tags.

<style>
img{width:100px; height:100px; border:1px solid #ccc; display:block; float:left;margin:5px;}
img:nth-child(2n) {  
  margin-right:25px;
}
img:nth-child(7n) {   
	clear:left;
}
img:nth-child(7n+13) { 
	clear:left;

}
img:nth-child(7n+14) {  
	clear:none;
}
img:nth-child(n+13)
{margin-top:25px;}
img:nth-child(n+19)
{margin-top:5px;}
img:nth-child(7n+20) {  

clear:none;
}
img:nth-child(7n+19) {  
	clear:left;
}
</style>

<img src=""></img>
<img src=""></img>
<img src=""></img>
<img src=""></img>
<img src=""></img>
<img src=""></img>
<img src=""></img>
<img src=""></img>
<img src=""></img>
<img src=""></img>
<img src=""></img>
<img src=""></img>
<img src=""></img>
<img src=""></img>
<img src=""></img>
<img src=""></img>
<img src=""></img>
<img src=""></img>
<img src=""></img>
<img src=""></img>
<img src=""></img>
<img src=""></img>
<img src=""></img>
<img src=""></img>

Kill it with fire!