How to Center div using CSS:

Before I show you the markup, let’s quickly look at the output:

Example: Horizontally Center div using CSS:

<style type="text/css">
#outer {
background-color: #930;
padding: 15px;
width: 500px;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
}
#inner {
color: #000;
background-color: #FFCFB9;
padding: 10px;
width: 200px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
</style>

HTML:

<div id="outer">

<div id="inner">
This is inner div.
</div>

</div>

Note that for the demo purposes, I have maintained the width of the outer div at 500px. You may remove/change it as you need.

That’s it!

Do you know of any other ways to Center div CSS? Feel free to share your thoughts by commenting below.

How to Center li in ul using CSS – Example

Before I show you the HTML and CSS required to center the list items in its parent unordered list using CSS, let’s look at the output:

So this example assumes that we have a div and we are using an unordered list (ul list) with some list items (li items) in it. It’s upto you to decide how many li items you want to center in it. There’s no limit as such. But for the sake of the example to center li in ul using CSS, I am going to assume that we have 6 li items.

The following is HTML markup. You may use it and change it as you need it.

<style type="text/css">#nav {
background-color: #930;
padding: 10px;
margin-left: auto;
margin-right: auto;
width: 500px;
margin-top: 50px;
}

#nav ul {
text-align: center;
padding: 0;
margin: 0;
}

#nav li {
display: inline;
list-style: none;
padding: 10px 5px 10px 5px;
}

#nav a {
color: #930;
text-decoration: none;
padding: 5px;
background-color: #FFBE9F;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
font-variant: normal;
}

#nav a:hover {
background-color: #FFC9AE;
}
</style>

HTML:
<div id="nav">
<ul>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
<li><a href="#">Five</a></li>
<li><a href="#">Sixth link is long link</a></li>
</ul>
</div>

Example to Create “Stitched” look using CSS3

Here is what we are going to create:

<style type="text/css">
.stitched_bg {
background-color: #356A00;
padding: 5px;
width: 145px;
height: 145px;
margin-left: auto;
margin-right: auto;
}
.stitched {
border:2px dashed #ffffff;
box-shadow: 0 0 0 8px #356A00;
color: #FFF;
height: 140px;
}
</style>
<div class="stitched_bg">
<div class="stitched"></div>
</div>

That’s it! Isn’t that simple?

Your turn!

Do you know of any other ways to create stitched effecting using only CSS? If yes, please feel free to share with us by commenting below.

CSS3 Drop Shadow: 1 line solution

box-shadow: 1px 2px 5px 3px #CCC;

Breakdown of the above values:

box-shadow – New property introduced in CSS3 to generate shadow effects.

1px – Thi is the Horizontal offset. Both positive and negative values are entertained.  A positive value for the Horizontal offset draws a shadow that is offset to the right of the box. A negative length draws a shadow that is offset to the left of the box.

2px – This is the Vertical offset. Both positive and negative values are entertained. A positive value for the Vertical offset basically offsets the shadow down, a negative one up, while the negative value does the opposite.

5px – This is the Blur Radius. Allows only Positive  values.  The larger the value, the more blurry the shadow’s edge appears.

3px – This is the Spread distance. Both positive and negative values are entertained. Positive values cause the shadow shape to expand in all directions by the specified radius whereas negative values cause the shadow shape to contract.

#CCC – This is the color of the shadow.

You can also apply multiple shadows using a single CSS declaration:

box-shadow: 1px 2px 5px 3px #CCC, 0 0 6px rgba(0, 0, 0, .7) inset;

So using our basic example, let’s quickly create a box and apply our simple solution:

<style type="text/css">
#a {
box-shadow: 1px 2px 5px 3px #CCC;
width: 100px;
height: 100px;
}
</style>

<div id="a">I am a box</div>

This gives us the following:

Browser Support

Internet Explorer 9/10
Firefox (from 3.5)
Safari/Chrome
Opera (from 10.5)

Your turn!

Do you know of any other simple ways to provide CSS3 Drop Shadow effect to elements of your web page? If yes, please feel free to share by commenting below.

Target IE6 IE7 using CSS

Simply paste the following code in your CSS stylesheet & change the “id” and “class” names as needed:

#myelement
{
color: #999; /* shows in all browsers */
*color: #999; /* notice the * before the property - shows in IE7 and below */
_color: #999; /* notice the _ before the property - shows in IE6 and below */
}
.myelement
{
color: #999; /* shows in all browsers */
*color: #999; /* notice the * before the property - shows in IE7 and below */
_color: #999; /* notice the _ before the property - shows in IE6 and below */
}

In the code above, simply change #myelement if using ID or change .myelement to reflect the class of the element that you are using. Then re-declare the same style by appending * to fix the issue in IE7 & append _ to fix the issue in IE6, as shown in examples above. Hope that helps.

Your Turn!

Do you know of any other short cuts to target and make IE6 & IE7 using CSS obey the styling? Please share your tips with us by commenting below.