Having experienced the awful taste of designing with tables, when I developed a myspace design for my band, I learned how hard it is to develop a customised myspace design. I would ‘ve been nowhere near to finishing the design if I hadn’t made use of this CSS “trick”.

The trick

I’ll jump right into the subject. The most important CSS “trick” you’ll ever need is:

border: solid 1px;

That’s it! All you need to add to an element is a border! Let’s see some applications for it.

Aligning elements

Say that you want to align two elements which are absolute positioned on the screen. How do you align them perfectly? This is especially important if you’re developing a grid based design (such as 960).

Just add a border to both the elements and move whichever you want to match the other element’s position (below, replace the “XX” with the position of the second element).

.text1{ position: absolute; top: XX; left: XX; }

Here’s the result:

Replacing text link with image

Say that you have replaced a link with an image button and want to make the image button clickable. How do you do it?

First, replace the HTML link with the image button:

.link {
width: 223px;
height: 73px;
display: block;
text-indent: -9999px;
background-image: url(‘../images/image_button.jpg’);
background-repeat: no-repeat;
margin: 50px 0 0 80px;
}

Next, bring the anchor text back on the screen. Adjust the top and left parameters to match the button:

.link a {
position: absolute;
top: 131px;
left: 77px;
border: solid 1px; 
}

Finally, adjust the height and width of the anchor text to match the image button.

.link a {
position: absolute;
top: 131px;
left: 77px;
border: solid 1px;
width: 223px;
height: 77px;
}

Conclusion

There are many applications for this “trick”, you just need to explore them. Hope you enjoyed the tutorial and the “trick” will be useful in your development process!

Leave your comments in the comments section below, if you have any questions.

Source Files are unavailable for this tutorial! No Source Files