At 5/21/2007 05:23 AM, jana coyle wrote:
>What I am looking for is to have image#1 and image#2 horizontally
>next to each other
>on the same line. I want the mouse over large image 1 to overlap
>both image 1 and
>image 2 without displacing them.
Kevin,
The reason your images aren't side-by-side is that you've contained
the first one in a DIV: (your markup reformatted here for ease of reading):
<p>
<div id="magnify">
<a class="p1" href="#nogo">
<img src="images/image1.gif"
title="Thumbnail image" alt="Thumbnail image" />
<img class="large" src="images/image1large.gif"/>
</a>
</div>
<img border="2" src="images/image2.gif" width="290" height="290" >
</p>
A DIV is by default a block-level element and therefore will act like
a pararaph in starting a new row. See:
CSS 2.1 Specification
9 Visual formatting model
http://www.w3.org/TR/CSS21/visuren.html
I made a quick tweak to your markup and styling:
http://juniperwebcraft.com/test/jana-coyle-help2.html
_________________________
<a class="p1" href="#nogo"><img src="images/image1.gif"
title="Thumbnail image" alt="Thumbnail image" /><img
class="large" src="images/image1large.gif"/></a>
<img border="2" src="images/image2.gif" width="290" height="290" >
_________________________
- I've removed the DIV from around the first image. (I could also
have changed that div to {display: inline;} but removing it seemed simpler.)
- I also removed the P that enclosed the two images which also seemed
to be extraneous.
- I removed the "magnify" span from around the hyperlinked images,
since the anchor element by itself serves as sufficient wrapper.
Here's the CSS I added:
_________________________
/* ensure enough room for the large image */
div#center
{
height: 500px;
}
/* define the bounds of the large absolutely-positioned image */
a.p1
{
position: relative;
}
/* remove the large image from display */
a.p1 img.large
{
display: none;
}
/* display the large image on hover */
a.p1:hover img.large
{
display: inline;
position: absolute;
left: 0;
}
_________________________
Tested in Firefox 2 & IE 7 (Windows).
Regards,
Paul
__________________________
Paul Novitski
Juniper Webcraft Ltd.
http://juniperwebcraft.com
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
