[css-d] centering a jquery slideshow
I have a slideshow using jquery: http://sph.umd.edu/home/test_css2.cfm I'd like to center the images within the black box. They are different widths. I tried setting their widths in the but that wasn't useful nor was setting the ul width/margin:auto. I have tried quite a few things and am not sure how to go about it - but it is validated! thanks for any help. -- Daniel Kessler University of Maryland College Park School of Public Health 3302E SPH Building College Park, MD 20742-2611 Phone: 301-405-2545 http://sph.umd.edu __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] centering a jquery slideshow
On 05/02/2009, at 3:08 AM, Daniel Kessler wrote:
> I have a slideshow using jquery:
> http://sph.umd.edu/home/test_css2.cfm
>
> I'd like to center the images within the black box.
Looking at the JQuery docs for InnerFade you aren't limited to using
ul li constructs. Perhaps replacing the list with an alternative tag
like a p would be more suitable?
Test case here:
http://www.albury.net.au/~kathyw/temp/TestCase.html
Replacing the ul li with a p and the following css:
#slide_images p {
width: 100%;
text-align: center;
color: rgb(255,255,255);
}
Only tested in Firefox so far ...
Cheers,
KathyW.
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] centering a jquery slideshow
Wow, that was pretty darn' succinct and incontrovertible Kathy! I know one day CSS will be that intuitive for me . . . maybe in the next lifetime. FWIW, your solution works perfectly in Opera and Safari on XP Pro SP3. On IE, surprise surprise, it breaks: horizontal centring still works, but the slideshow is still glued to the top of the black box. Haven't checked any browsers on a Mac yet. But then, those Micro$haft guys are gettin' real old now - you can't expect them to concentrate like they useta'! Cheers, Mark __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] centering a jquery slideshow
On 05/02/2009, at 11:39 AM, Mark Vickers wrote:
> FWIW, your solution works perfectly in Opera and Safari on XP Pro
> SP3. On
> IE, surprise surprise, it breaks: horizontal centring still works,
> but the
> slideshow is still glued to the top of the black box. Haven't
> checked any
> browsers on a Mac yet.
Ha ha Mark ... I was so blinkered by getting the centering working
I'd not noticed the top margin had crept in :)
Anyway, adding one more line of css (margin) should make at least ie7
behave and FF be consistent with it:
#slide_images p {
width: 100%;
margin: 10px auto; /* set to 0 auto for no top margin or whatever-
you-want to put one in ... */
text-align: center;
color: rgb(255,255,255);
}
I'm on Mac, so IE testing atm is thru VirualPC. There seem to be some
issues with ie6 displaying the images, and I am not sure if it's a
jquery/innerfade issue or a VPC slow-as-a-dog-trying-to-load-remote-
img-files issue ...
Cheers,
KathyW.
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] centering a jquery slideshow
On Feb 4, 2009, at 5:40 PM, Kathy Wheeler wrote:
> Replacing the ul li with a p and the following css:
>
> #slide_images p {
> width: 100%;
> text-align: center;
> color: rgb(255,255,255);
> }
>
In another test page, I had changed it out for p tags like you but
that hadn't helped it center. The major difference seemed to be
width:100%. For educational reasons, why did that work?
And thank you very much everyone for your assistance.
--
Daniel Kessler
University of Maryland College Park
School of Public Health
3302E SPH Building
College Park, MD 20742-2611
Phone: 301-405-2545
http://sph.umd.edu
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] centering a jquery slideshow
On 05/02/2009, at 11:49 PM, Daniel Kessler wrote:
> In another test page, I had changed it out for p tags like you but
> that hadn't helped it center. The major difference seemed to be
> width:100%. For educational reasons, why did that work?
Without the width specified the p tag block will will only be as wide
as it needs to be for it's content. There's not enough "content
width" in the image and caption to push it out to the width of your
containing div.
What can sometimes help to visualize what's going on is to set a
different temporary background color to the ("mis-behaving") tag.
Makes it easier to see where the problem(s) lie, and finding the real
problem is often the biggest obstacle in working out the fix.
Cheers,
KathyW.
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
