May 01, 2005

Dynamic Gallery Woes

After a peaceful day walking in the Peak District, I came back refreshed and determined to have a go at adapting one of the dynamic parts of the site, the photo gallery, to the new style. its something I've been meaning to do for a while but keep putting off because of it's relative complexity.

It should have been relatively easy. Add the new CSS and amend the gallery templates to take the new includes. Nothing ever works the way you want it to.Placing the includes files in the main body was a doddle as was adding the new CSS file. Amending the old css file was slightly more difficult because of the common elements, but was finally achieved.

Unfortunately the end result was unusable. the solution was 95% perfect but somewhere there is a misplaced div tag that's springing the gallery content out of its container and wreaking havoc with the sidebars. Examining the css printouts and the php for the main gallery page fails to show any obvious discrepancy. Aaarghhh.

Put everything back the way it was and have a few glasses of red and sleep on it. I'm sure it really simply and I'll find the elusive error tomorrow.

Posted by weaver at 11:01 PM | Comments (0) | TrackBack

April 29, 2005

CSS Compression

A nifty little online tool that compresses CSS files. I found an 8% saving when trying the macla css file.

Posted by weaver at 11:15 PM | Comments (0) | TrackBack

April 19, 2005

Web Standards Solutions

webstand.jpg
Web Standards Solutions by Dan Cederholm is another book on building sites to web standards. There are lots of useful hints and tips and some wonderful code snippets in this book.

This book is probably more accurately aimed at the complete CSS novice and I found its tone just a little patronising in places. The 'quiz questions' that lead to the development of each chapter didn't really do it for me.

Also the black pages separating the chapters are a lame attempt at inducing some feel of style to the book. These are really minor critiscisms of a book that I'd use as an occasional reference.

Not perfect, but a good addition to a growing CSS library - 4/5

Posted by weaver at 11:18 PM | Comments (0)

April 11, 2005

Clearing of floats

I love del icio.us

Last night, I wrestled with a layout problem on a page containing thumbnails from 2 series of old maps. The thumbnail series were in the centre content div and I'd used float:left to position them. The problem that I faced was with the accompanying text that was wrapping around the thumbnails. I scratched my head and couldn't resolve the problem. The page was put aside, unfinished, on my list of things to do.

Checking del.icio.us tonight, a random bookmark threw up an entry by Robert Johansson that solved the problem.

2 lines of CSS were added to the page:

.floatclear {overflow:hidden;}
* html .floatclear { height:1%; }

Wrapping the content areas in a div with class of floatclear produces the exact effect required. Works in both IE & Firefox at varying widths.

Job well done

Posted by weaver at 07:31 PM | Comments (0) | TrackBack

April 10, 2005

Horizontal lists

A vertical list is relatively easy to display using CSS. On one of the page redesigns there was a need for a horizontal list, with each item separated by a small vertical line.

This is the CSS used to create the list:

li.inline {display: inline; padding-left: 3px; padding-right: 7px; border-right: 1px solid #066;}
li.last {display: inline; padding-left: 3px; padding-right: 3px; border-right: 0px;}

The second line, li.last, was used to avoid putting a vertical line after the last element.

This technique was taken from an article published in A List Apart, an excellent reference source for all things CSS.

Posted by weaver at 07:49 PM | Comments (0) | TrackBack

January 11, 2005

Reading Material - CSS

In an attempt to master Cascading Style Sheets(CSS) and as a prelude to making the community site web standards compliant, I'm working my way through 2 wonderful books.

dws100.gif
The first is Designing Web Standards by Jefferey Zeldman. The book helps to demystify some of the fog surrounding CSS and has given me the confidence to try and build my CSS skills.

emocss.jpg
The second book is by Eric Meyer and is entitled Eric Meyer on CSS. The book consists of 13 worked projects which build on different CSS techniques and areas. Its fascinating working through the examples and being able to see instant results. Currently, I've reached the sixth project so just about half way through. Definitely not enough hours in the day!

I bought both books through amazon.co.uk but as I don't yet have an associates account, you'll have to find them for yourself if your interested.

Posted by weaver at 10:51 PM | Comments (0)