Hi. I've just recently switched to using CSS (rather than tables) to
display collections of thumbnails. That way, depending on the user's
screen resolution and browser window size, the number of "columns" on
the window is variable. Some examples of pages I've created this way
are:
http://www.engr.uconn.edu/~spm01f01/suspension/
http://www.engr.uconn.edu/~spm01f01/tutorial/
A shortened version of the HTML might look like what I pasted at the
bottom of this page (note that I kept the CSS stuff embedded in the one
HTML file since it's so short).
My problem is that when I try to print out pages I've made this way,
they don't come out well at all. In IE6, I get a blank page, one page
with the images, and then a third page which is mostly blank. On the
page with the images, some of them are extending off the screen. In
Opera (7 and 8.5), the pages print out basically as I see them on the
screen, but images get chopped between pages.
I'm probably grossly overlooking some aspect of how to write CSS, as
I'm still a newb as far as CSS goes. I basically just picked apart some
code I found on the web until I got my pages to look how I wanted. I
intend to learn CSS thoroughly when I get some time, but for now I just
want to patch up this one bit of code. Hopefully someone can point out
my mistake. BTW, I've heard of the ability to write seperate code for
"print media", but I'd rather not have to do that if I don't need to.
Thanks!
sean
<html>
<head>
<title>Tutorial folder</title>
<STYLE TYPE ="text/css">
<!--
div.float {
float: left;
width: 365px;
height: 275 px;
padding: 0px;
}
div.float p {
text-align: center;
}
div.container {
background-color: #fff;
}
div.spacer {
clear: both;
}
-->
</STYLE>
</head>
<body bgcolor="#FFFFFF" text="#000000" link="#0000FF" vlink="#800080">
<basefont face="Arial, Helvetica, Sans Serif">
<h1>Tutorial folder</h1>
<div class="container">
<div class="spacer"> </div>
<div class="float"><img src="thumbs/tn_001.jpg" border="0" alt="001.jpg
(2048x1536; 1492057 bytes)"></a></div>
<div class="float"><img src="thumbs/tn_002.jpg" border="0" alt="002.jpg
(1536x2048; 262812 bytes)"></a></div>
<div class="spacer"> </div>
</div>
</body>
</html>
