HTML Help

colleen_stg · Joined: 10 Jan 2008 Posts: 9

I borrowed some code to make thumbnail images enlarge on hover. It works great. So I used it to create a mini-gallery with 4 thumbnails enlarging on one page. The trouble is I want them to be "inline" or side-by-side, rather than stacked. I've tried changing everything I can think of and haven't had any success. Any help would be much appreciated!

Here's the code:

Code:
<style type="text/css">

#menu {position:relative; top:10px; left:0px; width:75px; background-color:#F6F4E4; z-index:100;}
#menu a.p1, #menu a.p1:visited {display:block; margin:20px width:75px; height:75px; text-decoration:none; background:#fff; top:0; left:0; border:0;}
#menu a img {border:0;}
#menu a.p1:hover {text-decoration:none; background-color:#8c97a3; color:#000;}
#menu a .large {display:block; position:absolute; width:0; height:0; border:0; top:0; left:0;}
#menu a.p1:hover .large {display:block; position:absolute; top:100px; left:100px; width:400px; height:335px; border:10px solid #D5D2BC;}

#info {z-index:100; height:22em;}

</style>

<body>
   <div id="menu">
   <a class="p1" href="#nogo" title="thumbnail image"><img src="images/tdress1.jpg" title="Thumbnail image" alt="Thumbnail image" /><img class="large" src="images/dress1.jpg" title="Enlarged view of image" alt="Enlarged view of image" /></a>
   <a class="p1" href="#nogo" title="thumbnail image"><img src="images/tdress2.jpg" title="Thumbnail image" alt="Thumbnail image" /><img class="large" src="images/dress2.jpg" title="Enlarged view of image" alt="Enlarged view of image" /></a>
   <a class="p1" href="#nogo" title="thumbnail image"><img src="images/tdress3.jpg" title="Thumbnail image" alt="Thumbnail image" /><img class="large" src="images/dress3.jpg" title="Enlarged view of image" alt="Enlarged view of image" /></a>
   <a class="p1" href="#nogo" title="thumbnail image"><img src="images/tdress4.jpg" title="Thumbnail image" alt="Thumbnail image" /><img class="large" src="images/dress4.jpg" title="Enlarged view of image" alt="Enlarged view of image" /></a>
   </div>
</body>
</html>

sticks464 · Joined: 31 Dec 2006 Posts: 1283

Think logically. How do I put 4 images that are 75px wide side by side in a container that is 75px wide? Doesn't work does it.

Here's how;

css
Code: #menu {position:relative; top:10px; left:0px; width:400px; background-color:#F6F4E4; z-index:100;}
#menu a.p1, #menu a.p1:visited {display:inline; margin-right:10px; width:75px; height:75px; text-decoration:none; background:#fff; top:0; left:0; border:0;}
#menu a.last { margin-right: 0}

html (last image)
Code: <a class="p1 last" href="#nogo" title="thumbnail image"><img src="images/tdress4.jpg" title="Thumbnail image" alt="Thumbnail image" /><img class="large" src="images/dress4.jpg" title="Enlarged view of image" alt="Enlarged view of image" /></a>

colleen_stg · Joined: 10 Jan 2008 Posts: 9

Ahhh, yes. I knew the answer would be shamefully obvious. Thanks for the help!