View Full Version : Tricky positioning problem

02-18-2008, 07:24 PM

I've got this project on the go that at first I thought wouldn't be too hard at all, but on further inspection has thrown me somewhat.


As you can see from the picture above, all those thumbnails aren't positioned in rows or anything, this is my problem.

What is the best/easiest way to position them so that they resemble the above layout?

02-18-2008, 08:29 PM
well it depends on what you are needing, possibly your best bet(depending on the resolution of your page) is to position them absolute.

Lets say you are working in a 1024 x 768 than you need to make sure that when positioning that you keep your images in a margin of 1000 probably!!

for example, lets take one picture that you have, just an icon.

we will call it shop_img.gif(or png. or jpg.....)

in your css

.shop_img {
background-image:url(filepath/shop_img.gif) no-repeat;
top:400px;/*or whichever you need*/

then you will place it in the html and style it to the right position..

That would be the way i would do it, but others may have another solution, but this should work!!

02-18-2008, 09:04 PM
thanks for your input jcdevelopment. I have infact tried absolute but figured it wouldn't work as my whole page is centred (so if the browser window changes size, things mess up).

After a few hours of researching and asking around, the way I've decided to go about it is a CSS image map.


02-19-2008, 11:21 AM
You can still use absolute positioning in a centred environment. You need a centred wrapper div with a fixed width, and relative positioning. Then the absolutely positioned divs within it are place with respect to this wrapper.
<style type="text/css">
.wrapper {
position: relative;
width: 800px;
margin: 0 auto;

02-20-2008, 05:12 PM
ahhhh.. thank you :)

02-20-2008, 05:53 PM
Would an image map be no good? I know it would mean using one image.

02-20-2008, 06:13 PM
i think that going through the trouble of mapping everything out would be much harder than positioning images. I guess its up to the developer!!

02-20-2008, 07:20 PM
Not to mention to go back and edit code that has been sitting for months is much more confusing with the extra lines of goofy numbers that come with an image map.

Plus, if it is one large image loading instead of several small thumbnail images, it gives the viewer the impression that the site loads very slowly.

But like they said, it depends on the developer.