17 July 2009

position:fixed

Well well, I have learnt something new this morning. I think this new thing comes under the category of "how did I not already know this" but equally there is always the category of "kill IE6, please!".

I suspect that had IE6 dies off a good few years ago, I would already know this new technique as it is not supported in IE6. But I am very much of the opinion that we no longer need to support IE6 perfectly. I do not want to go into detail about browser support, I have spoken often enough about my thoughts on the matter.

So, onto the interesting part. Have you ever wanted to create a layout with an element which has a height of 100% minus some pixels? Or an equivalent for the width of an element? I know that I have on many occasions. Each time, I have had to either accept it cant be done or utilise some seemingly clever JavaScript to achieve my goal.

But, no more! position:fixed can now be our saviour. Picture the situation where you have a two column layout with your navigation in the left column and content in the right column. You want the left column to have a solid background colour and be 100% in height but leave a 50 pixel space at the top of the column. You might use the following markup:

<!DOCTYPE html>
<html>
<body>
 
<div id="LeftNavigation">
    <ul>
        ....a series of links
    </ul>
</div>
 
<div id="Content">
    ....some content
</div>
 
</body>
</html>


Now if you apply the following CSS:

#LeftNavigation {
    position:fixed;
    top:50px;
    bottom:0;
    background:#cccccc;
    overflow:scroll;
}
#Content {
    margin-left:310px;
}


You should see things exactly as I described above. The key styles are on the LeftNavigation DIV, the position, top and bottom styles. You should be aware that this is not supported in IE6 but I have found it works in all the browsers I have tried.

If this is also new to you, have a little play - it has certainly brightened my day!

3 July 2009

Jamesnorton.com

I have launched my all new website at http://www.jamesnorton.com.

I wanted to get something out there to represent me and who I am and what I do, but the site is not complete. It will move forwards and change and be enhanced over time.

One thing you can all help me with is a potential Webkit bug particularly prevalent in Chrome but also an issue in Safari which I just cannot get to the bottom of. If you view the site in a Webkit browser and you get weird large white patches at the bottom of the screen, please do reply to this post with details of which browser you are using.

Otherwise, enjoy the site and feel free to provide any feedback you like.

Macro to micro blogging

You will obviously have noticed the quiet on this blog over the past 6 weeks.

Yes, its true, I have moved most of my activity onto Twitter now.

I have neglected my blog. I have found that I have a little less to say on here than I would like because I now only talk in units of 140 characters! I would encourage you to follow me on Twitter and that way you wont miss out!

I will endeavour to make more updates to my blog, but I will always keep updating Twitter...