need help centering a gallery

Discussion in 'Web Design and Development' started by sk3pt1c, Oct 15, 2010.

  1. sk3pt1c macrumors 6502a

    sk3pt1c

    Joined:
    Nov 29, 2005
    Location:
    a simulacrum
    #1
    so i found this gallery that plays fullscreen, places the image at 100% width and has the visitor scroll vertically if needed via mouse movement. turns out the client doesn't like the scrolling and just wants the full pic to show in the center of the page. here's the effect as is now
    (the original is here)
    the bit that's styling the big photo is this:
    Code:
    img.fp_preview{
        position:absolute;
        left:0px;
        top:0px;
        width:100%;
    }
    now, i can set this to height:100% instead of width:100% so i don't get the vertical scrolling and i see the whole image, but then i need to center it. the problem is that to center it, the parent element needs positioning, and if i add positioning to the parent div (fpgallery), that breaks it and it doesn't show the image at all...
    i tried adding another div with a different name around it because fpgallery is used in the javascript and i thought me styling it may cause a conflict, but that didn't work either...
    this is probably retarded and very simple to fix, but i just can't see it... help?!

    ps. the javascript on the page is doing quite a lot of meddling with the CSS to make the gallery work so i'm guessing i need to play with that a bit... trouble is, it's not really my forte, sadly, so if anyone could lend a hand, i'd appreciate it greatly!

    thank you!!!
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    This at least worked in Firefox using Firebug. I believe it also works in most modern browsers.
    Code:
    img.fp_preview{
        position:absolute;
        left: 0;
        [COLOR="Red"][B]right: 0;[/B][/COLOR]
        top: 0;
        width: auto;
        [COLOR="Red"][B]max-width: 100%;
        max-height: 100%;[/B][/COLOR]
    }
     
  3. sk3pt1c thread starter macrumors 6502a

    sk3pt1c

    Joined:
    Nov 29, 2005
    Location:
    a simulacrum
    #3
    alas, it does not work :(

    i have posted an alternate page with your rule in another css file here

    it stops the scrolling but does not center the image itself on the screen :(

    i tried it with safari and firefox on the mac and safari, firefox and ie on windows...

    this is driving me nuts :(
     
  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    Looks like I missed a line.

    Code:
    margin: 0 auto;
     
  5. sk3pt1c thread starter macrumors 6502a

    sk3pt1c

    Joined:
    Nov 29, 2005
    Location:
    a simulacrum
    #5
    i cannot thank you enough!!!!! :)

    i owe you a beer if you ever come to greece :D :D :D
     

Share This Page