Allen, is there a tutorial for that kind of set up or am I going to need a guided tour?
First remove all that javascript from your CSS. Only the CSS part goes in there.
Add this to the description. It's a work in progress, you'll probably want a lot of tweaking. :D
<html>
<div id="pageTop">
<center>BKG Photography Pricing</center><br>
<p>text text text text text text</p>
</div>
<hr style="width:805px; color:#ccc; margin: 30px 0;">
<div class="myBox">
<div class="photoLeft">
<a href="http://www.myLinkedSite.com">
<img src="/photos/1233069129_tKq7y-S.jpg">
</a>
</div>
<div class="textRight">
<div class="boxTitle">Link 1</div><br>
<p>text text text text text text text text text
text text text text text text text text text</p>
</div>
</div>
<div class="spacer"></div>
<hr style="width:805px; color:#ccc; margin: 30px 0;">
<div class="myBox">
<div class="photoLeft">
<a href="http://www.myLinkedSite.com">
<img src="/photos/1233071305_NsQNF-S.jpg">
</a>
</div>
<div class="textRight">
<div class="boxTitle">Link 2</div><br>
<p>text text text text text text text text text
text text text text text text text text text</p>
</div>
</div>
<div class="spacer"></div>
<hr style="width:805px; color:#ccc; margin: 30px 0;">
<div class="myBox">
<div class="photoLeft">
<a href="http://www.myLinkedSite.com">
<img src="/photos/1233081119_cubjL-S.jpg">
</a>
</div>
<div class="textRight">
<div class="boxTitle">Link 3</div><br>
<p>text text text text text text text text text
text text text text text text text text text</p>
</div>
</div>
<div class="spacer"></div>
<hr style="width:805px; color:#ccc; margin: 30px 0;">
<div class="myBox">
<div class="photoLeft">
<a href="http://www.myLinkedSite.com">
<img src="/photos/1233083479_hiyt6-S.jpg">
</a>
</div>
<div class="textRight">
<div class="boxTitle">Link 4</div><br>
<p>text text text text text text text text text
text text text text text text text text text</p>
</div>
</div>
<div class="spacer"></div>
</html>
Add to CSS
.gallery_16391933 #journal {width: 900px;}
.gallery_16391933 #pageTop { /* text only */
margin: 0 auto;
width: 500px;
text-align: justify;
font-size: 110%; /* Sets the opening paragraph body text font size */
margin-bottom: 80px; /* gap underneath */
}
.gallery_16391933 #pageTop center { /* title only */
font-family: Comic Sans MS, verdana;
text-align: center;
color: #6090D1;
font-size: 200%; /* Sets the page title font size */
}
.gallery_16391933 .myBox { /* each photo and text */
height: 280px; /* fits photo height */
p adding-top: 20px; /* gap below horz line */
}
.gallery_16391933 .textLeft {
float: left;
padding-left: 10px;
width: 450px;
}
.gallery_16391933 .textRight {
float: right;
padding-right: 50px;
width: 400px;
}
.gallery_16391933 .photoLeft {
float: left;
height: 300px;
width: 200px;
}
.gallery_16391933 .photoRight {
float: right;
clear: left;
height: 150px;
width: 150px;
}
.gallery_16391933 #albumDescription p { /* boxTitle text */
font-family: Comic Sans MS, verdana;
font-size: 125%;
color: #6090D1;
}
.gallery_16391933 #albumDescription .boxTitle {
text-align: center;
font-family: Comic Sans MS, verdana;
font-size: 135%;
color: #6090D1;
}
/* increase height to keep footer gap when adding more photos */
.gallery_16391933 #albumDescription {
border: 8px ridge #543C1C;
padding: 40px;
background: #222;
}
.gallery_16391933 .notLoggedIn .journal_entry,
.gallery_16391933 .notLoggedIn #albumNav_top,
.gallery_16391933 .notLoggedIn #albumNav_bottom
{display: none;}
/* next two include stuff needed for IE6 image hovers to work */
.gallery_16391933 #albumDescription a:link img,
.gallery_16391933 #albumDescription a:visited img,
.gallery_16391933 #albumDescription img {
border: 4px ridge #ccc;
_border: 4px ridge #fff;
}
.gallery_16391933 #albumDescription a:focus img,
.gallery_16391933 #albumDescription a:hover img,
.gallery_16391933 #albumDescription a:active img,
.gallery_16391933 #albumDescription img:hover {
border: 4px ridge #444;
_border: 4px ridge #ccc;
}