« April 2002 | Main | June 2002 »
May 17, 2002
Upgrade to The Gallery
I have upgraded the Gallery software and started to change its appearance to match the rest of the site. Enhancements include a slide show facility within each album so you can site back and enjoy the show!
Posted by Simon at 01:55 AM | Comments (0)
May 14, 2002
Accessibility links with css
Lots of sites use short catchy 'action' terms to entice people into further sections of thier sites. The dreaded 'click here' is the all time classic but 'more', 'read more' and other variations also abound. The alternative is to highlight the actual text that the link comes from - though it is not always clear that there is a link there or that you should follow a link for more info.
It is even worse for screen reader software when confronted by a list of links all saying 'click here' without any explanation of what's on the end of the link.
I have developed, following a suggestion from my work colleague Celia (who got miffed because I didn't mention her in the first draft of this piece! :P ), a simple technique that I hope will allow more usability and accessibility. The following code visually highlights the word 'more' in the sentence but actually all of it is the link, which is apparent when you mouse over it. Screen readers, such as Jaws, pick the whole link up.
The style
a { color: #000000; text-decoration: none}
a:hover { color: #FF0000; text-decoration: underline}
.highlight { color: #FF0000; text-decoration: underline}
The html
<a href="#" title="Read more about accessibility">Read <span class="highlight">more</span> about accessibility</a>.
Posted by Simon at 10:20 AM | Comments (0)
May 13, 2002
Mac Classic OS windows with css!
A couple of Mac sites have complicated tables forming Mac like windows for showing stories. I wanted to try and do this in css alone and reduce the number of graphics as well.
The css is as follows:
#box1 {
border: 1px #000000 solid;
}
#box2 {
border: 1px solid;
border-color: #fffffe #999999 #999999 #fffffe;
}
#box3 {
border: 1px #cccccc solid;
background: url(box3_full_background.gif) no-repeat #cccccc;
color: #000000;
text-align: center;
}
#box4 {
background: url(box3_right.gif) no-repeat #cccccc;
color: #cccccc;
float: right;
}
#box5 {
border: 1px solid;
border-color: #999999 #fffffe #fffffe #999999;
}
#box6 {
border: 1px #000000 solid;
color: #000000;
background: #fffffe;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
font-weight: normal;
text-align: left;
}
5 boxes inside each other with an extra one for the right hand buttons.
Viola. I will have a go at OSX and windows next.
Posted by Simon at 10:18 AM | Comments (0)
May 11, 2002
CSS rollovers - no javascript!
I have seen a couple of examples of css roll over buttons on the web but they changed a simple square block of colour and I wanted something more stylish - more like what you do with graphical javascript rollovers.
I decide the way to do it was to use an image as the background and change it in the style for a:hover and a:visited.
First of all I made 4 graphics. The first was a 15px square transparent gif and the other three were coloured buttons also 15px square.
I then coded a link and included the transparent_15.gif before the links text:
This is a link to another page.
This is the link to the demo page
Notice I have added both a title tag for the link and an alt tag for the image to help with Accessability.
Then I added the css:
a { background-image: url(orangeround_15.gif); background-repeat: no-repeat; background-position: 0px 3px; color: #000000; text-decoration: underline}
a:hover { background-image: url(greenround_15.gif); background-repeat: no-repeat; background-position: 0px 3px; color: #000000} body { font-family: Arial, Helvetica, sans-serif; font-size: 12px}
p { padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px} a:visited { background-image: url(greenroundtick_15.gif); background-repeat: no-repeat; background-position: 0px 3px; color: #000000 }
The orange button appears as the link style background and the transparent gif ensures the text is moved to the right the correct amount. When you mouse over the link the a:hover style comes into play which changes the background to the green button. When you have visited the link and come back the a:visited style shows the green button with tick as a background. You could also add images for a:active if you wished. You could do this without the transparent gif by adding 15px left padding but we can use this technique for links in the middle of a paragraph of text.
Posted by Simon at 10:14 AM | Comments (0)
May 10, 2002
It's a start
Over the past few years I have become more and more engrossed with Cascading Style Sheets and the benefits they offer to the web. This year I have stepped up that interest with an eventual aim of changing all the sites that I run over to css. My mantra now is that the only time I use tables in my code is when I need to display a table of content!
This does mean that the layouts are going to get simpler and while I am at it I intend to make the sites fully accessible and make them Bobby and 508 complient. No small task.
As part of this secion of the site I will be including little snippets of real life css code that I have used, strategy for css and cms driven sites and anything else that is relevant. Links to useful css and accessabilty sites will appear in the menu.
Posted by Simon at 09:46 AM | Comments (0)
May 07, 2002
Leith Hill walk
Pete, Paula's brother and I went down to Leith hill near Dorking on Sunday morning for a five mile walk. It was very misty on the way down - which made the scenery going into Coldharbour all the more dramatic.
The walk up to Leith Hill Tower was hard going for a few minutes but is do-able by all but the very unfit. We had a very welcome cup of tea, cake and fudge at the tea concession in the tower. On route we saw fantastic views of cottages, ponds with swans, waterfalls, rabbits and heard dozens of different birds. One outstanding point is the cricket pitch half way up - highest in Southern England - with the most amazing view.
The local pub - the Plough - in Coldharbour is excellent but got very packed not long after we arrived. The food looked excellent and the range of beers was very good. Recommended for anyone with a couple of spare hours (+ pub lunch).
Posted by Simon at 01:55 AM | Comments (0)
May 03, 2002
Not well :(
I have had a really really sore throat since tuesday and it really hurts and I has kept me away from work. It's feels pratically raw - every time I swallow I am racked in pain. I can just about speak but it even hurts to do that. Looking great for the bank holiday, probably rain as well. :(
Posted by Simon at 10:49 AM | Comments (0)
Microsoft - Hotmail pain...
Just checked my hotmail account - which I only have so that I can use MSN Messenger because certain friends use it rather than ICQ.
MSN are now expiring unused hotmail accounts after 30 days. What a pain! They claim its to save disk space. Hmmm. More likley to ensure that the e-mail addresses they are selling to third parties are good ones - thereby bringing in more income. I have had loads of spam in my hotmail account and yet have never used the address anywhere...
MSN Hotmail account expiration policy
Please be sure to sign in to your MSNŽ Hotmail account every 30 days. If you don't, your account will become inactive, and:
You will lose all e-mails and attachments in your Inbox and other folders
All of your incoming e-mail will be rejected
You will lose all contacts in your Address Book
Unfortunately, this information cannot be recovered.* As a valued Hotmail member, we want to make sure you know that subscribing to MSN Extra Storage exempts you from this account expiration policy. It's the smartest way to prevent the loss of all the important information in your MSN Hotmail account.
Posted by Simon at 06:21 AM | Comments (2)
New look site!
The up side of being unwell is that I have spent this week delving into CSS. What a minefeild! I have used CSS for a longtime now but never for the page layout. The home page now uses my first public stab at it.
I still have to break the home page down into php elements so that the rest of the site can be rebuilt quickly. I may even run parts of the shared code within the CMS so that I can do remote code changes to the whole site quickly... Hmm.
And I have had a brilliant idea about style sheets and a local random varient to drive them - more later! (What?)
I just realised that there is a bug with IE5Mac. Poo. Have to work on that later - only me that looks at the site on a Mac anyway.
Posted by Simon at 01:58 AM | Comments (0)