Css on WELLINGTON ROAD Pictures

Step 3: Layout site

Sun, 01 Aug 2010 19:37:57 +0000

With Jillion off in the distance, I decided to work on the site layout as compared to determining my video playback scheme.

The site looks very similar to the original site. I made some changes such as the WELLINGTON ROAD Pictures graphic, font colors and spacing. What was interesting was I have yet to use an ID or Class. Everything works semantically, when I need to reference an element, I use the a descendent selector i.e. “nav li” as compared to a “div class=nav and li class=navli”. It is a much simpler way to develop CSS.

Step 2b: Video (continued)

Mon, 26 Jul 2010 15:38:40 +0000

First, I need to make a comment as to how I manage the site content. I use a database and PHP to manage the content. This allows me to keep the number of pages to a minimum and adding content is absurdly easy. That said, I’m building this HTML5 site using static content. Once I determine how to create my desired HTML5 site, its somewhat child’s play to convert it into a dynamic site.

Step 2: Figure out video

Sun, 25 Jul 2010 23:43:39 +0000

HTML5 holds great promise for video playback. Gone will be the days of embedded objects, plugins and (hopefully) Flash. The issue we still face are browser codec compatibilities; such as Firefox wants to see Ogg Theora and Safari wants h.264.

My next step is to explore video playback within one of the articles. I’ll start with Safari usingÂ onlyÂ the video tag then explore other fallback alternatives for other browsers. I believe this will require multiple sub-steps hence Step 2a, 2b, 2c and so on.

Step 1: Keep Design and Gray box it

Sun, 25 Jul 2010 15:08:34 +0000

Following a technique advocated in “transcending CSS by Andy Clarke”, I’ve taken the current design and ‘gray boxed it". Â (I want to point out that my goal is to learn HTML5/CSS3, not to create a wholly new design). Â I simplified the site to its simplest elements:

From the graphic, you can see its a very simple layout; navigation, header, Â rows of three articles and a footer. Each article has a title(h1), a comment(p) and notes(aside).

Wish me luck...

Sat, 24 Jul 2010 23:30:10 +0000

I’m off to redo my film site using HTML5 and CSS3. As I stated some time ago, I’ve been interested in the two technologies for some time. Little things like CSS shadows are very nice and semantic elements like article, aside and nav certainly contribute to a site better than div, div and div.

I’ve two books on HTML5; HTML5 for Web Designers/Jeremy Keith and HTML5/Bruce Lawson and Remy Sharp. Both are excellent for providing an understanding of the why along with the how.

Almost there!

Mon, 11 May 2009 17:37:25 +0000

A few more tweaks made late last night!

I still have some image line-up issues but my new site is ready to go. It isn’t dramatically different than last years model but its no longer a TABLE! Woot!

OK, its not that big of a deal but it no longer nags me as I lay awake at night…

New version and Old Version.

Next up? The remaining pages, new look and new text!

I did it!*

Mon, 11 May 2009 02:31:10 +0000

OK, I committed to do a lot this weekend, clean the garage, create and document my Mom’s blog and change my layout from tables-based to CSS.

I did it all! Woohoo! *Well, I’m still working on my site but it is 95% complete!

OK, little things first. A lot of work, sweat and dirt and I can now park my car in the garage. So I moved all of the stuff from the front of the garage to the back, so what? Parking my car in the garage is sweet!

I've got a problem

Fri, 08 May 2009 02:58:12 +0000

I’ve had it for several years. My Wellington Road Pictures site uses a table for formatting.

I know, I know its wrong, wrong, wrong but hey, it validates!

I’ve tried a couple of times to clean it up but I’m not so much on Web design.

Every six months or so, I’ll find inspiration. Today, while trying to figure out how I’m going to use CSS Animations (I am starting to think its the millennium’s version of Blink), I ran across more inspiration.

This I gotta try...

Thu, 07 May 2009 03:16:36 +0000

CSS Animations.

It sounds neat and it doesn’t sound like “blinking cursor”. It sounds useful, like rounded corners.

I’ve got some time this weekend…. mmmmm.

If you use Safari 4, stay tuned.

I love it!

Sat, 02 May 2009 17:32:27 +0000

So I wanted to add a picture to my header… not a problem. BUT! Now the picture and my blog title were in conflict. Because the header photo was half dark and half light, any title color would look great on one side but not the other. Sigh.

Here’s where it got fun!

Using Safari 4’s Develop menu (enable using the Advanced Tab in Preferences), I used the Web Inspector to see if I could drop the title to just under the photo, oops, move it to the right, and make sure the Search widget lines up at the bottom, change the color, FINIS!