Kimler Sidebar Menu

Kimler Adventure Pages: Journal Entries

random top 40

eBay ebay Pure-CSS Photo Gallery

August 6th, 2010  · stk

What's more fun for a developer than to show up a huge online company like eBay? How about getting PAID to do it! Here's the write-up from my one, fun summertime web project - a pure CSS eBay photo gallery. (Oh and just for grins, it's displayed in another "Arti-zine" web design). I miss having time to write more blog articles!!

This summer, I have concentrated on work around the house and property (living the real life, as opposed to a virtual life). It keeps my wife happy(er), but it means a lot fewer web projects and contributions to this website.

One of the web projects that I did take on, however, was a fun one. A British web developer and programmer, had a client that wanted a photo gallery "like the eBay photo gallery" for his online auction site. The rub? They wanted a pure-CSS version.

Because it's fun to show a well-known online powerhouse how the web should work - and because there was development funding - I dived into the project enthusiastically. (Ahem - only after my daily, real life chores were complete).

The result - A pure CSS photo gallery that looks identical to the eBay gallery and which has significant improvements:

  • It's completely accessible,
  • doesn't rely on JavaScript,
  • is cross-browser compatible and
  • contains error-free, web-standard XHTML and CSS code.

In short - it rocks!

eBay Pure-CSS Photo Gallery Demo

(Permalink)
Views: 21035 views
5 Comments · GuestBook
default pin-it button
Updated: 9-Aug-2010
Web View Count: 21035 viewsLast Web Update: 9-Aug-2010

Beautify a Resource List

May 21st, 2009  · stk

Sometimes we include a list of "additional information" links at the end of our articles. Generally, they've been styled on the fly, but we thought it was high time to spend a bit of attention on this detail. The resulting CSS-styled ordered list looks nice, includes a block hover effect, a "visited" status indicator and is XHTML/CSS valid. We thought people might like to use it on their website, so included a tutorial and ZIP file.

Adding Pizazz to an Ordered List

A lot of online articles include, at the end of the article, a list of "additional resources" - or links - for further reading and research. Several Randsco articles have such a list, but styling them is generally an afterthought, because most of the energy goes into the article itself.

Ideally, additional information links would be contained in an ordered list. It's semantically correct and allows visitors to reference a particular link by number. Unfortunately, we don't always follow our own advice and some of these links are held in simple paragraphs which may, or may not, be numbered.

We thought it was about time that we come up with a proper "additional information" list. By melding together some existing design ideas and adding our own CSS touches, we have constructed an ordered list that not only looks nice, but also includes a number of other features: a hip CSS roll-over effect; compatibility with fixed-width or liquid layouts; toggle-able ":visited" link status images; pure CSS (no JavaScript, AJAX or jQuery); and it's cross-browser friendly.

Have a look at the demo page and read on to get the ZIP file, learn about the design, look at the code and see the live example.

Styling an Ordered List

(Permalink)
Views: 35624 views
4 Comments · GuestBook
default pin-it button
Updated: 25-May-2009
Web View Count: 35624 viewsLast Web Update: 25-May-2009

MIME talk

September 28th, 2008  · stk

Article updated with new information from the W3C - July 2009

I've advocated for XHTML and CSS, thinking it was the future of the web. I'm no longer convinced of this. We've decided to go back to well-formed tag soup XHTML after realizing the price for serving the "application/xhtml+xml" MIME type wasn't worth the cost. Find out why

mimeBack to XHTML v1.0 Strict and text/html
In other words: "Well-formed Tag Soup"

Since late 2005, we've been serving our pages as XHTML v1.1, using the application/xhtml+xml MIME type for those browsers - notably FireFox, Opera & Safari - that understand it. (To do this, we used server-side scripting to set the MIME type in the header. For more about the technique, read this 2005 article - "Are You Serving XHTML with the Wrong MIME Type?")

XHTML v1.1 has only negligible coding changes from XHTML v1.0 strict. However, unlike XHTML v1.0, its supposed to be served as an XML document (hence the MIME type). So what? Well, serving XML-based web documents (XHTML v1.1 as application/xhtml+xml) comes at a huge price and we're tired of paying it (and our readers are too - *cough* most notably ¥åßßå).

Originally, we viewed XHTML v1.0 as predecessor of HTML, since it was standard-based and eliminated the problems of proprietary tags and sloppy coding. We blindly migrated to XHTML v1.1, thinking we were further future-proofing our pages. HA!

The future direction of the web (XHTML and HTML) is muddled. Consider: HTML isn't being phased out; developers of browsers such as FireFox, Opera and Safari are lobbying for (and developing) HTML 5; the W3C has renewed the HTML working group; and the Chief Technical Officer of Opera says, "I don't think XHTML is a realistic option for the masses. HTML 5 is it." [sources]

To find out what price our readers will no longer have to pay, and more about XHTML v2.0 and HTML 5 ... read on

Read full story...

(Permalink)
Views: 12227 views
Leave a Comment · GuestBook
default pin-it button
Updated: 27-Jul-2009
Web View Count: 12227 viewsLast Web Update: 27-Jul-2009
Filed in:CSS
Web Dev·XHTML

PZ3 Inside IE Tables

February 25th, 2008  · stk

Photo-Caption Zoom images have been problematic in IE tables. It's yet another failure of IE6 and IE7. However, I've spent some time and made a work-a-round that yields good cross-browser results (and overcomes the IE tables problem). Have a look -

Photo-Caption Zoom Inside an Internet Explorer Table

You like Photo-caption Zoom. You've finally found a valid, pure-CSS, easy-to-use technique that shows both a thumbnail and zoom-able detailed image (along with a caption), without your visitor having to leave a page or suffer through another pop-up window. You deploy it inside of a table and suddenly, when you view it in Internet Explorer, it doesn't work right.

I've received many emails and comments from people about Photo-caption Zoom not working inside an IE table. Up until now, the only "solution" was to say, "don't use tables", quickly followed by "Internet Explorer sucks". (I had one desperate client for whom I "welded-on" a series of Photo-zoom DIVs to the edge of a table. It was my first stab at a work-a-round and it worked fine, until the font size was changed).

While it's comforting to me that the problem isn't the Photo-caption Zoom code (it's an Internet Explorer problem), this isn't much solace for anyone wanting to use it. What's a person to do?

A Solution to the Internet Explorer Table Problem

I recently had a play with Photo-zoom inside of tables. I was able to isolate the Internet Explorer problem and find a work-a-round. It side-steps the IE tables problem and also works in other browsers. Have a look.

The table below contains Photo-caption Zoom images. It works in both IE6 and IE7 (as well as Opera9, Netscape9 and Firefox2). Yay! Finally - a way to use PZ3 inside tables.

Product Description Price Avail

ThermalTake TMG A1 CPU Fan

35.14 CFM max flow at speeds between 300-2,500 RPM. Quiet, reliable cooling.

The TMG A1 uses a frameless fan design that virtually eliminates noise-producing turbulance. Runs quiet at 16 dBA. Supports AMD PWM FSC specs.

$49.99

In-stock

Thermaltake Silent Case Fan (White)

63.3 CPM at 1600 RPM. This DC, 120mm case fan is very quiet (16 dBA).

Count on Thermaltake to make the worlds best cooling products. The Silent CAT fan is an intelligent choice. It runs quiet and is affordable.

$9.99

In-stock

To learn more about the Internet Explorer tables problem and work-a-round, read on ...

Read full story...

(Permalink)
Views: 9075 views
6 Comments · GuestBook
default pin-it button
Updated: 25-Feb-2008
Web View Count: 9075 viewsLast Web Update: 25-Feb-2008
Filed in:CSS
Web Dev·XHTML·The Web

Rockin' da Sidebah

December 22nd, 2007  · stk

Merry Christmas! How about a pure CSS technique to finish out 2007? Introducing "pop-Info" boxes, an XHTML/CSS-valid method of popping up sidebar information. It's cross browser compatible, written to standards and doesn't require any javascripting. (There's even a click-only version - same deal). Have a peek!

flower background pop-Info - (A CSS Technique for Popping Information)

popInfopopInfo jack-in-the-box

AFAIK everyone likes the <acronym> tag. Hey, it provides a nifty way to expand an acronym (or abbreviation ... or other abuses) into "more information". This detail shows in a tool-tip, when you move your mouse over it. Nice.

Normal Sidebar

This is an example of a sidebar (a short, often boxed, auxiliary news story that is printed alongside a longer article). It often contains additional, contrasting or late-breaking news.

On a web page, the sidebar breaks up the flow of the main article and takes up page real-estate. Why not have it display like an acronym (hidden ... until the visitor decides they want to see it)?

I expanded on the idea, using an info class with a <span> tag, to provide more information on a concept or word. Cool.

Unfortunately, it's limited to a short amount of text.

What if you want to include more information about some detail of the main article? What if you want to include an image? What do you do then?

In journalistic jargon, we've now entered the realm of the sidebar. A sidebar is a short news story, containing supplementary information, which is shown alongside the feature story, often in a box. It's similar to a pull-quote or callout.

What if a sidebar could display like an acronym, in some type of a tool-tip-type hover? Hmmm. After playing a bit with photo-caption zoom figure numbers, I got the idea that such an idea might be achievable. It is! Have a look at a popInfo Sidebar box "PopInfo"  Sidebar BOOM! A popping sidebar! Centered for liquid layouts, it can pop anywhere for fixed-width layouts. popInfo css toy Add images and other styling. It's XHTML & CSS-valid, cross-browser compatible (IE6, IE7, Opera, Netscape, FireFox, Safari) & we think it's a cool way of displaying "more information", saving page real estate and amping page SEO. .

For more popInfo examples, a click-version, the CSS and XHTML code, as well as a discussion on the method ... sally forth ...

Read full story...

(Permalink)
Views: 17790 views
9 Comments · GuestBook
default pin-it button
Updated: 3-Feb-2008
Web View Count: 17790 viewsLast Web Update: 3-Feb-2008