View Full Version : Placing caption above photos..
georges
Sep-03-2005, 11:17 AM
How do I move the captions from below, to above the photos?
I've watched a few of my elderly users view my galleries. They don't scroll unless the bottom of the photo is off of the screen.
So if most of the photo is on the screen they never see the caption.
If the caption could be above the photo it would shove the bottom of the photo off of their screen. They would see the caption and scroll down to see the whole photo.
Ideally, the caption would show up between the shopping cart box and the top of the photo.
Thanks, gs
{JT}
Sep-03-2005, 12:46 PM
http://blogs.smugmug.com/web-tricks/2005/09/02/hidden-captions-and-navigation/
How do I move the captions from below, to above the photos?
I've watched a few of my elderly users view my galleries. They don't scroll unless the bottom of the photo is off of the screen.
So if most of the photo is on the screen they never see the caption.
If the caption could be above the photo it would shove the bottom of the photo off of their screen. They would see the caption and scroll down to see the whole photo.
Ideally, the caption would show up between the shopping cart box and the top of the photo.
Thanks, gs
georges
Sep-03-2005, 05:41 PM
Thanks JT, but that example didn't work for me. After some additional reading and experimentation.
This is what was in your blog entry:
#singleImage .caption_top {
display: block;
}
#singleImage .caption_bottom {
display: none;
}
This is what worked:
#caption_top {
display: block;
}
#caption_bottom {
display: none;
}
I think the difference is that I want it to work over the entire site, but I'm not sure. Can you comment so I understand what's going on?
Thanks, gs
Allen
Sep-03-2005, 08:02 PM
Thanks GS, your's works for the whole site. Now the caption can be seen without scrolling,
which I found alot of people not doing??
Al
{JT}
Sep-04-2005, 12:26 PM
You are right, I updated the code so the example will work for everything.
Thanks JT, but that example didn't work for me. After some additional reading and experimentation.
This is what was in your blog entry:
#singleImage .caption_top {
display: block;
}
#singleImage .caption_bottom {
display: none;
}
This is what worked:
#caption_top {
display: block;
}
#caption_bottom {
display: none;
}
I think the difference is that I want it to work over the entire site, but I'm not sure. Can you comment so I understand what's going on?
Thanks, gs
Apostolos
Sep-06-2005, 01:44 AM
This is what worked:
#caption_top {
display: block;
}
#caption_bottom {
display: none;
}
I think the difference is that I want it to work over the entire site, but I'm not sure. Can you comment so I understand what's going on?
Thanks, gsWhere i should paste this?In Co-Brand settings i suppose but where?
Thanks:lust
Apostolos
Sep-06-2005, 02:39 AM
Thanks problem solved :D
Apostolos
Sep-06-2005, 03:26 AM
Thanks problem solved :DBUT...is there a way to place the caption in center of the image and also change the color(from black?)
Thanks:scratch
BUT...is there a way to place the caption in center of the image and also change the color(from black?)
Thanks:scratch i'm assuming you mean to center the caption over the image...
/* to just center the top caption */
#caption_top {
text-align: center; /* to center */
color: #somecolor; /* change color */
}
or
/* to center ALL captions on your entire site */
.caption {
text-align: center; /* to center */
color: #somecolor; /* change color */
}
Apostolos
Sep-06-2005, 09:06 AM
i'm assuming you mean to center the caption over the image...
/* to just center the top caption */
#caption_top {
text-align: center; /* to center */
color: #somecolor; /* change color */
}
or
/* to center ALL captions on your entire site */
.caption {
text-align: center; /* to center */
color: #somecolor; /* change color */
}
http://www.digitalgrin.com/images/smilies/clap.gifhttp://www.digitalgrin.com/images/smilies/yelrotflmao.gif
thanks a million http://www.digitalgrin.com/images/smilies/thumb.gif
vBulletin® v3.8.5, Copyright ©2000-2013, Jelsoft Enterprises Ltd.