Rebuild Website

[wayne]

Hi, I built my photographic website, www.imaginetheeverglades.com a year ago with a lot of help from this forum. The gallery page has an iframe wherein my album sits. I made the album using Jalbum, and now I want to do away with that as it's a real pain to update my photographs. For each change I have to rebuild the album.

 

What I want to do is display about four images (approximately 150x100 pixels) on my homepage (landscapes, birds, alligators, flora) and then when one is clicked on it brings up a file of smaller thumbs. When the viewer clicks on one of these smaller thumbs a larger window opens of that image.

 

I'll post about 75 photos this way, so my question is, is there an efficient method available other than building the 75 pages? Also, my shopping cart is part of the Jalbum album, and I'll need to create another one, but if I remember correctly that's not difficult to do.

 

I'm a little rusty with html and css, but am brushing up on it. Thanks for your help.

[newseed]

How about something like this? Link

 

Click on Proofing Area and then browse around.

Edited August 29, 2009 by newseed

[wayne]

That's close, but this is more like I'm thinking about. http://www.martinlawrencephotography.com/gallery/view/18/

I can't remember how to access the CSS sheet for a site. Can you jog my memory?

[falkencreative]

Just look for the CSS link in the source code. In this case, looks like the CSS is generated dynamically. Here's the link for that particular site: http://www.martinlawrencephotography.com/?css=site/site_css

[wayne]

Wow! That's some CSS sheet. I'll study it although I won't build mine so detailed. That guy has a lot of text and special interest criteria.

What do you mean by dynamically generated?

 

Thanks for the info.

[falkencreative]

I can't really tell... The strange url ("?css=site/site_css" to be specific) probably means that PHP is being used to pull the CSS code from a database or use specific CSS per page. It may be a feature of whatever CMS that site may be using. Obviously, I can't look at the PHP code itself, so this is only an educated guess.

[wayne]

Got a new snag. I can't seem to get my text to center beneath each photo. I've pasted an excerpt from my gallery2.html below, and then the stylesheet.

 

alt="Monroe Station">

Dawn at the Hammock

 

 

 

*{margin: 0; padding: 0;}

 

body { color: #000000; font-family:Verdana, Arial, Helvetica, sans-serif; background:#333333; }

 

 

 

#wrapper { background: #C1BEB3; margin: 25px auto; width: 980px; padding-top: 1em;}

#wrapper2 {background:#333333; margin: 5px auto; width: 940px; padding-top: 1em; }

 

#header {text-align:center;}

 

h1 {color:#666600;}

h1,h2,h3 { margin:15px auto;}

h2,h3 { font-size: 100%;}

h3 {text-align:center;}

h4 {text-align:left; margin:15px;margin-bottom:0px;}

 

p.center {text-align: center;}#content {margin: 35px;}p{ margin: 15px 0;}

 

ul#navlist{margin:15px auto; white-space: nowrap; text-align:center;}

 

#navlist li {display: inline; list-style-type: none;}

#navlist a {padding: 3px 10px; }

#navlist a:link, #navlist a:visited{color: #fff;background-color: #808080; text-decoration: none}

 

#navlist a:hover{color: #fff; background-color: #808000; text-decoration: none;}

table{margin: 10px 50px;}

 

img.displayed {display:block; margin-left: auto; margin-right: auto }

 

 

#footer { text-align: center; font-size: .8em; clear:both;}

 

#images img{float:right;}

#images img{float:left;}

#images p{clear:both;}

#images img{margin:0 60px 0;}

#images img {border: 0; }

 

#thumbs img {border:0;}

 

 

 

div.float { float:left; margin-left: 20px;margin-right: 20px;}

div.float p {text-align:center; }

 

 

#post img {display:block;

margin: 0 auto;}

#post {text-align:left;}

#post p {margin-top: 15pt; margin-bottom: 5pt;margin-left: 130pt; margin-right: 130pt;

 

 

}

[virtual]

Your css declaration for the p class="float" is not quite right it should look like this

 

div.float p.float {text-align:center; }

[wayne]

Thanks.

[wayne]

Having a problem with layout on thumbnail page where I'll have about 20 - 150x100px images.

I can't keep the thumbs in any order and was wondering if I should use tables?

[virtual]

You can use

and
• tags to make say 4 columns of 5. See how the css is set up in this example

  dyna micdr ive.com/style/csslibrary/item/css-image-gallery/

  (delete spaces)

[lm]

you can also use this template to manage the thumbnails.

[wayne]

Some of my thumbnails are horizontal and others, vertical, and that seems to throw the alignment off. I've looked at the links Im and Virtual provided but still can't wrap my head around the concept of aligning my thumbs.

It's been two days and I'm totally confused.

Can someone look at my stylesheet posted above, and point me in a more clear direction?

[virtual]

You cannot align thumbnails that are portrait (vertical) and landscape (horizontal) without it looking messy. You could try putting all the portrait ones together on one line and then below that another set with the landscape thumbnails, you would have to give them a different class and define the measurements in the css.

 

Another solution would be to crop your thumbnails so that they are all the same size, the photo would be the regular size, but all the thumbnails would be the same size to fit into the grid.

Edited September 1, 2009 by virtual

[virtual]

If my previous post is obscure, your code should look like this

 

CSS

.portrait { float:left; width: 100px; margin: 10px 20px; padding: 5px; border: solid 2px #FFF;}

p.float {text-align:center; }

.landscape {float:left; width: 175px; margin: 10px 20px; padding: 5px; border: solid 2px #FFF;}

.clear{ clear: both;}

 

HTML

alt="Monroe Station">

Dawn at the hammock

alt="Monroe Station">

Dawn at the Hammock

alt="Monroe Station">

Dawn at the Hammock

 

alt="Monroe Station">

Dawn at the hammock

alt="Monroe Station">

Dawn at the Hammock

[lm]

if you have them thumbnails portrait and landscape why not to use lightbox script?

Cut from your photos some funky stripes of equal size to use them as thumbnails as it is on lightbox example page ( see image set). There are may similar to lightbox scripts, I'm sure you can find one you prefer after search in Google.

[wayne]

Thanks again for your help, and Virtual, for the time you took to post code in this case.

 

The problem I have here with thumbs, is that I must represent the full composition of each photo as this is a photographic website. I can't hack the images in pieces because they don't display properly. So I've been reading, looking at other photographic sites and doing a lot of googling and unless I'm really missing something in code writing, it appears that the only way to overcome the alignment problems is with tables and css.

If anyone has a fix for this alignment problem in pure CSS, or agrees that tables are the way to go, I'd appreciate hearing from you.

[newseed]

You may want to check some of these:

 

Gallery One

Gallery Two

Gallery Three

 

All three uses portriats and landscape together. Just pick one you like and then study the code to see how it works.

[virtual]

The solution I gave you is pure CSS just to align the thumbnails, bearing in mind that they are of different sizes, heights and widths you are not cutting off any part of the thumbnail image, just arranging them in a more visually pleasing arrangement.

 

This is an old site I did some years back using lightbox, where I had the same problem and huge images to display, all done in CSS

http://walterbusuttil.com/kitchens/index.html

I don't particularly care for the layout but the client loved it.

 

Now I prefer to use a CSS rollover gallery, but that would not be good for you as the displayed image is always the size dimensions.

[wayne]

It's been a few days but I managed to fix my image alignment problem. I appreciate the help and have been steadily rebuilding the site. But I've come to a point where I need to link image pages with a clickable arrow showing next and previous, and haven't been able to find info on the arrow part.

 

Also, how do I go about making my pages live for purposes of posting here? Can I somehow link to my existing website in a temporary method?

Edited September 4, 2009 by wayne

[wayne]

Also, how do I go about making my pages live for purposes of posting here? Can I somehow link to my existing website in a temporary method?

 

Maybe I've asked too much?

[falkencreative]

Also, how do I go about making my pages live for purposes of posting here? Can I somehow link to my existing website in a temporary method?

 

Just make a new folder on your web hosting (name it "temp"?) and then upload your new site there so you can provide us a link. When the site is done and you are ready to launch, delete the temporary folder.

[wayne]

Thanks.

[wayne]

Okay, I've got the new site (not finished) temporarily loaded. The address-- www.imaginetheeverglades.com/temporary

 

The background is a gradient, but on some of the longer pages it doesn't go all the way to the bottom. You can see what I mean if you go to Stories2.html

Appreciate any help. Wayne

Edited September 7, 2009 by wayne

[falkencreative]

You could try making the background fixed, rather than scroll with the page... Otherwise, yes, the background won't go all the way to the bottom of the page.

 

In order to make the background fixed, change:

 

background:#787575 url(laimages/gradient5.jpg) repeat-x top;}

 

to

 

background:#787575 url(laimages/gradient5.jpg) repeat-x top fixed;}

[Andrea]

Your link above doesn't really work, but I found your temp page at http://www.imaginetheeverglades.com/temporary/2009CSSwebsite/index2.html

 

The best way to handle a gradient background is to set the background color in the color the gradient ends.

 

The black text on the dark background is VERY hard to read.

 

On the gallary page, you have 2 body tags, a

right after the first body tag, and the thumbnails aren't evenly distributed.

 

On the 'About' page, the last word is missing.

 

On the facts and fiction page, the blue links don't fit into the color scheme, neither do the purple 'visited' links, plus, the purple is also very hard to see on the dark background.

[wayne]

Wow, that was an easy fix.

 

I've got another hurdle with this rebuild - a shopping cart. In my existing site the cart is built into the Jalbum gallery. For this one I'd like to put "Add to Cart" and "View Cart" on each large image page using my Paypal account. From reading the PP site it looks like their recommendation is to use Javascript, which I don't have any knowledge of. I wonder if someone would steer me in the right direction for building a cart, or using the proper Paypal template.