Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Aug 2006
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Tricky positioning problem

    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.



    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?

  • #2
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    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.....)

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

  • #3
    New Coder
    Join Date
    Aug 2006
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Regular Coder Actinia's Avatar
    Join Date
    Feb 2007
    Location
    Essex, UK
    Posts
    250
    Thanks
    1
    Thanked 23 Times in 22 Posts
    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.
    Code:
    <style type="text/css">
    .wrapper {
    position: relative;
    width: 800px;
    margin: 0 auto;
    }
    </style>
    John

  • #5
    New Coder
    Join Date
    Aug 2006
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ahhhh.. thank you

  • #6
    Regular Coder
    Join Date
    Oct 2005
    Posts
    336
    Thanks
    43
    Thanked 2 Times in 2 Posts
    Would an image map be no good? I know it would mean using one image.

  • #7
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    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!!

  • #8
    Regular Coder ajhauser's Avatar
    Join Date
    Nov 2007
    Location
    Earlville. It's where Earls come from.
    Posts
    226
    Thanks
    74
    Thanked 1 Time in 1 Post
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •