PDA

View Full Version : CSS Image Gallery Layout.


tux
03-05-2008, 10:59 AM
Hi all,

I'm still trying to get to grips with CSS and am currently rebuilding a site that was designed with tables. Most of the layout is done now and I am turning my attention to the Image Gallery part of the site. I have done a simple test page for this and wanted someone to mull it over and see if I am on the right track, have done anything wrong or if it can be simplified. I have got it to look how it needs to and checked it in IE, FF and Opera and its okay. Any feedback and advice on the CSS would be great. Thanks.

Test page here. (http://www.photographybydantucker.com/imagegallerytest.html)

Regards, Paul

domedia
03-05-2008, 02:04 PM
Hi Paul, the structure of this HTML is broken:
<div id="img1">
<a target="_blank" href="http://www.photographybydantucker.com/gallery_main1.php">
<img src="http://www.photographybydantucker.com/images/Gallery/Thumbs/DTLAND0061.jpg" alt="Burrow Mump - Somerset (GB)" width="140"
height="95" /> <div id ="desc1">description1</a>

</div>
</div>
You cannot close the A tag before closing your div class desc1. With my tools it's not possible to accurately test the CSS/HTML until the structure is fixed :)

To 'illustrate; the first example here is wrong, the second one is right:

<p><b>Hello, this is wrong</p></b>
<p><b>Hello, this is right</b></p>

tux
03-05-2008, 07:57 PM
Sorry Dom, didn't notice I'd done that. I was focusing more on the CSS. I've moved the closing </div> for each. Is this now correct?

My main question was about the CSS. Have I done it correctly and is there a better or simpler way. Thanks.

Paul.

ts03qa
03-05-2008, 10:28 PM
HI, I checked out your gallery page and I noticed the description links have no underlines. I want to make my links like that but don't know how. Can you tell me how to do it in Dreamweaver? I don't know CSS..only a bit of HTML. I use the Design View.

domedia
03-05-2008, 11:01 PM
ts03qa, don;t hijack this thread, start a new one :)

tux as I said my tools does not work to check your CSS if the HTML is broken. Looking at the CSS it makes no sense to me, it's not really my writing style, it looks like there is a lot of redundant code in there. Once you fix the structure of the page, I can help you more.

gmcrone
03-06-2008, 11:11 AM
TUX, try this:

CSS file:

.photo img {
border: 1px solid;
padding: 4px;
}

.thumb p {
font-size: 1.1em;
text-align: center;
margin: 1-px 0 0 0;
height: 5em; (change depending on amount of text)
}

.thumb {
float: left;
width: 220px ;(width of thumbnail plus padding & border)
margin: 0 10px 10px 10px ;
}


Your HTML:

<div class="thumb">
<div class="photo">
<img source="/images/pic1.jpg" alt="pic1" width="200" height="200">
</div>
<p> Picture 1 yadda yadda yadda.</p>
</div>


You will have to adjust dimensions according to your thumbnails, but try to make them all the same size.
On your HTML page put each thumb in a div class=thumb and put them right after one another.

Mike...

tux
03-06-2008, 05:04 PM
Thanks for that Mike but the layout needs to be as it is in my link in post 1.

I think I have sorted my broken HTML as Dom advised. What I want tho' is for someone with some CSS savvy to look at the CSS to see if the same effect can be done simpler or is it okay as it is.

Regards, Paul

tux
03-07-2008, 08:24 PM
Just wanted to bump this thread in case it had been missed. Cheers.

gmcrone
03-08-2008, 02:52 PM
Tux,
You can customize my CSS all you want to make it look the way you want it and
use positioning on it to put it where you want it.
What the CSS does is put each photo in a small box with your description/link right underneath it.
When I look at your page your descriptions are overlapping.
There are no errors in your CSS, just not really good looking on a page, but I don't know the context of the entire page, only the snippet you have given.

Mike..

tux
03-08-2008, 04:38 PM
Okay, cheers Mike,

When I look at your page your descriptions are overlapping.

What are you viewing it in as I have checked it in IE6, FF, Netscape & Opera and the descriptions are fine!!!

You can customize my CSS all you want to make it look the way you want it and use positioning on it to put it where you want it.

Will your code allow the descriptions to all be between the images as the test page is now?

Thanks again,

Regards, Paul

Cary
03-08-2008, 08:57 PM
Hi Paul,

When I look at the page in Firefox and increase font size things start to fall apart. Things will also start falling apart if your description lines get any longer, which doesn't leave much room for a description. The code you have can be simplified, but it would still suffer from the same problems.

For longer descriptions were you planning on having the text flow downward in a column to the side of the thumbnails, or are the descriptions supposed to flow down and below the thumbs if they get long enough?

Cary
03-08-2008, 09:41 PM
Here's some code you can try.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Image Gallery</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
img{
border: none;
}
#holder {
width: 500px;
}
#holder .img1, #holder .img2 {
width: 245px;
float: left;
margin: 2px;
min-height: 130px;
}
* html #holder .img1, * html #holder .img2 { /* for IE6 which doesn't understand min-height but treats height like min-height */
height:130px;
}
#holder .img1 a {
float: left;
}
#holder .img2 a {
float: right;
}
#holder h3 {
margin: 30px 2px 2px 2px;
}
.clearing {
font-size: 0px;
line-height: 0px;
clear: both;
height: 0px;
}
</style>
</head>
<body>
<div id="holder">
<div class="img1"><a target="_blank" href="http://www.photographybydantucker.com/gallery_main1.php"><img src="http://www.photographybydantucker.com/images/Gallery/Thumbs/DTLAND0061.jpg" alt="Burrow Mump &minus; Somerset (GB)" width="140" height="95"></a>
<h3>description1</h3>
</div>
<div class="img2"><a target="_blank" href="http://www.photographybydantucker.com/gallery_main1.php"><img src="http://www.photographybydantucker.com/images/Gallery/Thumbs/DTLAND0148.jpg" alt="Rock formation on Mount Teide &minus; Tenerife (Spain)" width="140" height="95"></a>
<h3>description2</h3>
</div>
<div class="clearing"></div>
<div class="img1"><a target="_blank" href="http://www.photographybydantucker.com/gallery_main1.php"><img src="http://www.photographybydantucker.com/images/Gallery/Thumbs/DTLAND0217.jpg" alt="Watendlath &minus; Lake District (GB)" width="140" height="95"></a>
<h3>description3</h3>
</div>
<div class="img2"><a target="_blank" href="http://www.photographybydantucker.com/gallery_main1.php"><img src="http://www.photographybydantucker.com/images/Gallery/Thumbs/DTLAND0227.jpg" alt="Durwent Water at Sunrise &minus; Lake District (GB)" width="140" height="95"></a>
<h3>description4</h3>
</div>
<div class="clearing"></div>
</div>
</body>
</html>

nanny
03-08-2008, 10:51 PM
Have a look at cssplay.com for some interesting ways of doing image galleries purely in css.

gmcrone
03-09-2008, 01:48 PM
Using FireFox 2.0.0.12 under Linux.
As for customizing, look at Cary's sample, very similar.

See attached pic

tux
03-09-2008, 09:51 PM
Thanks for your imput everyone.

I will give your code a try Cary, thanks.

Regards, Paul