...

View Full Version : Tricky positioning problem



mkei
02-18-2008, 06:24 PM
Hello!

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.

http://img408.imageshack.us/img408/4368/problemoq4.jpg

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?

jcdevelopment
02-18-2008, 07: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;
width:auto;
position:absolute;
left:400px;
top:400px;/*or whichever you need*/
z-index:20;
}


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!!

mkei
02-18-2008, 08: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.

Cheers.

Actinia
02-19-2008, 10: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;
}
</style>
John

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

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

jcdevelopment
02-20-2008, 05: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!!

ajhauser
02-20-2008, 06: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.
:)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum