7 replies [Last post]
tokyostory
Offline
newbie
Last seen: 13 years 10 weeks ago
Joined: 2007-09-22
Posts: 4
Points: 0

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;
}

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 37 weeks 1 day ago
Joined: 2004-06-30
Posts: 9668
Points: 801

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?

Verschwindende wrote:
  • CSS doesn't make pies

tokyostory
Offline
newbie
Last seen: 13 years 10 weeks ago
Joined: 2007-09-22
Posts: 4
Points: 0

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!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 37 weeks 1 day ago
Joined: 2004-06-30
Posts: 9668
Points: 801

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.

Verschwindende wrote:
  • CSS doesn't make pies

tokyostory
Offline
newbie
Last seen: 13 years 10 weeks ago
Joined: 2007-09-22
Posts: 4
Points: 0

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.

AttachmentSize
mockup.jpg 35.46 KB
thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 37 weeks 1 day ago
Joined: 2004-06-30
Posts: 9668
Points: 801

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;}

Verschwindende wrote:
  • CSS doesn't make pies

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 hours 35 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9774
Points: 3856

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.



Me sitting on my mountaintop



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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

tokyostory
Offline
newbie
Last seen: 13 years 10 weeks ago
Joined: 2007-09-22
Posts: 4
Points: 0

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: