467,903 Members | 1,660 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 467,903 developers. It's quick & easy.

float not formatting like table

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='return changeImg(\"" +
nasaPath + link + "_L.jpg\");'>\n" +
"<\/a><br><br>";
document.writeln(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("Apollo17_Earth");
genImage("clem_full_moon");
genImage("erosreconstruct_near");
genImage("giotto_halley");
genImage("lspn_comet_halley1");
genImage("hst_pluto_charon");
genImage("idadactyl");
</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.length == 1)
{ document.writeln("<tr>");}
var data = "<td width='110' valign='top'>" +
"<a href='" + nasaPath + link + "_L.jpg'>\n" +
"<img src='" + nasaPath + link + "_T.jpg'\n" +
"onclick='return changeImg(\"" +
nasaPath + link + "_L.jpg\");'>\n" +
"<\/a><br></td>";
document.writeln(data);
if (arguments.lenght == 1)
{ document.writeln("<\/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("Apollo17_Earth","first");
</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("erosreconstruct_near");
genImage("giotto_halley");
genImage("lspn_comet_halley1");
genImage("hst_pluto_charon");
genImage("idadactyl");
</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>
Jul 20 '05 #1
  • viewed: 1938
Share:
1 Reply
rc*******@my-deja.com (Robert) wrote:
css version:


Don't post code to the group, post urls instead.

Better yet: post a minimised test case:
http://www.spartanicus.utvinternet.i...s_help_you.htm

Mention in advance if the examples require javascript to be enabled,
some of us refuse to enable it.

--
Spartanicus
Jul 20 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

2 posts views Thread by hpy_awad | last post: by
6 posts views Thread by Brian | last post: by
22 posts views Thread by ashkaan57 | last post: by
2 posts views Thread by pbd22 | last post: by
14 posts views Thread by Jim Langston | last post: by
5 posts views Thread by Selvam | last post: by
3 posts views Thread by Ben C | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.