3 CSS Tips That Can Add Years to Your Life
CSS is a wonderful, and life shortening thing. When I initially set out to learn it over 3 years ago, I only used it to format fonts and remove the underline from links. This was because no 2 browsers interpreted CSS the same, which made a 100% CSS design all but unattainable.
Now, thanks to everyone but Microsoft’s effort to move towards a standard, CSS has moved to the forefront and become, in my opinion, the only way to design a website. The web has outgrown HTML and is ready to graduate to adding more design, with less markup.
Here are a few CSS tidbits that I wish I had known before I spent hours scouring the Internet to find the answer myself. I hope they’ll help you save the precious years of your life… that I’ve lost.
Horizontal Centering
I have yet to find a website better at explaining how to accomplish horizontal centering with CSS than BlueRobot. However, the basic idea is to set the left and right margins for the respective CSS object to “auto”. This works in browsers with CSS2 support, but not in IE5 (thank you Microsoft).
However, if you exploit IE5s incorrect application of the “text-align” attribute, you can make your horizontal dreams come true (for CSS anyway).
For exact details, see BlueRobot’s article.
Working with Forms
When I was a PHP programmer, I would always wrestle with the <form> element. Anytime I wanted to place a search box, or some other element, into a design, it would explode in IE (thank you… again… Microsoft).
Thankfully, there is a simple fix for this annoyance. Just set the margin attribute for you <form> element to zero, like so:
form {
margin:0;
}
By doing the same thing to your <input> element, you can remove their beveled edges.
2-Column Design
As you can see, my website has a 2-column design. The markup to do this is pretty straightforward:
<style type="css/text">
#content {
width:700px;
}
#left {
float:left;
width:200px;
}
#right {
float:right;
width:500px;
}
#footer {
clear:both;
}
</style>
<div id="content">
<div id="header"></div>
<div id="left"></div>
<div id="right"></div>
<div id="footer"></div>
</div>
The above creates a page with a header, 2 columns under it, followed by a footer. But there is one problem. The height of the left or right column depends on the amount of content in them. If you want both columns to be the same height with dynamic content, there is no way to know how to set the height attribute. And no… height: 100% doesn’t work.
But fear not, there is a solution.
By using a background image applied to the “content” div:
#content {
background-image:url('images/2-column-background.gif');
width:700px;
}
You can let the background image pick up where either column falls short. So no matter which column ends first, they will both appear to have equal heights.
-
Help Me Improve!
- The only way for my posts to get better is to get your opinion! So help me out, and rate this one! Thanks!
Avg. Rating: 5 - Total Votes: 2
Loading ...
-
Related Posts
-
4 Adobe Photoshop Beauty Tips
We all realize that every photo found between the covers of our favorite magazines is digitally enhanced. Blemishes are remo...
-
“The Life of Joe, The Alcoholic” Video
I'm on a home movie digitization kick. I've just finished converting 3 very aged VHS movies to DVD for Cassandra's family. ...
-
Rising from the Ashes
And to think, YESTERDAY should have been the first day for BrianShoff.com. But, during some server housecleaning, I managed ...
