Sat, 2007-09-22 14:44
Hello all,
I am trying to make a CSS rule for a Wordpress blog that will allow me to add captions to photos without using tables. Ideally, I would like to have one CSS rule that I could apply to both the photo and caption text.
My conditions are as follows:
*The picture is centered in the page.
*A box comes down under the picture, but does not make extend around the picture, that is no border around the photo.
*The box should expand vertically if the caption is especially long.
*The text in the caption box can be styled, such as left or full justified, italicized, and so on.
My CSS skills are pretty poor, but what I have so far is below. There are all sorts of problems, including the picture not being centered, and the box taking the full width of the page, rather than the width of the photo.
I wonder if what I am trying to do is even possible with CSS.
I thank you in advance for reading, and would greatly appreciate any help. Thanks so much.
caption text here
.photocaption {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 0.85em;
font-style: italic;
text-align: justify;
width: auto;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: none;
border-right-style: inset;
border-bottom-style: solid;
border-left-style: inset;
border-right-color: #999999;
border-bottom-color: #999999;
border-left-color: #999999;
border-top-width: 1px;
color: #666666;
height: auto;
position: static;
clear: both;
vertical-align: bottom;
}
Sat, 2007-09-22 17:45
#1
A quick question before we
A quick question before we go on; are the photos on your blog all going to be the same size (width wise) or will it differ?
Sat, 2007-09-22 22:01
#2
Yes, an important detail
Thank you for your quick reply.
Yes, all the photos are 430 pixels in width. I just tried adding this to the above CSS
width: 430px;
This is much closer to what I need, but still the picture is not centered.
Also, the border is visible around the picture, and I want it to be inside that 430 width, and so hidden under the picture.
Thanks again!
Sun, 2007-09-23 11:19
#3
Could you mock up a quick
Could you mock up a quick image to show us what you mean?
If we get all the details we can help you build it together properly.
Wed, 2007-09-26 15:10
#4
Mock-up
Thank you so much for your help. Here is a mock up of what I am trying to do. It is still not perfect, as I would like a little padding between the border and the text in the caption. I have gotten close with the code in the above post, but I can't get the picture centered as in the mock up. Thanks again.
| Attachment | Size |
|---|---|
| mockup.jpg | 35.46 KB |
Wed, 2007-09-26 16:35
#5
I'd do something like: <div
I'd do something like:
caption text here
/* photocaption div */
.pc {
padding: 0.2em;
text-align: center;
font: italic 0.85em Geneva, Arial, Helvetica, sans-serif;
text-align: justify;
width: auto;
border-top: none;
border-right: 1px inset #999;
border-bottom: 1px solid #999;
border-left: 1px inset #999;
color: #666;
}
.pc p {text-align: left;}
Wed, 2007-09-26 16:59
#6
Would something llike this
Would something llike this work for you?
/**/
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Vestibulum dignissim quam eu turpis. Sed laoreet.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Vestibulum dignissim quam eu turpis. Sed laoreet.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Vestibulum dignissim quam eu turpis. Sed laoreet.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Vestibulum dignissim quam eu turpis. Sed laoreet.
Something about the pic.
Something else about the pic.
//edit: that'll teach me to go for coffee.
cheers,
gary
Thu, 2007-09-27 00:23
#7
Thank you!
Thank you so much. Both suggestions work great. Just what I needed (and couldn't figure our on my own).
Thanks again! :thumbsup: