CSS layout issue [Archive] - WebDeveloper.com

LT0012

06-05-2006, 01:51 PM

Below is both the CSS and HTML of my attempt at a photo gallery... I would however like the images in a straight row below the large main image, what am I doing wrong?

div {}

.gallery {}

body {
text-align:center;
font-family: tahoma, "Comic Sans MS";
font-size:76%;
letter-spacing:0.05em;
}

/* The containing box for the gallery. */
#container {
position:relative;
width:770px;
height:396px;
margin:20px auto 0 auto;
border:1px solid #aaa;
}

#container ul {
/* Removing the list bullets and indentation */
padding:0;
margin:0;
list-style-type:none;
/* set the size of the unordered list to neatly house the thumbnails */
width:198px;
height:250px;
/* move the thumbnails into the correct position */
margin:5px;
float: right;
display: block;
}

#container li {
float:left;
}

/* Remove the images and text from sight */
#container a.gallery span {
position:absolute;
width:1px;
height:1px;
top:5px;
left:5px;
overflow:hidden;
background:#fff;
}

/* Adding the thumbnail images */
#container a.gallery, #container a.gallery:visited {
display: block;
color:#000;
text-decoration:none;
border:1px solid #000;
margin:1px 2px 1px 2px;
text-align:left;
cursor:default;
}
#container a.slidea {
background: url(drum1-S.jpg) no-repeat center;
height:113px;
width:62px;
}
* html #container a.slidea {
width: 62px;
height: 113px;
}
#container a.slideb {
background:url(drum2-S.jpg) no-repeat center;
height:62px;
width:113px;
}
* html #container a.slideb {
height: 62px;
width:113px;
}
#container a.slidec {
background:url(drum3-S.jpg) no-repeat center;
height:113px;
width:62px;
}
* html #container a.slidec {
height:113px;
width:62px;
}
#container a.slided {
background:url(drum4-S.jpg) no-repeat center;
height:113px;
width:62px;
}
* html #container a.slided {
height:113px;
width:62px;
}
#container a.slidee {
background: url(drum5-S.jpg) no-repeat center;
height:113px;
width:62px;
}
* html #container a.slidee {
width:113px;
width:62px;
}
#container a.slidef {
background:url(drum6-S.jpg) no-repeat center;
height:113px;
width:62px;
}
* html #container a.slidef {
height:113px;
width:62px;
}

/* change the thumbnail border color */
#container a.gallery:hover {
border:1px solid #fff;
}

/* styling the :hover span */
#container a.gallery:hover span {
position:absolute;
width:372px;
height:372px;
top:10px;
left:75px;
color:#000;
background:#fff;
}

ul {}

li {}

a {}

span {}

img {}

a:link {}

a:visited {}

a:hover {}

a:active {}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">

</style><link rel="stylesheet" type="text/css" href="gallerystyle.css" /> </head>

<body>
<div id="container">
<ul>
<li>
<a class="gallery slidea" href="#nogo">
<span>
<img src="drum1.jpg" alt="1" title="1" />
<br />
</span>
</a>
</li>
<li>
<a class="gallery slideb" href="#nogo">
<span>
<img src="drum2.jpg" alt="2" width="424" height="242" title="2" />
<br />
</span>
</a>
</li>
<li>
<a class="gallery slidec" href="#nogo">
<span>
<img src="drum3.jpg" alt="3" title="3" />
<br />
</span>
</a>
</li>
<li>
<a class="gallery slided" href="#nogo">
<span>
<img src="drum4.jpg" alt="4" title="4" />
<br />
</span>
</a>
</li>
<li>
<a class="gallery slidee" href="#nogo">
<span>
<img src="drum5.jpg" alt="5" title="5" />
<br />
</span>
</a>
</li>
<li>
<a class="gallery slidef" href="#nogo">
<span>
<img src="drum6.jpg" alt="6" title="6" />
<br />
</span>
</a>
</li>
</ul>
</div>

</body>
</html>

WebJoel

06-05-2006, 02:13 PM

I recognise this fine piece of code as Stu Nicholl's, I beleive it was called "A Dog's Life" or something like that. Totally open-source of course. That's why I also used his technique to create this site: http://ca.geocities.com/hobby_site/

I started to go through your code and sort~of lost spirit... *sigh*... maybe I'd better go to lunch and I'll feel more alert afterwards... :)
-J

GaryS

06-05-2006, 02:22 PM

Yes, I recognised it too!

As it stands, your "container ul" is floated right. It isn't very wide, hence the way the small images are stacking.

Try - as a starting point - unfloating the "container ul" and taking away its width. That will give your horizontal row of images. Then you'll need to move it to make way for the main image.