WH Internet

Lightbox

2008-11-29T19:03:00.001Z

I'm sure we've all seen the lightbox photo effect, however until now I've never had the opportunity/need to use it, and having implemented I must say it must be one of the easiest things to make work - and the final result is stunning.

Official Site - http://www.lokeshdhakar.com/projects/lightbox2/

Header 1 tags with a background image

2008-11-13T19:57:00.002Z

Useful to remember if you wish your h1 tags to actually be your logo. Can be created using simple CSS as shown below (below example also makes the logo a clickable link back to the homepage):

h1 a {
display: block;
text-indent: -9999px;
width: 538px;
height: 88px;
background: url(../images/logo.jpg) no-repeat left;
outline: none;
}

The first link of the CSS code is display: block - this displays the link as a block using the dimensions you specify later.
text-indent: -9999px - this will allow you to write your header copy (for SEO and for browsers not using CSS) without it being seen ordinarily.
width: 538px - typically the width of your logo image
height: 88px - typically the height of your logo image
background: - A link to your image with the specification that it doesn't repeat (you should have no problems with it repeating anyway due to the dimensions matching that of the image - however its best to use this anyway.
outline: none - when this is clicked on as a link there wont be a faint line around the edge of it (as there normally is by default in Firefox.

Create a tab layout using CSS/HTML and JQuery

2008-07-23T11:32:00.001+01:00

Good tutorial for creating a slick tab driven layout using CSS, HTML and JavaScript (JQuery):

http://nettuts.com/html-css...

New Browser Releases

2008-06-20T00:49:00.003+01:00

It's been a busy few months for the browser companies. First we had the release of Opera 9.5 which came out to rave reviews after it did so well in the ACID3 test. Then hot on its heels was the eagerly awaiting release of Firefox 3. It was estimated that there were well over 8 million downloads of the popular Mozilla web browser on the first day alone!! Some of the add-ons may not yet be compatible with v3 but the developers are hurrying their way to ensuring that this doesn't stay this way.

You can download them both for yourself below:

> Firefox 3.0
> Opera 9.5

With Microsoft set to follow this with the release of Internet Explorer 8 sometime late 2008 the browser war is really hotting up. Hopefully Microsoft have finally listened to web developers across the globe and IE8 will be their most successful release yet...!

Graphic Design Inspiration

2008-05-29T09:05:00.001+01:00

Awesome site with some amazing pictures and graphics on it. If you like what you see and want to try it yourself there is also some tutorials to go through:

http://abduzeedo.com/

Firefox 3 Release Candidate 1

2008-05-23T10:12:00.002+01:00

Mozilla have publicly announced the arrival of Firefox 3 Release Candidate 1 - which should hopefully mean that the final release should only be about a month away!

The new release has received good reviews and you can download it yourself on the following link:

http://www.mozilla.com/en-US/firefox/all-rc.html

Be aware - This will overwrite your current version of Firefox, so if you aren't ready to make the move to v3 just yet... think twice before downloading it!

SitePoint book giveaway - The Photoshop Anthology: 101 Web Design Tips, Tricks & Techniques

2008-05-23T10:07:00.002+01:00

The folks at Sitepoint are very generously giving away free PDF copies of their popular book - The Photoshop Anthology: 101 Web Design Tips, Tricks & Techniques.

This offer expires on Friday 13th June 2008 so make sure you download your copy before then:

Download link

IE6 Randomly Repeating Text

2008-04-24T22:48:00.002+01:00

Ever had the issue whereby IE6 is randomly repeating the last few letters of text outside of its containing divide? Well I had that problem this evening... very infuriating!!

However, before you threaten to uninstall everything Microsoft then get in the car and drive to California to blow up the Microsoft headquarters - take a read of this article which explains the issue and gives a very simple workaround:

http://www.positioniseverything.net/explorer/dup-characters.html

In a nutshell the problem is caused by 2 consecutive divides that are floated in the same direction. The simple workaround is to give the last floated divide to appear in the markup a negative margin on the opposite side (i.e. if you have float:left, use margin-right: -20px; and vice-versa). Since the divides are floating to the other side than that of your margin this won't affect your design.

Simple eh?! Now, get out of the car and back to work!!

Tomorrow's CSS Today: 8 Techniques They Don't Want You To Know

2008-04-11T13:12:00.001+01:00

Good article from Tim Wright on the SitePoint.com website about some handy CSS tricks and exactly what features of CSS3 can and can't be used already:

http://www.sitepoint.com/article/tomorrows-css-today

IE8 Beta - Installation Guide (with Virtual PC)

2008-04-06T14:23:00.003+01:00

Microsoft have now released the first beta of Internet Explorer 8. If you (like me) are keen to try it out, below is a good guide on how to install it correctly using Virtual PC. The benefit of using a Virtual PC to install the new beta is that it won't overwrite any existing IE6 or IE7 versions you currently have on your default machine.

Please bear in mind that the virtual hard disk image (VHD) for IE8 that can be run via Virtual PC will time out in July 2008, at which point you'll need to download an updated image.

Download and install Virtual PC (30.4 MB).
Download and run the IE8 Virtual Hard Disk file here (IE8_VPC.EXE) -- this will auto-extract your VHD to a folder (along with a couple of text files).
Launch Virtual PC and click 'New...' to start the New Virtual Machine Wizard.
Select the second option, 'Use default settings to create a virtual machine' and click 'Next'.
Give your new virtual machine a name -- 'IE8' seems sensible enough -- and hit 'Next'.
Hit 'Finish'. This will automatically create a new directory called 'IE8' (or whatever else you named it) with a new configurations file inside it called 'IE8.vmc'.
A 'Settings' dialog box should now open automatically. 'Select Hard Disk 1', and switch the 'None' radio button to 'Virtual hard disk file:'
Browse and select the VHD file you extracted earlier, then press 'OK'.
Your Virtual PC console should now list a new Virtual Hard Disk. Select it and hit 'Start'.
Voila! After a few seconds you should be have a standalone window running XP and the IE8 beta.

Now all you need to do, is develope away and see what your creations are potentially going to look like in the new Microsoft browser!

Further information about IE8 can be found here.

Smart Firefox Add On

2008-03-10T23:50:00.002Z

Pic Lens is a smart add-on which will turn your screen into a 3D image gallery. The link is below:

http://www.piclens.com/site/firefox/win/

The site detects which browser you are viewing it in and take you to the relevant part of it, therefore the above link is best viewed in Firefox.

To view the results, if you have a Facebook account, install the update, log in to Facebook, pick a photo album and when hovering over the image there will be a small blue arrow in the corner, click on this, sit back... and enjoy!!

Validating Flash Files Using the Satay Method

2008-01-22T22:36:00.001Z

Ever created a Flash file (.swf) and embedded it into your HTML and it fails validation? Most WYSIWYG editors create a lot of unnecessary mark-up that is not needed.

After hours searching the internet for a solution I managed to track down the answer. A lot of sites I visited all pointed toward "The Satay Method". It's fairly straightforward and anyone familiar with Flash should be able to understand it. The link is below:

http://alistapart.com/articles/flashsatay

N.B. One important note. The code at the very end of the article is slightly wrong. There should be a " in the code directly after the following (on the first line):

object type="application/x-shockwave-flash

Don't let that confuse you (as it did to me!!)

Version 2.0 WH Internet Released

2008-01-22T22:33:00.000Z

That's right. It's been a long time coming but in the early hours of this morning the testing and validating of the new version of the WH Internet Ltd website was completed and the site was released for the general public:

http://www.whinternet.co.uk

Have a browse round and let me know what you think.

New Portfolio Website

2007-12-31T16:52:00.000Z

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

2007-12-12T21:45:00.000Z

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

2007-12-04T09:52:00.000Z

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

2007-11-26T22:51:00.000Z

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

2007-11-11T22:34:00.000Z

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

2007-11-06T23:14:00.000Z

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?

2007-10-29T16:04:00.000Z

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

2007-10-18T23:24:00.000+01:00

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

2007-10-18T23:21:00.001+01:00

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

2007-10-18T23:11:00.000+01:00

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

2007-10-05T20:45:00.000+01:00

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

2007-10-02T10:32:00.000+01:00

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

2007-10-01T14:42:00.000+01:00

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

2007-09-27T23:18:00.000+01:00

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

2007-09-25T16:51:00.000+01:00

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

2007-09-22T01:52:00.000+01:00

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

2007-09-14T11:31:00.000+01:00

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

2007-09-14T11:27:00.000+01:00

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!

2007-09-14T10:31:00.000+01:00

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.