3 HTML tags in caption

[papajay]

I'm using Journal style for Multi-Gallery vacation logs, etc. With some DGrin help I've been able to add to navigation links to the last caption on the last page of an individual gallery to assist the viewer jump to the NEXT gallery in the group, the PREVIOUS gallery in the group, or to an INDEX gallery showing thumbnails for all galleries in the group.

Currently, the links are each on a separate line in the caption. I'd like to format them so they are all on one line, and spaced across the caption as indicated below each link:

[Previous Gallery link] [Index Gallery link] [Next Gallery link]
(left align this one^) (center this one ^) (right align this one ^)


Right now my caption html looks like this:

<A id="mygallerylink" HREF="<A href="http://papajay.smugmug.com/Vacation/Alaska-Cruise-2009-Golden/Day-at-Sea/9489007_T5T2X">[PREVIOUS">http://papajay.smugmug.com/Vacation/Alaska-Cruise-2009-Golden/Day-at-Sea/9489007_T5T2X">[PREVIOUS GALLERY in this album]</A>
<center><A id="mygallerylink" HREF="<A href="http://papajay.smugmug.com/Vacation/Alaska-Cruise-2009-Golden">[Index">http://papajay.smugmug.com/Vacation/Alaska-Cruise-2009-Golden">[Index of ALL GALLERIES in this album]</center><A id="mygallerylink" HREF="<A href="http://papajay.smugmug.com/Vacation/Alaska-Cruise-2009-Golden/Skagway-and-White-Pass/9489132_9b8bw">[NEXT">http://papajay.smugmug.com/Vacation/Alaska-Cruise-2009-Golden/Skagway-and-White-Pass/9489132_9b8bw">[NEXT GALLERY in this album]</A>

Can someone tell me what I need to do with my html logic?

[photokandy]

Try something like this:


<span class="my_journalNav jn_left">your_left_link</span>
<span class="my_journalNav jn_center">your_middle_link</span>
<span class="my_journalNav jn_right">your_right_link</span>


And, in your CSS:


span.my_journalNav { width:32.5%; float:left; display: inline-block; }
.jn_left { text-align:left; }
.jn_center { text-align:center; }
.jn_right { text-align: right; }


It's late, so that may not work quite right, but I think it should - at least in modern browsers, anyway... Does that help any?

[Allen]

You could also try something like this.


<table class="myPageLinks" width=100%>
<tr>

<td width=30% align=left>
<a href="/gallery/9489007_T5T2X">
[PREVIOUS GALLERY in this album]
</a>
</td>

<td width=40% align=center>
<a href="http://papajay.smugmug.com/Vacation/Alaska-Cruise-2009-Golden">
[Index of ALL GALLERIES in this album]
</a>
</td>

<td width=30% align=right>
<a href="/gallery/9489132_9b8bw">
[NEXT GALLERY in this album]
</a>
</td>

</tr>
</table>



.myPageLinks a {
color: #ffff66;
font-weight: bold;
font-size: 80%;
text-decoration: none;
}

.myPageLinks a:hover {
color: #ccc;
}

[papajay]

Thank you both for your suggestions....
Papajay

[papajay]

Try something like this:


<span class="my_journalNav jn_left">your_left_link</span>
<span class="my_journalNav jn_center">your_middle_link</span>
<span class="my_journalNav jn_right">your_right_link</span>


And, in your CSS:


span.my_journalNav { width:32.5%; float:left; display: inline-block; }
.jn_left { text-align:left; }
.jn_center { text-align:center; }
.jn_right { text-align: right; }


It's late, so that may not work quite right, but I think it should - at least in modern browsers, anyway... Does that help any?

Kerri:
I tried your suggestion first since it appears to require less input than Allen's. It appears to work just fine on the few galleries I've tried it on.
Here's an example (see caption for last photo):

http://papajay.smugmug.com/Vacation/Alaska-Cruise-2009-Golden/Juneau/9489113_2W32U/3

Eventually I'd like to add these links to the same line where the "Gallery pages: < 1 2 3..." links are currently located (rather than as part of a caption), but someone already indicated that would take some JAVA coding.

Thanks for your help. Papajay