Jump to content

pics flutter and the small ones move down the page when I hover


dantezeppelin
 Share

Recommended Posts

my pics flutter and the small ones move down the page when I hover. Here again is my CSS and also the page I'm trying to fiximg.small {border: none; text-decoration:none}div#sizes a img.large {height: 0; width: 0; border-width: 0}div#sizes a:hover img.large { height: 389px; width: 500px; border:none}p {color: red}.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Wyo/ND</title><script type="text/javascript">function scrollColor() {styleObject=document.getElementsByTagName('html') [0].stylestyleObject.scrollbarFaceColor="#ffb573"styleObject.scrollbarTrackColor="#ff8429"}</script><link rel="stylesheet" type="text/css" href="PicPop.css"></head><body style= "background-color:orange" onload=scrollColor()><a href="MacDonald.html"><img src="http://images.cooltext.com/2874847.png" width="1000" height="223" alt="Wyo/ND" /></a><div id="frame"><p>Hover over each photo to enlarge it into this frame.</p></div><div id="sizes"><p><a><img class="small" src="mac10.jpg" width="150" height="110" alt="Jeanette" /><img class="large" src="mac10.jpg" width="150" height="110" alt="Jeanette" /></a></p><p><a><img class="small" src="mac11.jpg" width="150" height="110" alt="robnCathy" /><img class="large" src="mac11.jpg" width="150" height="110" alt="robnCathy" /></a></p><p><a><img class="small" src="mac12.jpg" width="150" height="110" alt="seattle 3" /><img class="large" src="mac12.jpg" width="150" height="110" alt="seattle 3" /></a></p><p><a><img class="small" src="mac13.jpg" width="150" height="110" alt="seattle 3" /><img class="large" src="mac13.jpg" width="150" height="110" alt="seattle 3" /></a></p><p><a><img class="small" src="mac14.jpg" width="150" height="110" alt="seattle 3" /><img class="large" src="mac14.jpg" width="150" height="110" alt="seattle 3" /></a></p><p><a><img class="small" src="mac15.jpg" width="150" height="110" alt="seattle 3" /><img class="large" src="mac15.jpg" width="150" height="110" alt="seattle 3" /></a></p><p><a><img class="small" src="mac16.jpg" width="150" height="110" alt="seattle 3" /><img class="large" src="mac16.jpg" width="150" height="110" alt="seattle 3" /></a></p><p><a><img class="small" src="mac17.jpg" width="150" height="110" alt="seattle 3" /><img class="large" src="mac17.jpg" width="150" height="110" alt="seattle 3" /></a></p></div><br style="clear: all" /><p>Return to <a href="MacDonald.html">MacDonald Family Events</a>.</p></body></html>

Link to comment
Share on other sites

Try this: CSS

div#sizes img {position: relative;}div#sizes img:hover {width: 500px;height: 389px;vertical-align: top;}

HTML:

<div id="sizes"><img src="mac10.jpg" width="150" height="110" alt="Jeanette" /><br /><img src="mac11.jpg" width="150" height="110" alt="robnCathy" /><br /><img src="mac12.jpg" width="150" height="110" alt="seattle 3" /><br /><img src="mac13.jpg" width="150" height="110" alt="seattle 3" /><br /><img src="mac14.jpg" width="150" height="110" alt="seattle 3" /><br /><img src="mac15.jpg" width="150" height="110" alt="seattle 3" /><br /><img src="mac16.jpg" width="150" height="110" alt="seattle 3" /><br /><img src="mac17.jpg" width="150" height="110" alt="seattle 3" /></div>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...