Website, DB, & Software Developers

Amerigo Vespucci

(30,885 posts) Fri Apr 13, 2012, 10:19 PM Apr 2012

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

= new reply since forum marked as read

Highlight:

jQuery experts...how would you center this on a page? (Original Post) Amerigo Vespucci Apr 2012 OP

I'm not sure I understand what exactly you want centered. Make7 Apr 2012 #1

Thank you...that definitely worked for the gallery (the blue shaded area & its contents)... Amerigo Vespucci Apr 2012 #2

Can't you just do the same thing with style for the <body> tag? Make7 Apr 2012 #3

You're probably right...I will have to try that. Amerigo Vespucci Apr 2012 #4

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

Thanks again... Amerigo Vespucci Apr 2012 #6

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

Make7

(8,546 posts)

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

Reply to Amerigo Vespucci (Original post)

Fri Apr 13, 2012, 10:48 PM

Apr 2012

Is it the area with the [font style="background-color:#e1eef5;"]colored background[/font] 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:

[div class="excerpt" style="border: 1px solid #bfbfbf; border-radius:0.4615em;"].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.

Amerigo Vespucci

(30,885 posts)

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

Reply to Make7 (Reply #1)

Fri Apr 13, 2012, 11:46 PM

Apr 2012

...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.

Make7

(8,546 posts)

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

Reply to Amerigo Vespucci (Reply #2)

Sat Apr 14, 2012, 04:09 PM

Apr 2012

Example of external style sheet entry:

[div class="excerpt" style="border: 1px solid #bfbfbf; border-radius:0.4615em;"]body {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
}
Or you could create a div-element container to make things more obvious:

[div class="excerpt" style="border: 1px solid #bfbfbf; border-radius:0.4615em;"]Example external style sheet entry:

[div class="excerpt" style="background-color:#ffffff; border:none;"]div.page-container {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
}
Basic html code:

[div class="excerpt" style="background-color:#ffffff; border:none;"]<html>
    <head>
        blah .. blah .. blah
    </head>

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

            your code here

        </div>
    </body>
</html>[br /]

Amerigo Vespucci

(30,885 posts)

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

Reply to Make7 (Reply #3)

Sat Apr 14, 2012, 04:39 PM

Apr 2012

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

Make7

(8,546 posts)

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

Reply to Amerigo Vespucci (Reply #4)

Sat Apr 14, 2012, 07:06 PM

Apr 2012

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:

[div class="excerpt" style="border: 1px solid #bfbfbf; border-radius:0.4615em;"].ad-gallery {
    width:800px;
}
Or if it seems to be better a little narrower than the page container:

[div class="excerpt" style="border: 1px solid #bfbfbf; border-radius:0.4615em;"].ad-gallery {
    width:750px;
    margin-left:auto !important;
    margin-right:auto !important;
}
And you can always adjust the height as needed as well:

[div class="excerpt" style="border: 1px solid #bfbfbf; border-radius:0.4615em;"].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.

Amerigo Vespucci

(30,885 posts)

6. Thanks again...

Reply to Make7 (Reply #5)

Sat Apr 14, 2012, 07:23 PM

Apr 2012

...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.

Make7

(8,546 posts)

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

Reply to Amerigo Vespucci (Reply #6)

Tue Apr 17, 2012, 10:13 PM

Apr 2012

Reply to this discussion