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;
}
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
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.
Reply With Quote
Bookmarks