Glowing Chrystal

When starting out with CSS/XHTML design it is more than often a problem positioning elements in the layout. This strikes me as one of the more common issues on the forums around the web. When I started out, I tended to add borders to each element in different colors just to see where the things ended up, but that is not fun to do each time. Nor is it fun, or good even, to retrace all them borders you do not want in your design later and either delete or change the border size to a zero, leaving a lot of redundant code in the CSS document.

So what about all them extensions for Firefox ? You ask. Well, I've used them aswell, but in order to use them you need to activate the extension, and if you take Webdeveloper for instance (great tool, btw) you need to go to menu, activate it, and edit the CSS, and then when you refresh you need to activate it again to see what differance the changes have made...This meaning two things:

1. You don't remember how it looked before the change, nor have you something to compare with.
2. Lots of clicks ;)

So, as an addition to or possibly instead of Firefox extension "webdeveloper" I offer you this solution below. This is better ;)

Create your own CSS positioning aid

This "tutorial" consists of two different solutions, on the one hand a CSS snippet that will show you SPAN id/classes and DIV id/classes in different colors (lets call this one A), and the nametags to go with them. And on the other hand a little snippet that will visualize the structure of an XHTML (or HTML) document by addinga colored border around every element. At each level in the hierarchy the color changes so you can see when “depth” changes (and this one will be reffered to as B).

Instead of spending valuable time changing "stylecheats" every single time to have it display borders and crap around all segments to aid you in positioning things, apply this piece of CSS in your current project style document (Or simply download my CSS from further down in this article)

A
- Here goes the first one.
/*Decoding styl tags - Remove before launch*/ html:before { content: "ORANGE: SPAN/ID; YELLOW: SPAN/CLASS; RED: DIV/ID; BLUE: DIV/CLASS; CLASS BG: #f8f8f8; ID BG: #eee"; background: #eeffee; color: black; font-family: Trebuchet; margin:0 0 0 200px; } span[id]:before { content: 'ID: '' attr(id) '''; border: 1px solid #000; background: orange; color: black; text-align: left; text-transform: none; text-decoration: none; white-space: normal; font-family: sans-serif; font-size: small; font-style: normal; font-variant: normal; font-weight: normal; } span[id] { border: 1px solid orange;background: #fafaeb; } span[class]:before { content: 'CLASS: '' attr(class) '''; border: 1px solid #000; background: yellow; color: black; text-align: left; text-transform: none; text-decoration: none; white-space: normal; font-family: sans-serif; font-size: small; font-style: normal; font-variant: normal; font-weight: normal; } span[class] { border: 1px solid yellow;background: #eeffee; } div[id]:before { content: 'ID: '' attr(id) '''; border: 1px solid #000; background: red; color: white; text-align: left; text-transform: none; text-decoration: none; white-space: normal; font-family: sans-serif; font-size: small; font-style: normal; font-variant: normal; font-weight: normal; } div[id] { border: 1px solid red;background: #eee; } div[class]:before { content: 'CLASS: '' attr(class) '''; border: 1px solid #000; background: blue; color: white; text-align: left; text-transform: none; text-decoration: none; white-space: normal; font-family: sans-serif; font-size: small; font-style: normal; font-variant: normal; font-weight: normal; } div[class] { border: 1px solid blue;background: #f8f8f8; } /*END of decode style tags*/

It makes all divs (id) surrounded with red borders and have red "nametags", and all divs (classes) surrounded with blue borders and have blue "nametags".

B
Annnnnd the second one.
- Visualize the structure of the XHTML, replace or add following code within:
/*Decoding styl tags - Remove before launch*/
----
/*END of decode style tags*/

* { border: 1px dashed red } * * { border: 1px dashed green } * * * { border: 1px dashed orange } * * * * { border: 1px dashed blue } * * * * * { border: 1px solid red } * * * * * * { border: 1px solid green } * * * * * * * { border: 1px solid orange } * * * * * * * * { border: 1px solid blue }

...and you'll have even more visual aid, hehe... a tad messy though (if you use both of these solutions at the same time).

Personally I do not use both of these at the same time ;)... I tend to view the layout with the first block of CSS added to the style document (and remove it when I'm done.)

Site with the first style snippet applied can be viewed here: http://p-ahlqvist.com/41/

Download full CSS_debugging.css

Download css: here
Add this line below the original CSS link in your HEAD tag:

And if you don't want to use one or the other of these snippets, just comment it out or delete it. After you're done positioning/"debugging" just remove above link, and the site should show as intended.

The first CSS snippet do NOT work in IE, I have only tried it in FF.
The second on DO work in IE aswell.

28.03.2007. 13:00