Google
HTML Tutorial


 Forum HomeForum Home   FAQFAQ   SearchSearch   MemberlistMemberlist   RegisterRegister 
 ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 
RegisterRegister - Not registered yet? Got something to say? Join HTML Code Tutorial!
Simple Solution: Inline Images
Post new topic   Reply to topic    HTML Help Forum Index -> Images & Graphics
View previous topic :: View next topic  
Author Message
colleen_stg



Joined: 10 Jan 2008
Posts: 9
PostPosted: Tue Sep 30, 2008 5:02 pm     Simple Solution: Inline Images Reply with quote
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: 1169
PostPosted: Tue Sep 30, 2008 5:32 pm     Reply with quote
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
PostPosted: Tue Sep 30, 2008 6:11 pm     Reply with quote
Ahhh, yes. I knew the answer would be shamefully obvious. Thanks for the help!
Display posts from previous:   
Post new topic   Reply to topic    HTML Help Forum Index -> Images & Graphics All times are GMT - 8 Hours
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
HTML Help Archive
Powered by phpBB © 2001, 2005 phpBB Group
HTML Help topic RSS feed 
 
HOSTING / DESIGN
$1.99 Domain Registration
Cheap Web Hosting
Website Templates
MAKE MONEY
Sell Domain Names
Sell Website Templates

Home   |   Tutorials   |   Forum   |   Quick List   |   Link Directory   |   About
Copyright ©1997-2002 Idocs and ©2002-2007 HTML Code Tutorial