PDA

View Full Version : CSS Positioning Trouble - Getting captions to stay centered & beneath slideshow



aar
Mar 27th, 2007, 10:13 PM
Hello,

I am having trouble positioning cpations on a slideshow site I have been working on. I am using a great javascript code by couloir.org (http://www.couloir.org/js_slideshow/) and have based my CSS on theirs.

Here is my temp site:
http://somewhatunusual.com/lydia/gallery_coulier.html

Here are the problems I am having:

1. I cannot get the caption to center horizontally beneath the image unless the image is the full width of the layer. I have tried many different positioning techniques to no avail.

2. I want my caption to float underneath the image when the image is shorter than the full height of the layer. Right now my caption is positioned with absolute positioning which I know will not work for this, but it was the only way I could get my caption to go beneath the image.

I am so appreciative to you for taking the time to read this and any help/advice you may be able to offer.

Many thanks,
a

koyama
Mar 28th, 2007, 02:37 AM
This kind of stuff is hard to debug because of all the JavaScript.

After looking at the generated DOM, it appears that your #CaptionContainer is assigned inline style (overriding your width in your style sheet).


<div class="" style="width: 333px;" id="CaptionContainer">
<p><span id="Counter">2/10</span> <span id="Caption">The tree across from Johnny's recording studio, Diss, England, November 2006</span></p>

</div>

Since you can probably not do much about this width, you may need to give up absolute positioning for your #CaptionContainer.

Try to remove the red parts and insert the blue in your style sheet and tell us what happens.


#CaptionContainer {
/* position: absolute; */
position: relative;
top: 490px;
/* left: 0px; */
/* width: 800px; */
margin: 0 auto;
text-align: center;
background-color: #ffffff;
}

aar
Mar 28th, 2007, 03:11 AM
I removed that text and the caption is now floating at the top of my page.

I reposted the site and style sheet:
http://somewhatunusual.com/lydia/gallery_coulier.html
http://somewhatunusual.com/lydia/lb_coulier.css

Since I originally posted, I also removed the p tag from the caption because I felt I didn't need it and thought it might be part of the problem.

Forgive me if this seems obvious, but I am pretty new to JavaScript (as in trying to learn, but haven't really caught on yet)--where is the #CaptionContainer assigned the style:width? Could I possibly change that to 800px and it would fix my problem?

I would rather not absolutely position the #CaptionContainer because I want it to always appear right below the image which has varying height dimensions. I have not been able to get that functioning correctly.

Thanks so much for your response....

koyama
Mar 28th, 2007, 03:26 AM
I removed that text and the caption is now floating at the top of my page.
I see that you have now this:


#CaptionContainer {
position: relative;
margin: 0 auto;
width: 800px;
text-align: center;
}
I wanted you to put in this:


#CaptionContainer {
position: relative;
top: 490px;
margin: 0 auto;
text-align: center;
background-color: #ffffff;
}

Forgive me if this seems obvious, but I am pretty new to JavaScript (as in trying to learn, but haven't really caught on yet)--where is the #CaptionContainer assigned the style:width?
I did not check the script, but it must be assigning a width somewhere. Go download the Web Developer Extension (http://chrispederick.com/work/webdeveloper/) for Firefox. Then view the generated source and see for yourself where I got that inline style from.

Could I possibly change that to 800px and it would fix my problem?
No, because inline styles will override style sheet declarations in your style sheet during the CSS cascade.

aar
Mar 28th, 2007, 03:48 AM
Aha! That is it! Sorry, I accidentally deleted that line.

Is it possible, however, to have #CaptionContainer appear directly below the image? This works when my images are the max height for my site, but when they are not, the caption stays at the bottom of the page.

See here:
http://somewhatunusual.com/lydia/gallery_coulier.html#4

About half of my images are not the max height and I would love for the caption to appear directly beneath them rather than at the bottom of the page with white space separating the two. On the original slideshow (http://www.couloir.org/js_slideshow/) the captions stick with the image and I am not sure what to do to achieve this.

jlhaslip
Mar 28th, 2007, 04:11 AM
#CaptionContainer {
text-align: center;
margin: 15em auto 0;
width: 800px;
text-align: center;
background-color: #ffffff;
}

#site p {
text-align: center;
padding: 500px 10px 10px 10px;
font: normal normal normal 10px helvetica, verdana, arial, sans-serif;
color: #999999;
letter-spacing: 1px;
}


All the absolute positioning is causing the grief on the page. Perhaps you might look here (http://jlhaslip.trap17.com/samples/gallery/gallery/index.html) to see one method of avoiding all the position: absolute.
Ignore the thumbnails below the main image, insert the comments there using the span/p as per your existing page.

koyama
Mar 28th, 2007, 04:16 AM
On the original slideshow (http://www.couloir.org/js_slideshow/) the captions stick with the image and I am not sure what to do to achieve this.
Notice that they are not using absolute positioning. You'll have to drop some of that too.

Try these changes:


#OuterContainer {
/* position: absolute; */
position: relative;
top: 60px;
left: 0px;
padding: 0;
margin: 0;
width: 800px;
text-align: center;
}
#CaptionContainer {
position: relative;
/* top: 490px; */
top: 60px;
margin: 0 auto;
text-align: center;
background-color: #ffffff;
}

It would be even better to also drop absolute positioning for #title and #menu. You could then eliminate those top: 60px; statements.

Context: jlhaslip posted while I wrote this.

aar
Mar 28th, 2007, 05:35 PM
Thank you so much! I don't have much experience with relative positioning and always feel a little uncertain about it. I am more confident using absolute positioning so I can be sure things will be where I need them to.

I really appreciate your expertise in this area. And thank you so much for taking the time to look at my site and help me out.