Display block and links

I very quick tips today about the display:block property in CSS. Used a lot to make tab effect or drop down menu by switching from block to none.

What about changing from inline to block? If you know work with CSS since a while you must know the difference between inline and block element. If not read this article posted here: Block elements, inline elements. Read the rest of this entry »

Vertical-align text in css (with example)

The property vertical-align in css can emulate the align=”middle” in table. But if you think you just need to put the property and your text will follow you are at the beginning of a nightmare.

Vertical-align doesn’t really work the same way than the table equivalent, and to be honest I am still confused about it.

I would say in most case when you want to align middle some text it’s because you have an image on the same line and you want them aligned together. So lets have a look at some practical example: a menu with icons. Read the rest of this entry »

Timelapse, or the beauty of CSS in action

A really nice video by Matthew Buchanan about his process of building a website. Very interesting to see the different styles gradually applied in the process.

I first considered using a TextMate macro to do the heavy lifting with regard to the CSS file, but my friend and colleague offered a much better solution: the contents of stylesheets are exposed in the DOM, so JavaScript could probably be used to apply the CSS rules in sequence, and the result recorded with screencasting software.

If you want to make your own video Matthew gives a script to do it on his blog:

http://matthewbuchanan.name/post/33504871/timelapse-css

CSS Float: usage, tips and reading

The CSS float property is certainly one of the most obscure when you begin with CSS. As tricky as you may find it it is also one of the most powerful method of positioning.

First try to understand the concept of “flow” in a page. The normal flow of the page is from the top to the bottom. Each element have their own space and can’t overlap each other. Block element are displayed in columns and inline element in lines.

Read the rest of this entry »

Outline CSS property explained

The outline property in CSS is more or less unknown. The first reason I think is because it only supported on Gecko based browser, even if it is part on the CSS 2 specifications. But you know standards…

It is a shame because it is an interesting property.

What outline does:

It is a bit like border, you specify a width, a style and a color. The shortcut is :

outline: width style color; Read the rest of this entry »

CSS debugging advice

Who has never spend hours stuck on a design issue? Even if CSS is a very powerful and flexible language you can always face a situation where you don’t know what to do.

Here are some tips I use when I am stuck on a CSS problem: Read the rest of this entry »