jump to navigation

Ahhh, Springtime… May 19, 2011

Posted by flutebrarian in Web Design.
Tags: , , ,
add a comment

Ahhh, Springtime. A time when a girl’s thoughts turn to … golf!

I was recently contacted to create a website for a regional women’s golf club. Since I’m not one who has ever hit a golf ball beyond the mini-putt course, I went into student mode and learned all about handicaps, team play, and standing rules.

But even though I know very little about the game, I enjoy the beauty of the lush grass courses on which the game is played. How about rotating pictures of the various clubs in the league? They liked the idea.

I was thinking in terms of a small rotating gallery done with a JavaScript file I had used several times before. No, they’d rather have a full header for the page fading in and out of the various clubs.

Time to search for a new script.

At first I found a php script that randomly changed the background image every time the page was refreshed or reloaded. This was a snap to put in place – download php, create image directory, put all images and php in this directory, point the CSS file to the script and you’re done. You can add and delete images without having to alter any code in the script, CSS, or HTML.

But it didn’t fade in and out. So back to the drawing board and this time a new JavaScript.

This time, I found an image cross fader from slayeroffice.com. Although it wasn’t as straightforward as the php script, it was much more robust and the images fade in and out quite nicely. And changing the setTimeout value from 1000 to 5000 increased the fading time between images from 1 second to 5 seconds so one doesn’t get dizzy from the changing golf course images.

There are two CSS files and one JavaScript file to download. The images to be used are listed one after another in the HTML file where the fading images are to appear. So, there is more maintenance involved if the images are added or deleted.

But the client likes it, and that’s what counts.

Gallery Complete January 30, 2011

Posted by flutebrarian in Web Design.
Tags: , ,
add a comment

With a little bit of tweaking, the galleries are now complete. Using only CSS techniques for the main hover of the thumbnails and display of the images, one can temporarily view the full-sized image without having to click to another page. If the image is too large to be viewed, a little JavaScript allows the viewer to click on the image and “set” it in the viewing space to scroll up and down to study it.

Not bad.

The only thing I don’t like is that very small originals look mammoth in comparison to really large originals since they are all set for the same width for display on screen. I may play with that some more before all is said and done.

You can see the results of the project at www.flutebrarian.com/mccallum/ and clicking on one of the Paintings buttons or the Prints button. Please note this is the temporary work-in-progress site, not the final site.

Gallery in Progress January 8, 2011

Posted by flutebrarian in Web Design.
Tags: , , ,
add a comment

Progress is being made on the image galleries for artist Steven McCallum’s updated website. Following the detailed tutorial for this technique at “How to Create a Photographic Gallery Using CSS” I have managed to get this far:

Beginning of Painting Gallery

The opening screen of the painting gallery

The thumbnails have moved from the right side of the gallery to the left; the thumbnails are displayed in a scrolling overflow div; the titles and information for the paintings are moved to the top of the large image; and a default image explaining how to view the images has been added to the background of the image viewer.

The next steps include resizing all the files and renaming them to web-friendly formats (no spaces, all lower case).

One final tweak that I will try is to allow clicking on the thumbnails so that one can scroll up and down the screen if the enlarged image is too tall for the screen. This technique was discussed in an online forum on Webdeveloper.com.

Stay tuned!

Creating a Gallery Using CSS January 3, 2011

Posted by flutebrarian in Web Design.
Tags: ,
add a comment

My next project is a website for an artist. He wants to showcase his paintings and prints so I’d like to do this without programming and keeping the number of pages utilized to a minimum. I found this example: How to Create a Photographic Gallery Using CSS which I had successfully used for the Kiwanis site but it will need to be tweaked severely to make it conform to the rest of the newly designed site.

I hope to keep a log here of the process of transforming the look of the original here. Time will tell…

Taking My CSS on the Road September 22, 2008

Posted by flutebrarian in Librarianship, Web Design.
Tags: , , ,
add a comment

Friday, I had the opportunity to present a program on CSS at the Eastern Great Lakes Innovative Users Group meeting. We get a lot of clues on how to code a document and code “cookbooks” are great for a quick fix.

But how much do we really know about how the cascade really works? How do we troubleshoot the font that appears to shrink on the screen? What kinds of tools are available for determining inheritance features?

These were the kinds of things that I covered in the presentation “CSS: Beyond the Code.” If you are interested in troubleshooting tools that you can use in Firefox, check out Janet Stewart’s presentation that preceded mine called “The Web Developer’s Best Friend: Firefox Extensions.” I’ve also created a page that includes the links from the presentation in case you’re interested.

CSS Design Links February 14, 2008

Posted by flutebrarian in Web Design.
Tags: ,
add a comment

http://meyerweb.com/eric/css/edge/popups/demo.html – How to create pop-up rollovers

Back to School! January 23, 2008

Posted by flutebrarian in Web Design.
Tags: , ,
add a comment

Recently I joined IWA (International Webmasters Association) to take advantage of the discounted cost of the offerings of eClasses.org. The class I chose is CSS 2.1 in Depth and it began on Monday.

After seeing the syllabus for the 8 week class, I see I have my work cut out for me! While I’ve been able to use CSS pretty successfully over the past few years, I’m not exactly an expert at all the intricacies nor am I comfortable with all the theory behind what makes it all work.

So, it’s back to school and time to brush up on all those details that I’ve skimmed over in the past.