Weblogs: Web Standards

Andy Budd's presentation was about walking through a design and creating a stylesheet for that design. Starting with structured HTML markup, and working in an onion-skin fashion from the outside inwards, it gives a useful look into the thought process of a CSS-skilled web designer. Slides available online.

This isn't a session I tried to blog, but, as with Patrick's session I took some hand-written notes on some interesting points.

This was the first presentation I noticed where someone was using a mobile phone to flip through his presentation.

Using line height on horizontal menus

Line height is a useful way of creating enough vertical space when a list is styled like a horizontal menu bar without needing to fiddle around with padding:

 ul li a {
  display: block;
  line-height: 2.1em;
 }

Float float

When all the list items in a list are floated left, the space taken by the containing ul collapses to nothing. Instead of hacking enough padding or margin around the ul to compensate, if the ul is itself floated left the space isn't collapsed:

 #mainNav {
  list-style:none;
  float: left;
 }
 
 #mainNav li {
  float: left;
 }

The CSS discuss wiki is a good resource for identifying and working around CSS problems. Richard Rutter's clagnut.com website is also a good resource for CSS tips.

---

[ Weblog | Categories and feeds | 2011 | 2010 | 2009 | 2008 | 2007 | 2006 | 2005 | 2004 | 2003 | 2002 ]