Hi,
I created an HTML-only gallery to contain several keyword-generated galleries that follow the progress of my son at different ages (check "Francesco" under Special Galleries on my homepage at http://giorci.smugmug.com ).
Now I would like to match the look-and-feel of this page to that of all the other pages of my site: a gradient box, the same style for text and links, two columns of thumbnails, etc.
Can you help me get the right CSS code in place so that the HTML I have to enter in the description box is not too huge and ugly?
Thanks!
Stefano
This isn't perfected yet but replace the gallery description with this.
<html>
<div id="FrancescoHtml" class="box">
<div class="boxTop">
<h3 class="title notopmargin">Francesco galleries, as he grows up</h3>
</div>
<div class="boxBottom">
<div class="miniBox albumLarge">
<div class="photoLarge">
<a href="/keyword/francesco-0to3m">
<img src="/photos/385597150_LcqXq-Th.jpg" class="imgBorder" border="0" height="150" width="150">
</a>
</div>
<p class="albumTitle">
<a href="/keyword/francesco-0to3m" class="nav">0-3 Months</a>
</p>
<div class="spacer"></div>
</div>
<div class="miniBox albumLarge">
<div class="photoLarge">
<a href="/keyword/francesco-3to6m">
<img src="/photos/386078864_cgjKX-Th.jpg" class="imgBorder" border="0" height="150" width="150">
</a>
</div>
<p class="albumTitle">
<a href="/keyword/francesco-3to6m" class="nav">3-6 Months</a>
</p>
<div class="spacer"></div>
</div>
<div class="miniBox albumLarge">
<div class="photoLarge">
<a href="/keyword/francesco-6to9m">
<img src="/photos/xxxxxxxx_xxxxx-Th.jpg" class="imgBorder" border="0" height="150" width="150">
</a>
</div>
<p class="albumTitle">
<a href="/keyword/francesco-6to9m" class="nav">6-9 Months</a>
</p>
<div class="spacer"></div>
</div>
<div class="miniBox albumLarge">
<div class="photoLarge">
<a href="/keyword/francesco-9to12m">
<img src="/photos/xxxxxxxx_xxxxx-Th.jpg" class="imgBorder" border="0" height="150" width="150">
</a>
</div>
<p class="albumTitle">
<a href="/keyword/francesco-9to12m" class="nav">9-12 Months</a>
</p>
<div class="spacer"></div>
</div>
<div class="miniBox albumLarge">
<div class="photoLarge">
<a href="/keyword/francesco-12to18m">
<img src="/photos/xxxxxxxx_xxxxx-Th.jpg" class="imgBorder" border="0" height="150" width="150">
</a>
</div>
<p class="albumTitle">
<a href="/keyword/francesco-12to18m" class="nav">12-18 Months</a>
</p>
<div class="spacer"></div>
</div>
<div class="miniBox albumLarge">
<div class="photoLarge">
<a href="/keyword/francesco-18to24m">
<img src="/photos/xxxxxxxx_xxxxx-Th.jpg" class="imgBorder" border="0" height="150" width="150">
</a>
</div>
<p class="albumTitle">
<a href="/keyword/francesco-18to24m" class="nav">18-24 Months</a>
</p>
<div class="spacer"></div>
</div>
<div class="miniBox albumLarge">
<div class="photoLarge">
<a href="/keyword/francesco-2yrs">
<img src="/photos/xxxxxxxx_xxxxx-Th.jpg" class="imgBorder" border="0" height="150" width="150">
</a>
</div>
<p class="albumTitle">
<a href="/keyword/francesco-2yrs" class="nav">2 Years</a>
</p>
<div class="spacer"></div>
</div>
<div class="miniBox albumLarge">
<div class="photoLarge">
<a href="/keyword/francesco-3yrs">
<img src="/photos/xxxxxxxx_xxxxx-Th.jpg" class="imgBorder" border="0" height="150" width="150">
</a>
</div>
<p class="albumTitle">
<a href="/keyword/francesco-3yrs" class="nav">3 Years</a>
</p>
<div class="spacer"></div>
</div>
<div class="miniBox albumLarge">
<div class="photoLarge">
<a href="/keyword/francesco-4yrs">
<img src="/photos/xxxxxxxx_xxxxx-Th.jpg" class="imgBorder" border="0" height="150" width="150">
</a>
</div>
<p class="albumTitle">
<a href="/keyword/francesco-4yrs" class="nav">4 Years</a>
</p>
<div class="spacer"></div>
</div>
</div> <!-- closes boxBottom -->
</div> <!-- closes FrancescoHtml -->
</html>
Add this to your CSS
.gallery_5943943 .boxBottom .albumLarge {width:192px; height:220px; text-align:center; margin:0 24px;}
.gallery_5943943 .albumLarge .photoLarge {float:none; width:192px; height:auto; _height:1px;}
.gallery_5943943 .albumLarge .albumTitle {width:192px;}