Here are some different way to horizontally center HTML elements:
<div style=”margin: 0 auto; width:500px; height: 500px;”> some text </div>
The div is centered but the text within it isn’t.
<div style=”margin: 0 auto; text-align: center; width:500px; height: 500px; “>some text </div>
The div and the text within it are centered. Continue reading Center Align HTML Elements
To add a gradient to an element using CSS, just add the following code to your CSS
[cc lang=”css”]
background: #dcd9d1; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#dbd8d0′, endColorstr=’#f4f3f1′); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#dbd8d0), to(#f4f3f1)); /* for webkit browsers */
background: -moz-linear-gradient(top, #dbd8d0, #f4f3f1); /* for firefox 3.6+ */
[/cc]
If a browser doesn’t support gradients, it will just display the background color.
To change the direction and other values of the gradient, check out http://webdesignerwall.com/tutorials/cross-browser-css-gradient.
To add rounded corners to an element using CSS, just add the following code to your CSS
[cc lang=”css”]/* 4 rounded corners */
-webkit-border-radius: 10px; // for Safari and Chrome browsers
-khtml-border-radius: 10px; // for Konqueror browser
-moz-border-radius: 10px; // for Firefox browser
border-radius: 10px; // for browsers that support CSS 3
[/cc]
Of course, change the values (10px) to whatever value you want to change the corner radius.
If a browser doesn’t support rounded corners, it will just show square corners.
For more information, visit http://www.css3.info/preview/rounded-border/
