No replies
Seamus
Offline
newbie
Last seen: 17 years 48 weeks ago
Timezone: GMT+10
Joined: 2004-11-06
Posts: 3
Points: 0

Hello forum, Smile

Can someone please help me fix up this page: http://www.geocities.com/sccc_au/HomeMembers.htm ?

Maybe you could point me to a good tutorial? Smile

Half the CSS on the above page is probably redundant as I'm feeling kinda lost and bleary eyed right now after spending all day in front of the PC.

Some of the CSS is being recycled from the Home Page as the current test page - "HomeMembers" (very imaginative?). Smile

I had a go at chapter two - "Styling a Photo Collection" - from "More Eric Meyer on CSS": http://more.ericmeyeroncss.com/projects/02/.

Meyer doesn't go into how we do the same thing in a table. If I could use the "slide" background in each cell of a table and insert the actual thumbnail image in the center of each background and have the flexibility to move the thumb image around within the cell if necessary, then I might be on my way to a solution.

Meyer says tables are probably better suited to some jobs like lining up images in a fixed-width table and resizing to the size of the largest image.

At the moment I am trying to put a floating thumbnail gallery inside a fixed (absolutely positioned) box. Is this acceptable? Am I heading down a dodgy path?

Quote:
/*THUMBNAIL CONTAINER*/
div.thumb {
float: left;
border: none;
height: auto;
width: auto;
padding: 15px 15px 30px;
margin: 5px 1px;
background: url(Images/KodakFrame160x160.gif) no-repeat;
/*background: white;
border: 1px solid;
border-color: #AAA #444 #444 #AAA;*/
/*text-align: center;*/
/*background: url(Images/frame-ls.gif) center no-repeat;*/
}

/*THUMBNAIL IMAGE*/
.thumb img{
border: 1px solid;
border-color: #444 #AAA #AAA #444;
height: 96px; width: 128px; margin: 16px 0;
display: inline;
}

It kind of makes the float function a bit redundant I think.

The "slide" is a background image. The actual thumbnail image is positioned to be in the middle of the slide. The bottom of each slide should be labelled in the centre - my slide labels - "Ocker", "Hitch", "Smurf" and the rest - are all a bit low on the vertical plane. I also want to insert some additional text below each "slide" as you can see at the above URL.