dantezeppelin Posted January 6, 2013 Share Posted January 6, 2013 I have my pics set to go large when hovering over small ones but always shows up at top of page so the lower I go on the page I can't see the enlargement because it is at top of page. Here is the CSS I'm using. img.small {border: none; text-decoration:none}div#sizes a img.large {height: 0; width: 0; border-width: 0}div#sizes a:hover img.large {position: absolute; top:68px; left: 170px; height: 389px; width: 500px; border:none}p {color: red} Link to comment Share on other sites More sharing options...
Ingolme Posted January 6, 2013 Share Posted January 6, 2013 Removing the position, top and left properties will stop it from sticking to t he top of the page. Link to comment Share on other sites More sharing options...
dantezeppelin Posted January 7, 2013 Author Share Posted January 7, 2013 (edited) ok that somewhat worked but now 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 fix img.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> Edited January 7, 2013 by dantezeppelin Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now