SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Evangelist
    Join Date
    Aug 2009
    Posts
    598
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Trouble With Gallery

    Hey Guys,

    Ok working on this website and found a great gallery I liked in jquery that I'm using for the site but got a little issue when implementing it into the site it doesnt seem to work where I want it too...

    Here is the link....

    http://modocom.ca/clubres/floorplans.html

    I believe issue is cause of a position: absolute on the gallery CSS is this something can easily fix so the galery is positioned similar to the other pages content.

    Thanks,

    Mike

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,590
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    It's not clear where you want it placed. But certainly, position: absolute is the wrong placement method.

  3. #3
    SitePoint Evangelist
    Join Date
    Aug 2009
    Posts
    598
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Yup I know, its a jquery plugin I downloaded so looking to put it into the site. Want the content/gallery to start alot lower like where content for this page begins...

    http://modocom.ca/clubres/infocenter.html

    Any ideas how to do that...

    Thanks,

    Mike

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,590
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Hm, it's a bit of anightmare to try to play with your code remotely. What I would do here is create a new test page and build it up from scratch. Firstly, place the slideshow container div on the page where you want it (margin: 0 auto etc) and then add then add the slideshow code to the page. Lock the postion of the container first. You don't need position: absolute on any of those elements. It just causes trouble.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,777
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    As Ralph siad you would be better off putting this in a demo page first to get it like you want and then move it into your page.

    Here's a quick fix though for now.

    Code:
    #componentWrapper {
    	height:400px!important;
    	top:120px;
    }
    #componentWrapper .thumbContainer { height: 210px !important; }

  6. #6
    SitePoint Evangelist
    Join Date
    Aug 2009
    Posts
    598
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that PAul but that didnt work, still need the Gallery to have threes down like it did before and need it to be positioned in the orange area, any way I can do a quick fix to solve it to have it where I need it to be with the three rows still and the navigation buttons.

    ***I changed the height to 900px so it has the three but now need to move everything down and so it is relative to the rest of the page cause resizing it is not working. Please if theres a quick fix really need the help with this.

    Thanks,

    Mike

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,777
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    I assumed you just wanted one row like a normal gallery. I didn't ntice that you have content under the fold in that other page and I would have clicked to go somewhere else.

    If you want three down then you will need to first remove the overflow from the body as you will never see anything and then just do something like this (assuming the code you have online hasn't changed by the time you add it):
    Code:
    body{overflow:visible}
    #componentWrapper {
    position:static!important;
    }
    .orange-bg{position:relative}

  8. #8
    SitePoint Evangelist
    Join Date
    Aug 2009
    Posts
    598
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Awesome, that works now just need to get it centered and need to move it down just a bit, not sure where to do that though.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,777
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    This may not work but try this:

    Code:
    #componentWrapper {
    position: relative !important;
    top: -150px;
    }

  10. #10
    SitePoint Evangelist
    Join Date
    Aug 2009
    Posts
    598
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Perfect,

    Thanks another question when I view the site on my iPhone the red logo doesnt fully show didnt know what it would be tried adding a height and changing the z-index but no luck at all.

    Thanks,

    Mike

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,777
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    I don't have an iphone but the mac iphone emulator seems to show the red logo ok although it won't be fixed positioned.

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,590
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    On the iPhone, most of the logo (the part below the <nav>) is hidden by the photo-bar div. Not sure how to fix it, though.

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,777
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by ralph.m View Post
    On the iPhone, most of the logo (the part below the <nav>) is hidden by the photo-bar div. Not sure how to fix it, though.
    The iphone emulator shows it looking ok so I can't really help here not owning an iphone. If you'd like to send me a free iphone I'll gladly test

    Perhaps remove the position fixed from the logo and the top nav via media queries for the small screen device and see what happens.


Bookmarks

Posting Permissions

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