journal caption format problems

oxy8384 · June 3, 2007

I am trying to format the captions in a journal style gallery. Specifically, I want to add a little 'breathing room' between my images and the captions. I have tried both padding and margin values on '.photo [.left/.right]' to no avail. I have also created my own two classes, tmp_cap_container and tmp_journal_cap (cap short for caption), surrounded my caption text in

<html><div class="tmp_cap_container><div class="tmp_journal_cap">
</div></div></html>

tags and tried adjusting the margins and padding on these, as well, also to no effect. I also want to do some javascript to vertically center my caption text, but I won't even begin that until I can get some basic margins working.

Anyone? Anyone?..........Bueller......?

Thanks in advance,

Bill

rainforest1155 · June 3, 2007

You almost had it.

Change .photo .left/.right to .photo.left and .photo.right and it should work.

Anything else you wanted?

Sebastian

oxy8384 · June 3, 2007

Doh!
Sebastian,
Thanks! I haven't tried it, but I trust you... Can you clarify this for mer? Is it the extra space between '.photo' and '.left' that got me? If so, can you explain when one needs the extra space and when one doesn't? (Just to clarify: I didn't code the CSS as '.photo [.left/.right]'. I just used that syntax to show that I had tried both '.photo .right' and '.photo .left'.) There seem to be cases where the space is needed and others where it is not and I'm confused.
I thought '.classA.classB' (no space) was used when the target element (classB) was a child element of a classA element. I thought '.classA .classB' (w/space) was used for an element that was BOTH classA and classB. In my case, the photo is a single element, with two class labels.

Thanks, in advance, for the tutelage.

Bill

rainforest1155 wrote:

You almost had it.
Change .photo .left/.right to .photo.left and .photo.right and it should work.

Anything else you wanted?

Sebastian

rainforest1155 · June 3, 2007

oxy8384 wrote:

I thought '.classA.classB' (no space) was used when the target element (classB) was a child element of a classA element. I thought '.classA .classB' (w/space) was used for an element that was BOTH classA and classB. In my case, the photo is a single element, with two class labels.

Bill,

yes, it was simply the extra space that made it not working.
I have not much expertise on this topic yet. I actually found the mistake by fouling around a bit with the code, but I would say that .photo is the parent while .left and .right are the child classes. You can hide both photos by just hiding .photo what makes it a parent class in my view.

Sebastian

oxy8384 · June 3, 2007

Sho' 'nuf!
I have been playing with some more CSS, and it appears I had it completely reversed. For example, if I want to hide the 'share' link in a particular gallery, I need to use (WITH a space):

.gallery_xxxxxxx #shareLinkWrapper { display: none;}

but if I want to change the formatting on any element that is BOTH of class photo AND of class left, I need to use

.photo.left { margin-right: 10px;}

, for example.

Thanks a lot!

Bill

rainforest1155 wrote:

Bill,

yes, it was simply the extra space that made it not working.
I have not much expertise on this topic yet. I actually found the mistake by fouling around a bit with the code, but I would say that .photo is the parent while .left and .right are the child classes. You can hide both photos by just hiding .photo what makes it a parent class in my view.

Sebastian

journal caption format problems

Comments