I am Ad Taylor

CSS

• A fixed position sidebar with scrollable content – all centred!!

  Posted on : Thursday, 23 July, 2009

  Today I got the chance to redesign a site I made for a client sometime ago. I have been having the same problem with it I had back then. The sites aims are to be simple and minimal BUT to have all content broken into individual pages/sections. This lead to some small pages and it looked odd. (Though I thoroughly agree with small and simple approach)

  SO
  I decided I would make a single page site with all content separated down the page but joined together with some pretty graphics and smooth JavaScript. I hit a problem.

  I wanted the navigation to be fixed and on a 960px centred grid, with the navigation sat on the side on the content. I have to admit this got me stumped for a bit, but I figured out this way.

  WARNING: This could be a crappy method.

  Assuming we have 3 DIVs – #wrap,#content and #sidebar the css would be as follows.

  
  
  #wrap {
  	position: relative;
  	width: 960px;
  	margin : 0px auto;
  }
  #sidebar {
  	position : fixed;
  	top : 0px;
  	left : 50%;
  	width : 960px;
  	padding-left : 235px;
  }
  #content {
  	width : 700px;
  }
  
  

  A brief explaination.

  The example all works off the assumption that the #content width is 700px and that we would want a 15px gutter between the elements. So as we are using a percentage to centre the DIV we know where the DIV will be — bang in the middle — and we need to work out how far to push it out. This is done by the simple calculation:

  (700-(960/2))+15 = 235px
  

  Yeah, I know, stupidly obviously simple. Just it had me hanging around for ages trying to solve. Just thought it could help someone else.

• Links

  • http://astuteo.com/slickmap/

  Beautiful site-maps from an unordered list

  Posted on : Thursday, 9 July, 2009

  

  So, everyday it usually takes me close to an hour to wade through my RSS feeds and to be honest it can seem a bit of a chore. But today I remembered why I did it; There are some bloody clever people out there just waiting to share beautiful ideas with anyone who will listen.

  Matt Everson of Astuteo is one of these people. He has created a CSS file (and accompanying images) that style a unordered list into a great looking, easy to use and easy to maintain sitemap. I just ran it through its paces and it seems fairy bug free (though will take some knocking into shape for IE6) and I can’t wait to use it.

  Thanks Matt!

• Links

  • http://twitter.com/iamadtaylor/status/2022722571
  • http://squaregirl.com/blog/2009/6/1/iphone-css.html

  iPhone targeted CSS – An answer to the :hover issue?

  Posted on : Thursday, 18 June, 2009

  I have been worried for some time about how iPhones and other handheld devices can’t use the :hover functions I seem to rely on heavily for idicating links and giving extra information.

  The answer could be over at http://squaregirl.com with just a few lines of CSS:

  @media only screen and (max-device-width: 480px) { 
    body {color:#000;}
  }

  As soon as I have a bit of time I am going to rectify this sites crappy handheld usability.

  Great work!!!

by tag

• wordpress
• textmate
• site-map
• sermon
• progressive-enhancement
• perch
• jquery
• javascript
• iphone
• inspiration
• hover
• firefox
• draplin
• design
• css
• bundle
• browser-sniffing

by date

2010	Feb ( 1 )
	Jan ( 1 )
2009	Sep ( 2 )
	Aug ( 1 )
	Jul ( 4 )
	Jun ( 5 )