8 replies to this topic

[Lastzion]

I have started my first full css site and so far it is going pretty good.

Now, I want to insert 3 rows, 5 pictures in a row of thumbnails...

This is what I have come up with so far:

HTML

<dl class="gallery">
<dt><a ref="images/image1-big.jpg"><img src="images/image1.jpg" alt=""></a></dt>
<dt>Title here</dt>
<dd>Description here</dd>
</dl>
<dl class="gallery">
<dt><img src="<a ref="images/image3-big.jpg"><img src="images/image3.jpg" alt=""></a>" alt=""></dt>
<dt>Title here</dt>
<dd>Description here</dd>
</dl>
<dl class="gallery">
<dt><a ref="images/image2-big.jpg"><img src="images/image2.jpg" alt=""></a></dt>
<dt>Title here</dt>
<dd>Description here</dd>
</dl>


CSS

dl.gallery
{
border: 1px solid #000;
background-color: #ddd;
width: 102px;
text-align: center;
padding: 10px;
float: left;
margin-right: 1em;
}

.gallery dt { font-weight: bold; }

.gallery dt img
{
border: 1px solid #000;
width: 100px;
height: 100px;
}

.gallery dd
{
margin: 0;
padding: 0;
}




The problem is: when you mouseover the images - a shadow comes up, like a button effect, but it won't hyperlink to a larger image...

Any ideas??

[qwerty]

Are you copying the code directly from your source, or did you type it into your post? I ask because you've got this:
<dt><img src="<a ref="images/image3-big.jpg"><img src="images/image3.jpg" alt=""></a>" alt=""></dt>

and that ought to be
<dt><a href="images/image3-big.jpg"><img src="images/image3.jpg" alt=""></a></dt>

In fact, all of your links here are coded as a ref="" instead of a href=""

[Lastzion]

o MANNNNNNNNNN!!!!!!!!!!!!!!!!!!!!!!

lol

Thank you Thank you! Sometimes you just need fresh eyes;)

---------------------------

[qwerty]

If it works, let me know. There's a site I'm planning on taking out of tables soon, and I was wondering how I was going to deal with the thumbnail pages

[chrishirst]

I've already been playing for a friends photographic site

CSS Photo Gallery or Photo Gallery Two XHTML strict as well.

[maleman]

You folks just gave me the inspiration to finally get into xhtml.

[Lastzion]

Qwerty - it works perfect!

I'm so happy I switched to css and xml

[leadegroot]

Free eyeballs found at the W3C validator - http://validator.w3.org/ . The validator will pick up exactly that kind of blind spot error and its very easy to shove your code through it, saving you from going Doh! in public

[Lastzion]

Free eyeballs found at the W3C validator - http://validator.w3.org/ . The validator will pick up exactly that kind of blind spot error and its very easy to shove your code through it, saving you from going Doh! in public

Great Link! I use it daily:)