This is a quick, simple tutorial on how to create multiple column lists by only using one ul. Often is the case when you’d want multiple lists side-by-side, but you end up using markup like <ul class="col"> in order to get several lists sat next to each other. However, by simply floating lis left and setting their width to the correct percentage (two columns = li{width:50%;} and so on), you can attain a multiple column list pretty easily.
CSS Wizardry archive for February, 2010
Upside down domains—registering an international domain name
February 4th, 2010
Earlier today I registered the domain http://ʎɹɹɐɥ.com. Or did I? Upon reading an article by Sam Brown, which in turn linked to an article by John Sutherland explaining how to register such domains, I wanted one. There are a few levels to this trickery. There’s the ‘Oh I totally understand how this works!’
, or there’s the ‘I don’t want to know how it works, I just want it!’
level.
By Harry RobertsTags: Domains
. Posted in Web Development | 8 Comments »
CSS bar charts—styling data with CSS3 and progressive enhancement
February 2nd, 2010
Bar charts in CSS are neither very new, or very difficult. Using some pretty basic styling you can force lists etc into resembling graphs and charts fairly easily. Such charts, in their most basic form, work perfectly well in displaying and presenting the data they represent. However, using some rich CSS3 and progressive enhancement, you can really start pushing the display and presentation of these normally boring documents to the next level. They are also an ideal way in which to demonstrate the power and ability of progressive enhancement.
View demo
By Harry RobertsTags: CSS3, Data Visualisation, Progressive Enhancement
. Posted in Web Development | 4 Comments »
CSS Wizardry Netvibes widget
February 2nd, 2010
For those of you that read CSS Wizardry and use Netvibes, I have created a small search widget which you may be interested in adding to your Netvibes page. The widget is simply a small search form, from which you can search all the current articles on the CSS Wizardry site. All you need to do is head to the widget’s page and hit ‘Add to Netvibes’.
From my point of view, creating the widget could not have been simpler—simply writing some basic form HTML which posts to the blog will yield results, and it then just requires dropping into an XML document and placing on a live server, and linking to via the Netvibes developer centre.
You can view the ‘master’ XML document here: http://csswizardry.com/netvibes/index.xml
By Harry RobertsTags: netvibes, Search
. Posted in CSS Wizardry, Web Development | No Comments »