FAQtoid

GregStarnesPhotography · Jul-20-2012, 06:34 PM #1

I am trying to format an old style journal page. Here are my issues

1. The text is right up against the photo. I would like to create some space between the image and the text

2. How to I add a second image and text section. If possible, I would like to add the text in the left and then image on the right.

3. Is it possible to display a different image when the mouse is hovered over the image?

Thanks in advance for your help. HEre is the link to the page in question
http://www.gregstarnesphotography.co...4255882_rBGBwV

Greg
http://www.gregstarnesphotography.com/

Allen · Jul-20-2012, 07:33 PM #2

Quote:

Originally Posted by GregStarnesPhotography

I am trying to format an old style journal page. Here are my issues

1. The text is right up against the photo. I would like to create some space between the image and the text

2. How to I add a second image and text section. If possible, I would like to add the text in the left and then image on the right.

3. Is it possible to display a different image when the mouse is hovered over the image?

Thanks in advance for your help. HEre is the link to the page in question
http://www.gregstarnesphotography.co...4255882_rBGBwV

Greg
http://www.gregstarnesphotography.com/

Replace your album description with this.

Code:

<html>
<div class="myPhoto1">
  <img src="/photos/i-3sKswhC/0/XL/i-3sKswhC-O.jpg" height="420" width="300" />
</div>     <!-- closes myPhoto div -->

<div class="myTitle">
  <p>Photo Enhancements</p>
</div>     <!-- closes myTitle div -->

<div class="myText">
<p>Technology today can do some amazing things, but technology still has a long way to go before it can equal what the human eye can do.  Photographically speaking, a digital camera cannot effectively capture an image when some areas of the image are very dark and other areas of the image are very bright.  For example, the water in the image on the left is very dark relative to Cathedral Rock in the background that is very bright.  While the human eye can see this just fine, a digital camera cannot.  To account for this I have merged two separate images together to re-create what I saw when I when I took the picture.  The end result is what you see in the image to the left.</p>
</div>     <!-- closes myText div -->

<div class="spacer"></div>

<div class="myPhoto2">
<img src="/photos/1942170302_7XnQkqP-M.jpg"
 onmouseover="this.src='/photos/1942173019_5JJXF79-M.jpg'"
 onmouseout="this.src='/photos/1942170302_7XnQkqP-M.jpg'" />
</div>     <!-- closes myPhoto div -->

<div class="myTitle">
  <p></p>
  <p>Photo Enhancements</p>
</div>     <!-- closes myTitle div -->

<div class="myText">
<p>Technology today can do some amazing things, but technology still has a long way to go before it can equal what the human eye can do.  Photographically speaking, a digital camera cannot effectively capture an image when some areas of the image are very dark and other areas of the image are very bright.  For example, the water in the image on the left is very dark relative to Cathedral Rock in the background that is very bright.  While the human eye can see this just fine, a digital camera cannot.  To account for this I have merged two separate images together to re-create what I saw when I when I took the picture.  The end result is what you see in the image to the left.</p>
</div>     <!-- closes myText div -->

<div class="spacer"></div>
</html>

Add/change the red in your CSS.

Code:

.gallery_24255882 .myPhoto1 {
    float: left;     /* allows the text to flow to the right */
    padding: 0 20px 10px 0;  /* top right bottom left        */
}                            /* spacing of text around photo */

.gallery_24255882 .myPhoto2 {
    float: right;     /* allows the text to flow to the right */
    padding: 0 0 10px 20px;  /* top right bottom left        */
}                            /* spacing of text around photo */

GregStarnesPhotography · Jul-21-2012, 03:26 PM #3

Awesome. Got it to work! Thank you very much.


Similar Threads	Thread Starter	Forum	Replies	Last Post

Help with Old Journal style	Bird Lady	SmugMug Customization	4	Nov-17-2010 04:16 PM
Journal Style	slattfri	SmugMug Support	8	Apr-17-2010 07:28 PM
Journal style number of photos per page?	logandiana	SmugMug Customization	1	Oct-07-2009 05:12 AM
How do I get rid of "gallery pages" on journal style page?	aislinnrehwinkel	SmugMug Customization	2	Jun-27-2008 08:20 AM
how do i fix my edit button on the caption of a journal style page?	Artesub	SmugMug Customization	19	Apr-17-2006 07:37 AM

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

FAQtoid

Dgrin Challenges

Need some help with Accessories?

Tutorials

The Hot Seat

Africa!

SmugMug How To:

SmugMug News:

SmugMug Status

Jul-20-2012, 06:34 PM #1
GregStarnesPhotography ^OP Big grins Join Date: Jul 2012 Location: Danville, California Posts: 23	Formatting an old style journal page I am trying to format an old style journal page. Here are my issues 1. The text is right up against the photo. I would like to create some space between the image and the text 2. How to I add a second image and text section. If possible, I would like to add the text in the left and then image on the right. 3. Is it possible to display a different image when the mouse is hovered over the image? Thanks in advance for your help. HEre is the link to the page in question http://www.gregstarnesphotography.co...4255882_rBGBwV Greg http://www.gregstarnesphotography.com/

Jul-21-2012, 03:26 PM #3
GregStarnesPhotography ^OP Big grins Join Date: Jul 2012 Location: Danville, California Posts: 23	Awesome. Got it to work! Thank you very much.


Tell The World!

Tweet