4 replies [Last post]
Bigdawg
Offline
Enthusiast
Last seen: 10 years 37 weeks ago
Joined: 2003-12-16
Posts: 65
Points: 0

I have been playing around with this for about an hour but just can not quite get the look I want. I would like both sets of three pics to sit side by side with the border going around all six. Right now the second set of six sit below and the result I would like is if they were parallel. Here is the code .

<?xml version="1.0" encoding="iso-8859-1"?>
<html xmlns="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="#" />
<meta name="generator" content="WWW.BIGDAWGCAPS.COM" />
<style type="text/css">
<!--

#navlist
{
width: 7em;
/* to display the list horizontaly */
font-family: sans-serif;
margin: 0 0 0 10px;
padding: 0;
border-top: 1px #666666 solid;
border-left: 1px #666666 solid;
border-right: 1px #666666 solid;
}

#navlist a
{
width: 99.99%;
/* extend the sensible area to the maximum with IE5 */
display: block;
background-color: #fff;
border-bottom: 1px #666666 solid;
text-align: center;
text-decoration: none;
color:#666666;
}

#navlist a:hover { background-color: #FEE8FE; }
#navlist a:visited { color: #666666; }
body { color:rgb(128,128,128); font-family:sans-serif;}
th { color:rgb(128,128,128); font-family:sans-serif;}
td { color:rgb(128,128,128); font-family:sans-serif;}
h1 { color:rgb(221,0,111); font-size:12pt; font-family:sans-serif;}
h2 { color:rgb(64,128,128); font-size:12pt; font-family:sans-serif;}

a:link {}
a:visited {}
a:active {}
#navlist li
{
display: inline;
/* for IE5 and IE6 */
}

.thumbnail {float:right;width:60px;margin:15 20 60 120;padding: 5px;border: 1px #666666 solid;}
.thumbnails {float:left;width:60px;margin:0 0 0 120; }
.clearboth { clear:both;}
-->

/* End of style section. Generated by Me at 12/9/2003 5:11:47 PM */
-->
</style>
</head>
<body bgcolor="#FEE8FE">
<div id="navcontainer">
<ul id="navlist">
<li id="active">
<a href="jeannie.htm" id="current">HOME</a>
</li>
<li>
<a href="#">BIO</a>
</li>
<li>
<a href="gallery1.htm">GALLERY 1</a>
</li>
<li>
<a href="gallery2.htm">GALLERY 2</a>
</li>
</ul>
</div>
<div class="thumbnail">
<a href="Chinagirl.jpg"><img src="thumbchina.jpg" alt="China girl" width="75" height="90" /></a>
Chinagirl
<p>
<a href="ladybug.jpg"><img src="thumblady.jpg" alt="Ladybug" width="75" height="90" /></a>
Ladybug
</p>
<p>
<a href="lighthouse.jpg"><img src="thumblight.jpg" alt="North Shore Lighthouse" width="75" height="90" /></a>
Lighthouse
</p>
<p>
<br class="clearboth" />
</p>
<div class="thumbnails">
<br />
<br />
<a href="LOON.JPG"><img src="thumbloon.jpg" alt="Loons" width="90" height="75" /></a>
Loons
<p>
<a href="hummingbird.jpg"><img src="thumbhumming.jpg" alt="Hummingbird" width="90" height="75" /></a>
Hummingbird
</p>
<p>
<a href="bluejay.jpg"><img src="thumbbjay.jpg" alt="Bluejay" width="90" height="75" /></a>
BlueJay
</p>
</div>
</div>
</body>
</html>

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 10 years 42 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

Galleries side by side

bigdawg

You have a few problems -

The first DIV "thumbnail", you are floating right and using as a container for the first 3 images, and then it also contains the the left floated div "thumbnails". And then more.

You need one container (floated right and has the border) around 2 containers (floated left) which each held 3 images.

Another problem is that the widths for the divs are way smaller than the images and therefore will expand in IE.

I can see what you were trying to do.

What you want is this

<html xmlns="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="#" />
<meta name="generator" content="WWW.BIGDAWGCAPS.COM" />
<style type="text/css">
<!--

#navlist
{
width: 7em;
/* to display the list horizontaly */
font-family: sans-serif;
margin: 0 0 0 10px;
padding: 0;
border-top: 1px #666666 solid;
border-left: 1px #666666 solid;
border-right: 1px #666666 solid;
}

#navlist a
{
width: 99.99%;
/* extend the sensible area to the maximum with IE5 */
display: block;
background-color: #fff;
border-bottom: 1px #666666 solid;
text-align: center;
text-decoration: none;
color:#666666;
}

#navlist a:hover { background-color: #FEE8FE; }
#navlist a:visited { color: #666666; }
body { color:rgb(128,128,128); font-family:sans-serif;}
th { color:rgb(128,128,128); font-family:sans-serif;}
td { color:rgb(128,128,128); font-family:sans-serif;}
h1 { color:rgb(221,0,111); font-size:12pt; font-family:sans-serif;}
h2 { color:rgb(64,128,128); font-size:12pt; font-family:sans-serif;}

a:link {}
a:visited {}
a:active {}
#navlist li
{
display: inline;
/* for IE5 and IE6 */
}

.imagecontainer {position: relative;float:right;width:240px;margin:0 0 0 0;padding: 5px;border: 1px #666666 solid;}
* html .imagecontainer {overflow: hidden;}
.floatpics1 {position: relative; float:left; margin:0 0 0 5px;}
.floatpics2 {position: relative; float:left; margin:0 0 0 20px;}
.onesize{width:95px; height: 95px;}
* html .onesize{overflow:hidden}
.clearboth {clear:both;}
-->

/* End of style section. Generated by Me at 12/9/2003 5:11:47 PM */
-->
</style>
</head>
<body bgcolor="#FEE8FE">
<div id="navcontainer">
<ul id="navlist">
<li id="active">
<a href="jeannie.htm" id="current">HOME</a>
</li>
<li>
<a href="#">BIO</a>
</li>
<li>
<a href="gallery1.htm">GALLERY 1</a>
</li>
<li>
<a href="gallery2.htm">GALLERY 2</a>
</li>
</ul>
</div>
<div class="imagecontainer">
<div class="floatpics1">
<div class="onesize">
<a href="Chinagirl.jpg"><img src="thumbchina.jpg" alt="China girl" width="75" height="90" /></a>
</div>
<p>Chinagirl</p>
<div class="onesize">
<a href="ladybug.jpg"><img src="thumblady.jpg" alt="Ladybug" width="75" height="90" /></a>
</div>
<p>Ladybug</p>
<div class="onesize">
<a href="lighthouse.jpg"><img src="thumblight.jpg" alt="North Shore Lighthouse" width="75" height="90" /></a>
</div>
<p>Lighthouse</p>
</div>

<div class="floatpics2">
<div class="onesize">
<a href="LOON.JPG"><img src="thumbloon.jpg" alt="Loons" width="90" height="75" /></a>
</div>
<p>Loons</p>
<div class="onesize">
<a href="hummingbird.jpg"><img src="thumbhumming.jpg" alt="Hummingbird" width="90" height="75" /></a>
</div>
<p>Hummingbird</p>
<div class="onesize">
<a href="hummingbird.jpg"><img src="thumbhumming.jpg" alt="Hummingbird" width="90" height="75" /></a>
</div>
<p>BlueJay</p>
</div>
<div class="clearboth"></div>
</div>
<div class="clearboth"></div>
</body>
</html>

Bigdawg quite often before trying to build it I draw the boxes on paper. It helps me heaps in understanding what will happen and what I want to happen.

Regards
Day

The only way to learn is to do it yourself

Bigdawg
Offline
Enthusiast
Last seen: 10 years 37 weeks ago
Joined: 2003-12-16
Posts: 65
Points: 0

Galleries side by side

Thanks alot Day That did the trick! I was thinking when I did it that having the two with one floating let and other to the right it would work. I think I will get the hang of this positioning so that I am not bothersome . Thanks for the tips especially during the hpliday season when you have alot more important things you could be doing. Steve

Bigdawg
Offline
Enthusiast
Last seen: 10 years 37 weeks ago
Joined: 2003-12-16
Posts: 65
Points: 0

Galleries side by side

.imagecontainer {position: relative;float:right;width:240px;margin:0 0 0 0;padding: 5px;border: 1px #666666 solid;}
* html .imagecontainer {overflow: hidden;}
.floatpics1 {position: relative; float:left; margin:0 0 0 5px;}
.floatpics2 {position: relative; float:left; margin:0 0 0 20px;}
.onesize{width:95px; height: 95px;}
* html .onesize{overflow:hidden}
.clearboth {clear:both;}
I had not seen this used before * html .onesize{overflow:hidden} Good job!

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 10 years 42 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

Galleries side by side

* html .onesize{overflow:hidden}

the "* html" is a hack that only IE can read.
"{overflow:hidden}" makes sure IE does not expand past the size you want. http://www.csscreator.com/css-node/832

BigDawg - must admit still not tested in IE5.x - should not make a difference anyway, The idea is to stop IE doing anything strange till you work out the correct widths.

Regards
Day

The only way to learn is to do it yourself