Archive for the ‘html’ Category

Display everything

I just discovered a nice feature for minimalist frontend developers. You can use all elements with content for styling simply by using

* {display:block;}

Or display inline, or table-cell or whatever. All elements, including title, style and head can be used for styling now. Have fun with it!

(I have only tested this on FF3.5 and Safari. I guess it works on more browsers).

Centered images in the middle of a block without (total) loss of usability

The designer wants all images to be centered inside a square box with defined dimensions. The longest side of each image is the same length as this dimension but the smaller side is unknown and variable. Easy you say.

<div style=”background:url(path/to/image-w100xh75.jpg) no-repeat 50% 50%;width:100px;height:100px;”></div>

Easy it is. Unless the usability expert comes knocking on your door. Background images don’t behave the same as normal images. In most browsers, for instance, you can’t easily download a background image by right clicking on it.

So you do want the background positioning but you also want some important behaviour of a normal image. Here it is: Centered images in the middle of a block with normal usability.

It does not work in fluid or flexible layouts of course. But it does work in all serious browsers and in IE7. Haven’t tested it in IE6 but there’s no reason it wouldn’t work there. I’m not sure if it creates a performance issue. The images are downloaded only one time, so that’s not an issue. The only problem might be double memory usage. I haven’t tested that.

Equal height boxes with flexible widths

My design buddies @work came up with one of the most complex layouts I ever had to build. You could desribe it as an elastic layout with boxes with a flexible width which should have the same height as it’s siblings. With rounded corners and dropshadows offcourse. But that would be too easy a description. There are templates with 2, 3 and 4 boxes next to each other and these boxes can be contained within containers with different widths. A cynic would ask me why I didn’t use tables and he would be right. It might have saved me a lot a hassle. But forget about tables.

Ok, no tables

Using position:absolute to avoid inline styles

A few weeks ago I upgraded an old Pivot weblog to the latest version of WordPress, a weblog system which is a bit more flexible, I think. One of the things I dislike though is some of the HTML that comes out of it’s core functions. For example an image with a caption.

The known problem with an image with a caption below it is that it is impossible to make the text as wide as the image without setting the width of the image on the caption.
This is fascinating!

HTML 5

I switched to HTML 5. A nerd blog should have a nerdy doctype. There’s not much to say about it. I replaced the first div in the old HTML with a new element called header, I replaced the following divs which are direct children of the body with the new element section, I replaced the div that was a child of the section with the element article and replaced the last div of the page with the element nav. I could have chosen the element footer, but I think nav describes its purpose better. I don’t have an aside so I don’t need that element.

Some details about HTML 5