I am in the mid­dle of redesign­ing an image gallery and I want­ed to cre­ate a nav­i­ga­tion­al tool to make brows­ing the images eas­i­er. Until now, it was sim­ply a pop-up win­dow with hard cod­ed next and pre­vi­ous but­tons.

I start­ed by cre­at­ing a Cold­Fu­sion page that would pull the coun­try val­ue and pic­ture num­ber val­ue from the URL.

display.cfm?location=Malaysia&pic=5

Then I cre­at­ed some Cold­Fu­sion code to check the length of the direc­to­ry where the pho­tos of that coun­try were stored and use that and the pic­ture num­ber to deter­mine where the next and pre­vi­ous links would point.

The Cold­Fu­sion was the easy part. But I want­ed some­thing more non-lin­ear.

While I was brows­ing for pho­tos in Win­dows Explor­er I noticed the hor­i­zon­tal scroller they use that con­tains thumb­nails. I had seen this tech­nique on oth­er web­sites, and I want­ed to use it on mine.

Here is what I start­ed with for CSS:

div#imgnav
{
height : 150px;
overflow : auto;
width : 440px;
}

The prob­lem I had, how­ev­er, is that the images kept wrap­ping onto the next line when the total width was more than 440 pix­els.

That’s when Richard York remind­ed me about the white-space prop­er­ty. I added it like so and it worked like a charm.

div#imgnav
{
height : 150px;
overflow : auto;
white-space : nowrap;
width : 440px;
}

A lit­tle more padding and touch up and it was per­fect.

About Kim Siever

I am a copy­writer and copy­ed­i­tor. I blog on writ­ing tips most­ly, but I some­times throw in my thoughts about run­ning a small busi­ness.

Fol­low me on Twit­ter at @hotpepper.

Free monthlywriting &social media tips!

Free monthlywriting &social media tips!

Sign up to receive monthly writing and social media tips.

Thanks for signing up for our monthly writing tips!

Pin It on Pinterest