Please visit my new campsite listing site ukcampingmap.co.uk

Posts Tagged ‘css’

Newer Entries »

CSS file layout

Monday, February 9th, 2009

Every now and then I come across and article where some CSS guru outlines how they structure their stylesheets (main layout elements at the top, all headings together etc.), but I don’t think I’ve ever read any discussion on how to layout the individual elements.

Recently at work somebody, probably thinking they were being helpful, put all my stylesheet selectors in this sort of format

h1
{
   font-size: 2em;
   color: #000088;
}

whereas I much prefer it like this:

h1 {font-size: 2em; color: #000088;}

The reason being that when I’m scanning through a css file I’m generally looking for elements, classes and other selectors, not individual rules. Having each line begining with a selector aids easy scanning. Breaking each selectors rules up into individual lines increases the amount of scrolling you need to do by probaly at least a factor of 5, and decreases the number opf selectors you can see at once – both leading to a lot of time wasted searching for the selector you need to edit.

But everybody apart from me seems to default to the split up style. As far as I can see it’s because in programming a ‘{‘ generally means the potential of nested loops and conditionals, so you need to emphasise the curly bravcket’s depth in the stack. But CSS hardly ever (except for some hacks… which I don’t use) goes beyond one level of curly brackets. So why insist on laying it out that way?

Tags: , , ,
Posted in css | No Comments »

Animated navigation effect… without javascript or flash!

Monday, July 28th, 2008

I can make a ball bounce up and down in flash, and that’s about it. And my javascript is rapidly improving, but still leaves a lot to be desired, but simple animation effects using flash or javascript can really enhance a design.

For example, one of my favourite site-designs, http://www.futurelab.org.uk/ (I love the classy, formal look, aimed at senior teachers, but also with splashes of colour and animation to suggest innovation and fun), uses flash to create a subtle bouncing navigation effect.

So what’s a boy to do?

A week or so ago Sitepoint published a cute little tutorial on how to make surprising animations react to browser resizing… and the magic of it was that it only used a gif and a jpeg to achieve this. Inspired by this, I decided to make the futurelab navigation using just animated gifs, and the results are pretty good I reckon. And it only needs a couple of 1 pixel wide gifs per navigation item – less than 1kb in total. (I also only learned how to make animated gifs in photoshop this afternoon, using this tutorial).

A note of caution: my navigation items are all the same colour, so you’d think I could use the same gifs for each item… but not so. Something to do with how firefox renders animated gifs means it doesn’t animate the hover-off image if it’s used on another navigation item too. The solution is simple: make a few copies of the hover-off gif with different names.

Tags: , , , , , ,
Posted in Web development, css, layout, usability | No Comments »

Elegant 2 column layout

Thursday, June 12th, 2008

Based on a design developed by snook.ca (a great web design site), which creates a 2-column layout with the page elements in a sensible, semantic order in the source, I’ve come up with this variant, which is pretty much the same, but allows for more flexibility in header design. Seems to work ok in safari, firefox and ie all the way back to v5.01. See it in action.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Untitled Page</title>
<html>
<title>Efficient 2 column layout</title>

<style>

.wrapper {width:600px; height: 50em;background:lime;position:relative;}
.main {width:500px; float:right;height: 40em;background:red;}
.header{width:600px;position:absolute;height:5em;background:teal;top:0; left:0;}
.content {width:500px;height:40em;background:green;position:absolute; top:5em;}
.nav {width:100px; float:left; height: 40em; background:black; margin-top:5em;}
.footer {width:600px; clear:both;height:5em;background:cyan;}
</style>
</head>
<body>
<div class="wrapper">
	<div class="main">
		<div class="header">
		</div>
		<div class="content">
		</div>
	</div>
	<div class="nav">
	</div>
	<div class="footer">
	</div>
</div>

</body>
</html>

Tags: , , ,
Posted in Web development, css, layout | No Comments »

Newer Entries »