I created two pages. One using CSS and the other using a table. I'd
like the css version to work like the table version.
The problem arises when the full image doesn't fit in the window.
Click on the moon thumb to see the problem. In IE 5.2 on MacOS
10.2.6, the moon drops down below the list of thumbs. I'd like it to
say to the right of the thumbs and be able to scroll right. In
Netscape 7.2, the larger image of the moon stays to the right of the
thumbs.
I am wondering how I can force the moon to be to the right using CSS.
I tried absolute position a bit, but I had a problem with the footer.
In this case, I do not know the size of the full size picture until I
click on the thumb.
I'd like to move away from using tables.
Robert
css version:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Swap images with CSS formating</title>
<style type="text/css">
#header {
padding: 5px;
border: 1px;
border-style: dotted;
}
#thumbs{
float: left;
width: 15%;
padding-left: 5px;
padding-bottom: 20px;
border: 1px;
border-style: dotted;
}
#picture{
float: right;
width: 81%;
padding-bottom: 20px;
border: 1px;
border-style: dotted;
}
#footer{
clear: both;
background: #eee;
border: 1px;
border-style: dotted;
}
</style>
<script type="text/javascript">
var nasaPath = "http://spaceplace.nasa .gov" +
"/en/educators/images/solarsystem/";
function genImage(link)
{
var data = "<a href='" + nasaPath + link + "_L.jpg'>\n " +
"<img src='" + nasaPath + link + "_T.jpg'\n" +
"onclick='retur n changeImg(\"" +
nasaPath + link + "_L.jpg\");'>\n " +
"<\/a><br><br>";
document.writel n(data);
}
function changeImg(name)
{
document.images["big_image"].src =
"http://spaceplace.jpl. nasa.gov/en/_images/common/nasa_header/logo_nasa.gif";
document.images["big_image"].src = name;
return false;
}
</script>
</head>
<body>
<div id="header">
<h1 style="text-align: center;">Solar System:</h1>
</div>
<div id="thumbs">
<script type="text/javascript">
genImage("Apoll o17_Earth");
genImage("clem_ full_moon");
genImage("erosr econstruct_near ");
genImage("giott o_halley");
genImage("lspn_ comet_halley1") ;
genImage("hst_p luto_charon");
genImage("idada ctyl");
</script>
</div>
<div id="picture">
<img id="big_image"
src=
"http://spaceplace.jpl. nasa.gov/en/_images/common/nasa_header/logo_nasa.gif"
alt="Picture of a solar system object">
</div>
<div id="footer">
<p>These image are from NASA. See:<br>
http://spaceplace.jpl.nasa.gov/en/ed...s_images.shtml
</p>
</div>
</body>
</html>
table version:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Swap images</title>
<style type="text/css">
#footer{
clear: both;
padding-left: 20px;
padding-right: 20px;
padding-top: 5px;
padding-bottom: 5px;
background: #eee;
}
</style>
<script type="text/javascript">
var nasaPath = "http://spaceplace.nasa .gov" +
"/en/educators/images/solarsystem/";
function genImage(link)
{
if (arguments.leng th == 1)
{ document.writel n("<tr>");}
var data = "<td width='110' valign='top'>" +
"<a href='" + nasaPath + link + "_L.jpg'>\n " +
"<img src='" + nasaPath + link + "_T.jpg'\n" +
"onclick='retur n changeImg(\"" +
nasaPath + link + "_L.jpg\");'>\n " +
"<\/a><br></td>";
document.writel n(data);
if (arguments.leng ht == 1)
{ document.writel n("<\/tr>");}
}
function changeImg(name)
{
document.images["big_image"].src =
"http://spaceplace.jpl. nasa.gov/en/_images/common/nasa_header/logo_nasa.gif";
document.images["big_image"].src = name;
return false;
}
</script>
</head>
<body>
<h1 style="text-align: center;">Solar System</h1>
<table>
<tr>
<script type="text/javascript">
genImage("Apoll o17_Earth","fir st");
</script>
<td width="600" height="800" align="center" valign="top" rowspan="7">
<img id="big_image"
src=
"http://spaceplace.jpl. nasa.gov/en/_images/common/nasa_header/logo_nasa.gif";
</td>
</tr>
<script type="text/javascript">
genImage("clem_ full_moon");
genImage("erosr econstruct_near ");
genImage("giott o_halley");
genImage("lspn_ comet_halley1") ;
genImage("hst_p luto_charon");
genImage("idada ctyl");
</script>
</table>
<div id="footer">
<p>These image are from NASA. See:<br>
http://spaceplace.jpl.nasa.gov/en/ed...s_images.shtml
</p>
</div>
</body>
</html>
