dd script trouble
In the following HTML and CSS....what would cause the replacement of "media/tree.jpg" to keep adding dead space beyond page size of 1024 by 768. Everytime i replace the image with my own, it adds dead scroll space underneath my layout. Im sure its something simple and stupid on my part. dont bash me too bad thanks
Code:<!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=iso-8859-1" /> <title>Untitled Document</title> <link href="zoka2.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="gallerycontainer"> <a class="thumbnail" href="#thumb"><img src="media/tree_thumb.jpg" width="85px" height="60px" border="0" /><span><img src="media/tree.jpg" /><br />Simply beautiful.</span></a> <a class="thumbnail" href="#thumb"><img src="media/ocean_thumb.jpg" width="85px" height="60px" border="0" /><span><img src="media/ocean.jpg" /><br />So real, it's unreal. Or is it?</span></a> <a class="thumbnail" href="#thumb"><img src="media/sushi2_thumb.jpg" width="85px" height="60px" border="0" /><span><img src="media/sushi2.jpg" /><br />Sushi for dinner anyone?</span></a> <a class="thumbnail" href="#thumb"><img src="media/horses_thumb.jpg" width="85px" height="60px" border="0" /><span><img src="media/horses.jpg" /><br />Run wild with horses.</span></a> <a class="thumbnail" href="#thumb"><img src="media/tree_thumb.jpg" width="85px" height="60px" border="0" /><span><img src="media/tree.jpg" /><br />Simply beautiful.</span></a> <a class="thumbnail" href="#thumb"><img src="media/ocean_thumb.jpg" width="85px" height="60px" border="0" /><span><img src="media/ocean.jpg" /><br />So real, it's unreal. Or is it?</span></a> <a class="thumbnail" href="#thumb"><img src="media/sushi2_thumb.jpg" width="85px" height="60px" border="0" /><span><img src="media/sushi2.jpg" /><br />Sushi for dinner anyone?</span></a> <a class="thumbnail" href="#thumb"><img src="media/horses_thumb.jpg" width="85px" height="60px" border="0" /><span><img src="media/horses.jpg" /><br />Run wild with horses.</span></a> <a class="thumbnail" href="#thumb"><img src="media/ocean_thumb.jpg" width="85px" height="60px" border="0" /><span><img src="media/ocean.jpg" /><br />So real, it's unreal. Or is it?</span></a> <a class="thumbnail" href="#thumb"><img src="media/sushi2_thumb.jpg" width="85px" height="60px" border="0" /><span><img src="media/sushi2.jpg" /><br />Sushi for dinner anyone?</span></a> <a class="thumbnail" href="#thumb"><img src="media/horses_thumb.jpg" width="85px" height="60px" border="0" /><span><img src="media/horses.jpg" /><br />Run wild with horses.</span></a> </div> </body> </html> /* CSS Document */ .gallerycontainer{ position: relative; height: 464%; width: 100%; padding-top: 600px; padding-right: 0px; padding-left: 2px; /*Add a height attribute and set to largest image's height to prevent overlaying*/ } .thumbnail img{ border: 1px solid white; margin-top: 0; margin-right: 1px; margin-bottom: 5px; margin-left: 0; } .thumbnail:hover{ background-color: transparent; } .thumbnail:hover img{ border: 1px solid blue; } .thumbnail span{ /*CSS for enlarged image*/ position: absolute; background-color: lightyellow; padding: 5px; left: -1000px; border: 1px dashed gray; visibility: hidden; color: black; text-decoration: none; } .thumbnail span img{ /*CSS for enlarged image*/ border-width: 0; padding: 2px; } .thumbnail:hover span{ /*CSS for enlarged image*/ visibility: visible; top: 0; left: 230px; /*position where enlarged image should offset horizontally */ z-index: 50; }
CSS Codes
Reply With Quote
Bookmarks