HomeLatest ThreadsGreatest ThreadsForums & GroupsMy SubscriptionsMy Posts
DU Home » Latest Threads » Forums & Groups » Topics » Computers & Internet » Website, DB, & Software Developers (Group) » jQuery experts...how woul...

Fri Apr 13, 2012, 11:19 PM

jQuery experts...how would you center this on a page?

The person who developed this slideshow / gallery did a pretty nice job...unfortunately, there are several "how do I center this on the page" queries in his support forum that he hasn't answered. Using his script "as is" results in a left-justified gallery, which is something I never do. Any insight would be appreciated. Some folks in his support forum said they tried tweaking the CSS and that didn't work.

I normally do photo galleries in Flash, but my customers are becoming increasingly sensitive to the lack of functionality on iPhones, iPads, etc., so I've been investigating jQuery solutions.



http://coffeescripter.com/code/ad-gallery/

7 replies, 2111 views

Reply to this thread

Back to top Alert abuse

Always highlight: 10 newest replies | Replies posted after I mark a forum
Replies to this discussion thread
Arrow 7 replies Author Time Post
Reply jQuery experts...how would you center this on a page? (Original post)
Amerigo Vespucci Apr 2012 OP
Make7 Apr 2012 #1
Amerigo Vespucci Apr 2012 #2
Make7 Apr 2012 #3
Amerigo Vespucci Apr 2012 #4
Make7 Apr 2012 #5
Amerigo Vespucci Apr 2012 #6
Make7 Apr 2012 #7

Response to Amerigo Vespucci (Original post)

Fri Apr 13, 2012, 11:48 PM

1. I'm not sure I understand what exactly you want centered.

Is it the area with the colored background that contains the pictures and controls?

If so, I added the following CSS using Stylish and it centered it within what appears to be the page width being displayed:

.ad-gallery {
   margin-left:auto !important;
   margin-right:auto !important;
}

(You'll obviously still need to have the existing width declaration in there.)

Hopefully, that answers the right question.

Reply to this post

Back to top Alert abuse Link here Permalink


Response to Make7 (Reply #1)

Sat Apr 14, 2012, 12:46 AM

2. Thank you...that definitely worked for the gallery (the blue shaded area & its contents)...

...that's now centered in the container, and I need to center the container in a page. When I build a page I generally do an 800 pixel wide comp in Photoshop and slice it in Fireworks. That way I have an 800 pixel wide page that I open in Dreamweaver, and I center the table created by Fireworks on the page. So the end result I'm looking for is an 800 pixel centered page, and centered on that page would be the container with the gallery (the blue shaded area) centered in that.

Reply to this post

Back to top Alert abuse Link here Permalink


Response to Amerigo Vespucci (Reply #2)

Sat Apr 14, 2012, 05:09 PM

3. Can't you just do the same thing with style for the <body> tag?

Example of external style sheet entry:

body {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
}

Or you could create a div-element container to make things more obvious:

Example external style sheet entry:

div.page-container {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
}

Basic html code:

<html>
    <head>
        blah .. blah .. blah
    </head>

    <body>
        <div class="page-container">

            your code here

        </div>
    </body>
</html>

Reply to this post

Back to top Alert abuse Link here Permalink


Response to Make7 (Reply #3)

Sat Apr 14, 2012, 05:39 PM

4. You're probably right...I will have to try that.

Thanks again for your help...I want to build a prototype of this soon and start phasing out the Flash galleries.

Reply to this post

Back to top Alert abuse Link here Permalink


Response to Amerigo Vespucci (Reply #4)

Sat Apr 14, 2012, 08:06 PM

5. Since your page will be centered, maybe just make the gallery full width...

I was thinking that instead of centering the gallery within a centered container on the page, it might work just fine to make the gallery the same width (or close to it) as the container. Just use this for the full width:

.ad-gallery {
    width:800px;
}

Or if it seems to be better a little narrower than the page container:

.ad-gallery {
    width:750px;
    margin-left:auto !important;
    margin-right:auto !important;
}

And you can always adjust the height as needed as well:

.ad-gallery .ad-image-wrapper {
    height:500px;
}

You'll probably have to play around with it a little to be happy with the position, size, color, etc. - but that underlying gallery script is pretty cool.

Reply to this post

Back to top Alert abuse Link here Permalink


Response to Make7 (Reply #5)

Sat Apr 14, 2012, 08:23 PM

6. Thanks again...

...I am going to play around with this over the next week (or less) because the sooner I build a prototype, the sooner I can sell it. The Flash gallery I've been using in my restaurant Websites has worked really well and has proven to be popular, but I've got to start making the sites iPad and iPhone friendly. Plus, if I do that, I can probably raise the price of the sites a bit for that very reason.

I will most likely send some form of commission as a thank-you to the developer whenever I use it on a site. Once I build it I will PM you with a link (if that's OK) so you can check it out and let me know what you think.

Reply to this post

Back to top Alert abuse Link here Permalink


Response to Amerigo Vespucci (Reply #6)

Tue Apr 17, 2012, 11:13 PM

7. YW, I'd like to see it when it's done - PM me. ( n/t )

Reply to this post

Back to top Alert abuse Link here Permalink

Reply to this thread