Skip to content

Tyssen Design — Brisbane Tyssen Design logo

[email protected] (07) 3300 3303

CSS Articles

Centering a dropdown menu

By /

Recently, I needed to create a centered version of the Suckerfish dropdown menu and realised that some significant modifications were going to be needed. This is because the method for getting the top level list items to sit in a row, on the same horizontal plane, is to use float: left. However, when you float elements, you can't centre them unless you give them a width and use auto left and right margins.

Legends of Style

By /

UPDATE: following on from comments by Thierry Koblenz, I have written an update to this article. The techniques described below will still work in different browsers, but the new article explains how it can be achieved with a little less mark-up.

It's a well-established fact that achieving cross browser consistency when styling form controls is an “exercise in futility”. And one of those elements that just won't play ball is the legend tag.

Dropdown low down

By /

Dropdowns (horizontal) or flyout (vertical) menus abound on websites and come in many different flavours. They are also put together in a number of different ways, some done with javascript, some with 'pure' CSS and some a mixture of both.

More on Dropdown low down

Styling form buttons

By /

Anyone who's used the web has encountered buttons in forms. Buttons, as with most form controls, can be a bit tricky to style for consistent look cross browser and cross platform as the operating system often has more to do with how they are rendered than the browser itself. Roger Johansson has delved into this issue in more detail.

More on Styling form buttons

Content bookends

By /

Sometimes you want to have a list of text items or images appear on the same line but with some items aligned to the left and some aligned to the right. An example of this would be a footer where you want to split the links down the middle. Or maybe a blog post where you want to put the date on the left and the number of comments on the right.

Onfocus, background-changing, sliding door tabs

By /

There are already several excellent articles discussing the sliding door tabs technique for creating navigation elements, so why do we need another one? (For those who don't already know, sliding door tabs, originally conceived by Douglas Bowman, are navigation tabs made up of two separate background images which allows for the tabs to expand and contract when the user resizes the text in their browser.)

Like to say hello? Give us a call on (07) 3300 3303, send us an email to enquiries@tyssendesign.com.au, or a message by filling in the form below.