Hello everyone,

I've been creating a website mostly for showing my photographs. Now i'm onto the gallery and have gotten quite stuck. I'm using Dreamweaver CS3 and mostly using CSS. I really don't have much knowledge in website design all i've gotten so far is from tutorials and such. So what i needed help with was the layout of the thumbnails in the gallery. I've figured out how to use Lightbox 2 and have that all setup. I have made thumbnails and pictures to the size i want them i just need to arrange them nicely in the page i've created. What i was looking for was something like the following :

joshuaink2006.johnoxton.co.uk/templates/gallery/

It's done in CSS so the tutorial said and i've downloaded and looked in it but i can't really gather much from it. I don't want to simply steal the code and try make it work for me. I was just wondering if anyone could point me in the direction of some tutorials or explain the best way of arranging all of my thumbnails so they look similar to that and it wouldn't be too much hassle to add more in the future. The only way i can think is creating different div tags for each thumbnail and try to arrange them with margins, but i feel this would take a very long time and not be very easy. Is there another easier way that would work better? Thanks alot for any help and i hope i've provided all the information you need to help me.

I've just completed something like that, what I did was to have one div to hold the thumbnails, that another inside it that holds the actual thumbnails, the inner one is floated left, and has a right and bottom margin, that means that as the thumbs go in they are floated left until there is not more space then another row starts.

it seems to work well.

Where I did meet problems was with thumbnails of different orientation - I wanted all the landscape images together and all the portrait ones together - not easy and accounted for lots of lines of code and waking up in the night <img src=../images/dmxzone/forum/icon_smile_sad.gif border=0 align=middle>

If I was starting this project over I think I might have told the client I was too busy . . .

Thanks for the reply. So with the div that actually holds the thumbnails, did you just create one and re use it for each thumbnail? or did you have to create one for each thumbnail? And with reading your problem with the landscape and portrait pictures i guess ill just let them be a little wonkey and not bother with trying to perfect it, sounds like too much hassle. I'll give this a try later thanks alot <img src=../images/dmxzone/forum/icon_smile.gif border=0 align=middle>

yes, something like . . . Oh, looks like I made classes and then applied them to the divs, sorry I should have said that <img src=../images/dmxzone/forum/icon_smile_blush.gif border=0 align=middle>

<pre id=code><font face=courier size=2 id=code> .workRow {
width: 100%;
display: block;
float: left;
clear: both;
margin-top: 10px;
}
.workItem {
display: block;
width: 170px;
height: 240px;
float: left;
margin: 0 18px 18px 0;
text-align: center;

}
</font id=code></pre id=code>

workItem sits within workRow on the page, the rows sit within a 2-column layout so I can keep a menu on the left

this way I can adjust the width and height of workItem if I decide to change the size of thumbnails, they sit nicely in rows. Another point to consider is what happens when the images are of different sizes, it really makes the rows look naff, but as I am scaling them all on either width or height there's not a lot I can do about it, I put in a routine that uses imagemagick to put the thumbnails onto white squares but even then you can get different heights of thumbnail . . . and so it goes on, maybe the answer is just to crop or impose a requirement

and I should have said too - if you happen to be working on a mac, get cssedit - it's a shareware application that lets you see exactly what is going on it the css and edit it so easily, best application I purchased


Edited by - sitemaster on 12 Feb 2008 10:37:55

Sorry to be a pain but i'm not sure how to make classes and add them to divs <img src=../images/dmxzone/forum/icon_smile_tongue.gif border=0 align=middle>. I've been using dreamweaver for like 5 days so i'm very new to it. Would you mind just telling me how to do that or directing me to a tutorial? Also would you mind showing me the gallery you made so i can see it just to help me out a little with some visual <img src=../images/dmxzone/forum/icon_smile_tongue.gif border=0 align=middle>

Also i was wondering, is there a way of making whatever is inside your div to be centered? So for instance my thumbnail will be exactley in the center of my div this way i figure when i do them all atleast they will roughley be all along the same line as long as i make the thumbnails roughly the same size.

Thanks alot for your help.

Edited by - shanecollins on 12 Feb 2008 23:31:49

Hi Shane
no problem - my replies tend to reflect how much time I have to spare, so sometimes they are short, or non-existent <img src=../images/dmxzone/forum/icon_smile.gif border=0 align=middle>

this is a development site so you may find oddities, and it's on a 'spare' domain name of mine, so when the job goes live it will disappear

www.listentothepeople.co.uk

have a look at the work page for any of the artists that are completed and you'll see the rows in action. You will also see that the thumbnails are not all the same size, that's really not easy to fix without cropping and in this case that's not going to happen.

in CSS a class is a style that can be applied to ANY tag, like p, div etc. Once you have your stylesheet linked to the page, put your cursor into an element on the page and click it - then look at the inspector at the bottom of your screen, look about 1/3 of the way from the left-hand side and you will see the 'style' dropdown, that is the class and will have a list taken from your stylesheet. Pick the one you want and the screen should reflect your choice. Then, just for the fun of it, go and switch to code layout and look exactly what has been put in.

I find that I spend most of my time working in the code view these days and in some cases I've just abandoned dw and work in either notepad++ if i'm on pc or more likely a text editor like smultron on mac. If you're doing dynamic stuff it's unlikely that you will be able to do it all in dw, it's code writing is pretty good, but I find it can't do just what I want. That could be my fault, I'm very impatient and an 'old coder' so I tend to drop into code rather than messing about trying to get dw to do something that I know exactly how to do.

To get your stuff centred in the div, add text-align:centre; to the css that should do it.

CSS is great but the learning process is hard and frustrating, but don't give up on it, once you get to like it you'll never want to go back to tables and all those cells

I agree about CSS i made some sites before with html tables and stuff and now i've discovered css i wont ever go back to html css is much much better.

About centering the image i mean vertically aswell as horizontally. I haven't had any luck doing it and can't seem to find any tutorials about it apart from things that just totally confuse me as i'm still mostly working in the design part rather than code. But i do read the code and try learn and understand it. So do you have any idea how to center the image vertically aswell? I was thinking of making divs all the same size and making the images inside be centered vertically and horizontally

ultimorender.com.ar/funkascript/beta/css/vertical_center.htm

This is what i want, call me stupid but i really don't understand how todo it from that page. Like i say mostly i use the design part so i'm really not sure. If you wouldnt mind taking a look and trying to explain to me or if you know another way of doing it i'd really appricate it. Thanks alot <img src=../images/dmxzone/forum/icon_smile.gif border=0 align=middle>

Hi Shane,
I am joining you on the stupid side of the island <img src=../images/dmxzone/forum/icon_smile.gif border=0 align=middle>

with a quick reading of the source of that page I don't get it either, I think there is a javascript at the top, well, just for the fun of it I did a quick search on css expressions and found, amongst other things, this . . .

developer.yahoo.com/performance/rules.html#css_expressions

my immediate reaction is 'Do not touch expressions with a very long pole' they are proprietary MS stuff and will give you nothing but grief - I declare a prejudice against anything MS here so you may disregard this <img src=../images/dmxzone/forum/icon_smile.gif border=0 align=middle>

The way I did my vertically spaced images is different, and NOT EASY - i used imagemagick to scale the image so its long edge was always n pixels, then placed it centrally on a white square, of n+5 pixels x n+5 pixels

I rate that as cool, because you end up with an invisible border as long as you place it on a white page, that means you can do what you like and the images will appear to line up

You idea of divs with the same height should work too, but not sure how to place the image in the middle vertically, sorry not to be more help on that.