Jump to content

Rebuild Website


wayne

Recommended Posts

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

 

dawnatthehammockthumb.jpg

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;

 

 

}

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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 by virtual
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 by wayne
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 by wayne
Link to comment
Share on other sites

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;}

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...