Creating Navigation menus with rounded corner background (Single Image)

1)Add background image
Create a background image for your navigation based on your idea.
below image is an example. You can use your own style.



2) Copy the following code inside the div/td where you want to put the navigation.

<div class="mc">

<ul class="nav">

<li><a href="#"><span> Home </span></a></li>

<li><a href="#"><span> Our Services </span></a></li>

<li><a href="#"><span> Sitemap </span></a></li>

<li><a href="#"><span> Contact Us </span></a> </li>

</ul>

3) Copy the following code inside the respective css document.

ul.nav{

padding:0;

margin:0;

}

ul.nav li{

float:left;

list-style-type:none;

margin-left:5px;

}

ul.nav li a:link,ul.nav li a:visited{

text-decoration:none;

font-weight:bold;

font-size:14px;

color:#669933;

height:35px;

display:block;

padding-left:15px;

cursor:pointer;

float:left;



}

ul.nav li a:hover{

text-decoration:none;

font-weight:bold;

font-size:14px;

color:#FFFFFF;

background:url(images/nag_bg.jpg) no-repeat;

}

ul.nav li a:hover span{

background:url(images/nag_bg.jpg) no-repeat right;

}

ul.nav li span{

display:block;

height:35px;

padding-right:15px;

line-height:30px;

float:left;

}

Thats all. your navigation is ready to use.
You can see the example in the following website.
Freelance web designer india

Creating an Embossed like Effect in Web pages using CSS

You may have seen Embossed like texts Styles in Web pages. Earlier, we used images for similar effect. Although CSS has a command named "text-shadow", it is not cross-browser compatible.

Pls follow these simple steps and you can create embosse text styl in web pages.

• Copy the following .

<div class="mc">

<div class="inner">

<span class="style1">Web Designer India</span>

<span class="style2">Web Designer India</span>

</div>

</div>

• Next, Pls copy the following code in the respective CSS document.

.style1{

position:absolute;

font-family:Georgia, "Times New Roman", Times, serif;

font-size:52px;

color:#555;

top:100px;

left:100px;

}

.style2{

position:absolute;

font-family:Georgia, "Times New Roman", Times, serif;

font-size:52px;

color:#000000;

top:99px;

left:100px;

}

.mc{

width:500px;

height:500px;

background-color:#333333;

}

.inner{

position:relative;

width:100%;

height:100%;

}