Trouble With Gallery

HTML & CSS
1

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

It’s not clear where you want it placed. But certainly, position: absolute is the wrong placement method.

3

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

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

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.


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

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

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):


body{overflow:visible}
#componentWrapper {
position:static!important;
}
.orange-bg{position:relative}
8

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

This may not work but try this:


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

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

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

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

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 :slight_smile:

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