PDA

View Full Version : Lining up text with pictures in Journal view


markjtrickey
Apr-07-2009, 04:39 PM
Hi all,

First time posting here, but have been lurking awhile. I'm working on creating my page of services I offer (currently just prints) and have decided on using the Journal format as the easiest way to displaying little blurbs of information. What I would like to do is control how the text lines up next to each picture. If you look here http://www.picturepaws.com/Services under "Prints" you see that the text appears to be centered with each photo. I would like to have the text start at the top of each photo and have a little more white space between the photo and the block of text.

Also, any constructive comments on any other aspects are welcome as well. Heck, I'll even consider non-constructive ones too :wink

Thanks,
Mark

jfriend
Apr-07-2009, 06:14 PM
You can use this CSS and then take the <br /> out of the start of each caption to get the text up to the top of the photo. You can tweak the numbers to your liking:

/* let journal captions go up to the top of the image */
.journal_entry .caption {padding-top:0 !important;}

/* increase space between journal photos and the caption text */
.journal_entry .photo.left {margin-right: 30px !important;}
.journal_entry .photo.right {margin-left: 30px !important;}

agallia
Apr-08-2009, 06:17 AM
You can use this CSS and then take the <br /> out of the start of each caption to get the text up to the top of the photo. You can tweak the numbers to your liking:

/* let journal captions go up to the top of the image */
.journal_entry .caption {padding-top:0 !important;}

/* increase space between journal photos and the caption text */
.journal_entry .photo.left {margin-right: 30px !important;}
.journal_entry .photo.right {margin-left: 30px !important;} Thanks, John. Been wanting to make that change too. Looks good at 20px to me. You are always very helpful.

markjtrickey
Apr-08-2009, 03:44 PM
Thanks John,

That did the trick.