Simon Jessey has nicely redesigned si-blog and included a few neat CSS tricks along the way. To get the full benefit, you’ll need to use a browser that supports position:fixed (so not IE/Win then). Scroll his page and you’ll see the left hand nav stay put. Also notice on the right hand side, that the logo slides over the top banner, but the text disappears underneath. This is cleverly, but simply achieved by setting z-indices for the respective elements.
h1 { /* the banner */
position: fixed;
z-index: 100;
}
h2.blog { /* the logo */
z-index: 101;
}The banner (an H1 with a background image) is fixed in position and given a z-index of 100. This allows the page text to slide underneath it (you can think of text having a default z-index of 0). The logo (an H2 with a background image) is given an z-index of 101 so that it will appear on top of the banner. As the logo’s position is not fixed, it will scroll with the rest of the text.
Another neat trick with the si-blog logo is to use a child selector to feed IE/Win with a gif, while better browsers get fed a nice alpha-transparent png which anti-aliases properly against its background (check that scroll once more). Here’s the code Simon used to achieve this:
h2.blog {
background: url('si-blog.gif') no-repeat;
}
body>h2.blog { /* IE/Win doesn't understand the > selector */
background: url('si-blog.png') no-repeat;
}My only gripe with Simon’s design is it’s very hard for me to pick out links in the text – to my eyes the colours are very similar. To be accessible to colour blind users such as myself, Simon needs to make the difference between text and links much more distinct, and preferably add some other distinguishing feature such as underlining or emboldening.
Update: si-blog links are now bold.
Web standards · Accessibility · Design thinking
Simon Jessey wrote:
I’ve made the links bolder, and I’ve solved the permalink problem by confining the position:fixed behavior of the banner to the main index page. The archive (which is where the permalinks point to, of course) no longer has that behavior.
jin wrote:
I’m a complete idiot when it comes to computers. How do you put in a simple wall paper background for a blog? thanks!