Jump to content

dantezeppelin

Members
  • Posts

    4
  • Joined

  • Last visited

Everything posted by dantezeppelin

  1. 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>
  2. If you are using internet exploder you have to allow blocked content I believe
  3. 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>
  4. 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}
×
×
  • Create New...