Code help for different screen resolutions

Discussion in 'Web Design and Development' started by Bern, Oct 30, 2006.

  1. Bern macrumors 68000

    Bern

    Joined:
    Nov 10, 2004
    Location:
    Australia
    #1
    I created a website for a friend who is a photographer. It's all hand coded
    using XHTML and CSS.

    I created an image gallery which is just basically a series of thumbnails with the larger image on top (using <span> ).

    My problem is that depending on what resolution the visitor is using on their screen depends on the accuracy of positioning of the larger image above the thumbnails.

    The tag I'm using in CSS is simply:-

    #gallerycontainer{height: 33em; margin:auto;}

    .thumbnail img{border: none; margin: 30em 0.2em 0em 0em;}

    .thumbnail:hover{background-color: transparent;}

    .thumbnail:hover img{border: none;}


    /*CSS for enlarged image*/

    .thumbnail span{ position: absolute;
    visibility: hidden;
    top: 5em;
    left: 22%;
    margin: auto:}

    /*CSS for enlarged image*/

    .thumbnail span img{border-width: 0;
    padding: 0 0 0 0;
    margin: auto;}

    /*CSS for enlarged image*/

    /*position where enlarged image should offset horizontally */

    .thumbnail:hover span{visibility: visible;
    top: 5em;
    left: 22%;
    margin: auto;}



    So it's the "left:22%" for the hover.span and the thumbnail span that is giving me grief.
    In this state the images look fine on a screen resolution of 1024 x 768, but anything higher and the larger image moves to the left (out of line that is).

    So I was wondering is there a way I can apply Javascript so that it recognises what the resolution of the visitor's screen is set at and chooses the correct positioning of the span image to suit?

    I'm a total newb at Javascript so I'd really appreciate any help.

    Thanks :)
     
  2. Bern thread starter macrumors 68000

    Bern

    Joined:
    Nov 10, 2004
    Location:
    Australia
    #2
    Never mind, I again have worked out another way to create an image gallery using Javascript which means I won't have to worry about this issue.
     

Share This Page