New Portfolio Website

My new portfolio website has been released just in the nick of time to see the end of 2007. URL below:

http://www.waynehunt.whinternet.co.uk

Setting a resizable height

Within your CSS for a wrapper divide instead of using the following syntax:

height: 800px;

Use the following:

overflow: auto;

This will allow the page to resize automatically when text is added. You can add also add in a height which will act as a minimum however you need to create an IE6 hack which reads the height as min-height.

For more info in IE6 hacks read this blog entry

The 20 Golden Rules of Great Design

An interesting, well thought out article on important points to consider when attempting to design by Muan Thang. Well worth a read:

http://www.sitepoint.com/article/golden-rules-great-design

Creating a page curl in Photoshop

Tutorial for creating a page turning over effect on your pictures:

http://veerle.duoh.com/blog/comments/creating_a_page_curl_in_photoshop/

Webmaster Essentials Checklist

Really useful page with lists a lot of handy links for checking your site through validation (both CSS and HTML) and also cross browser compatibility.

http://www.prelovac.com/vladimir/webmaster-essentials-checklist

One of the best links on there was the one to Clean CSS, which I have added to the quick links to the right and is also below:

http://www.cleancss.com/

First Child pseudo-class

A useful tool to add to your CSS code. By using the :first-child statement you can affect the first element contained within another.

As a working example I used thit to create a menu where I wanted border-right: 1px solid #FFFFFF; but also wanted a left border on the opening menu item only. By using the first:child statement you can affect only the opening element. The code works like this:

#navMenu li:first-child {
border-left: 1px solid #FFFFFF;
}

Simply apply this after the exising style for #navMenu li and you have the required result.

Full details on this pseudo-class and other tips can be found at:
http://meyerweb.com/eric/articles/webrev/200007b.html

Stuck For Inspiration?

Check out the below link for some cool sites to take some inspiration from.

You can search by colour, design or type of site:

http://www.designmeltdown.com

Browser Tests and Compatibility Issues

More interesting articles from the people at Smashing Magazine about browser popularity, useful links to download multiple versions of each one (the IE link is also featured on this blog) and some interesting research has been done into visitor habits with their browsers....

http://www.smashingmagazine.com/2007/10/02/browser-tests-services-and-compatibility-test-suites

Enjoy....

Sexy Modern Fonts

Good site for downloading and viewing popular Web 2.0 fonts

http://www.modernlifeisrubbish.co.uk/article/great-fonts-for-web-2.0

I haven't looked through them all so dunno which one's are free to download and which ones require a donation but check 'em out anyway.

Rainlendar - A customizable desktop calendar

A useful application for keeping track of daily tasks, meetings, birthdays etc, if you are like me and easily forget them unless they happen to be right in your face!

http://www.rainlendar.net/cms/index.php

There are 2 versions - Lite (free) and Pro (15 euros). The Lite version will do the job sufficiently and it also comes with different skins as well.

Free Download - Ruby On Rails

The kind folks at SitePoint are offering a free download of Patrick Lenz's 'Build Your Own Ruby On Rails Web Applications' in PDF format.

http://www.sitepoint.com/books/rails1/freebook.php

This is only available for a 60 day period and expires on 30th November 2007.

n.b. Please note this is a complete book and as such includes the download of a 20mb file.... so be patient!

Two Other Useful Blog Sites

On a similar kind of theme to this one, there are 2 other blogs for you to pick up useful tips from:

http://bytemedesign.blogspot.com - Russell Harman
http://grevsterstudios.blogspot.com - Robert Greville

New Link Added - Design Site

Good site for design techniques and useful tips for logo design, colours and font styles.

http://www.bamagazine.com

It's been added to the links list.

JavaScript Stylesheet Switcher

Tutorial for using alternate stylesheets on the same site. Useful for when you need to revert to different stylesheets to increase text size for compatibility or to swap colours at the click of a button:

http://www.alistapart.com/stories/alternate/

The tutorial goes through the JavaScript code to insert into the head tags, the HTML code to switch the stylesheets and also the external .js file you will need to download which includes the cookie (so that the change works sitewide when you navigate away from the page you were currently on).

Installing Multiple Versions of IE

Great install for downloading standalone versions of Internet Explorer:

http://tredosoft.com/Multiple_IE

Versions included (select/deselect which versions you want/don't want) with install):

v3.0
v4.01
v5.01
v5.5
v6.0

New Link Added

A useful link for any CSS problems.

The CSS Crib Sheet:
"You will no doubt come across many quirky layout issues when building a site with CSS. You'll end up banging your head against a wall time and again. This is an attempt to make the design process easier, and provide a quick reference to check when you run into trouble."

http://www.mezzoblue.com/css/cribsheet

Using CSS with Internet Explorer

We've all been there. Firefox loves it, Opera can't get enough of it, even Safari seems keen on it, but Internet Explorer doesn't want to know.

Here are some useful tips/hacks on how to write CSS rules so that only Internet Explorer can read them (and other browsers will ignore)

Conditional Comments
A conditional comment can be added to the head of your page that only IE will read. It should be put into the HTML like this:

{!--[if condition]}
(HTML to use if condition is true)
{![endif]--}

To use this in a working example it could look like the following:

{!--[if IE 5]}
{p}This message is only displayed in IE5.{/p}
{![endif]--}

In all examples replace } with > and { with < for the HTML to work.

Hacks
You can also write hacks into your stylesheet that only IE will read by using *html. A working example would be

* html body {
write your changes in here;
}

It can also work with id (#) and class (.) selectors by the following:

* html #idSelector {
write your changes in here;
}

* html .classSelector {
write your changes in here;
}

So although Microsoft may think they've got us by the short and curlys, there's plenty out there to get round them!

CSS Drop Down Menu

An awesome tutorial on how to design a CSS drown down/flyout menu for both horizontal and vertical menus.

This works in all major browsers (yes even IE6!) using an external .htc file to create the drop downs/flyouts. IE6 hacks are added so that the poor little browser can cope with the big bad mean CSS!

http://www.tanfa.co.uk/css/examples/menu/

Give it a try.....

Welcome to the blog!

Right - ever spent hours designing a website and trying to find the all important answer the question thats been bugging you all night.

This blog brings together all those resources, tip and techniques into one place.... here!

Have a look around and see if there is anything useful. Feel free to add your own posts and comments.