Articles tagged with ‘css’

February 2010

Sun 7th

How to build a scrolling list with jQuery

This tutorial explains, step-by-step, how to use CSS and jQuery animations to build a simple ‘auto-scrolling’ vertical list.

January 2010

Mon 18th

Adding semantics to jquery-ui’s progress bar

Or ‘Adding functionality to the CSS progress bar’

November 2009

Sun 22nd

Right-aligned menu

How to style a right-aligned menu, the easy way.

Tue 10th

Visualising links

By their nature, links — and, especially, images within them — can display quite unexpectedly.

July 2009

Thu 16th

Fixed position and z-index

Yes, those fixed-positioned elements are annoying; please bear with me.

Wed 8th

Specificity vs. proximity

Specificity rules are simple and robust. Despite this, they sometimes ‘break’ in weird and wonderful ways.

Wed 1st

Implementing a progress bar

How to implement a basic, gracefully degrading progress bar using HTML and CSS.

May 2009

Fri 22nd

Universal IE 6 CSS

Take a look at the wonderful world of ‘universal IE6’.

March 2009

Mon 30th

Positioned, floated image

An image can be floated and, in effect, absolutely positioned by wrapping it in an absolutely positioned container.

Fri 27th

Hanging punctuation

Punctuation at the beginning of a line can be set to ‘hang’ in the left-hand margin, creating a solid ‘edge’ and maintaining flow of the main body text.

Fri 20th

A flexible homepage

Recent changes to the fma homepage have, hopefully, created a ‘best of all worlds’ layout.

Wed 11th

Liquid layout

A ‘liquid layout’ adjusts to the size of the browser, ensuring content widths are flexible, and at the mercy of the user.

Mon 2nd

Drop Caps

In modern browsers, with javascript and css enabled, this ‘intro’ paragraph begins with a stylised ‘I’, shifted to the left of the main copy. A ‘drop cap’, in other words. Here’s my method.

February 2009

Wed 4th

Stopping CSS inheritance

Or ‘why would you want to?’

January 2009

Wed 28th

A tale of two bugs

Another day, another set of broken behaviour

Fri 23rd

Forever learning

Sometimes I feel like the CSS spec is just a little bit like the C++ language: too big for any mere mortal to hold in their head.

Fri 23rd

Clear as mud

Sometimes, clearing isn’t as obvious as you might think.

Thu 15th

Tables and the margin collapse

Further confusion surrounding margins and their collapsing behaviour.

November 2008

Tue 4th

Stop breaking inheritance

On the correct use of inheritance.

October 2008

Wed 22nd

Coloured bullet points

How to add a splash of colour to your bullet points.

Wed 15th

The power of CSS + javascript

Introducing a new ‘dynamic tutorial’ series

September 2008

Thu 18th

!important is not important!

Break your addiction to !important and make the web a better world.

Sun 14th

Line height

An interactive demonstration of the line-height property.

Fri 12th

The text-align property

An interactive demonstration of the text-align property.

Thu 11th

Table formatting: empty-cells

Yet another poorly-supported property for table styling.

Tue 9th

Rounding errors with em units

There appear to be rounding errors in many browsers, particularly IE7, when specifying width in em units.

Mon 8th

Ensuring whitespace is visible

If you’ve ever dealt with logging or debugging your software, you’ve probably had to deal with the issue of whitespace. But how best to display this in HTML?

July 2008

Wed 23rd

Box Model: Basics

Introducing the box model and how various configurations of padding and margin affect final layout.

Fri 11th

Float containers and their default behaviour

Why do simple containers not expand around floated contents?

June 2008

Fri 20th

Single gutter, multiple floats

Fri 13th

Reordering columns

A basic technique for swapping two columns in a layout.

Thu 12th

Collapsing margins

Thu 12th

Box model

Introducing the box model

Thu 12th

Collapsing margins in nested blocks

Explaining the collapse of margins within an element

Thu 12th

Line height

Thu 12th

Background inheritance

A short note about the (non-) inheritance of background values.

Wed 11th

Floats

In which we discuss four ways that elements can be floated: simple, margin under float, opposing, and same side.

Wed 11th

Styling ordered lists

May 2008

Sun 18th

Nested DIVs

Fancy borders with nested divs

November -0001

Wed 30th

Space around images

Wed 30th

Opposing floats

How elements on the same horizontal behave