This is your html code for menu, copy this and save it as index.html where the place what you want.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="css.css" type="text/css" />
</head>
<body>
<div class="wrap">
<div id="mainMenuDiv">
<div id="leftcornerImg"></div>
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Cources</a></li>
<li><a href="#">Lectures</a></li>
<li><a href="#">Life</a></li>
<li><a href="#">Results</a></li>
</ul>
</div>
<div id="rightcornerImg"></div>
</div>
</div>
</body>
</html>
This is your css code , copy and past this code in your css file and save it. find suitable 3 images for this menu and set the path properly.
body {
background-color:#069;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
#menu {height:31px;
font-size:13px;
text-align:center;
font-family: Verdana, Geneva, sans-serif;
float:left; min-width:975px;
background-image: url(menu-bg.png) ;
}
#menu ul {margin:0px;padding:0px; height:31px;}
#menu ul li {display:inline;height:31px;list-style:none;margin-left:15px;}
#menu li a {color:#FFFFFF;text-decoration:none;font-weight:bold;}
#menu li a:hover {color: #D26A0D;text-decoration: none;font-weight:bold;}
#menu li {display:inline; list-style-type:none; padding-left:1em; margin-left:1em;background: url(separator.jpg) repeat-y;line-height: 30px;}
#menu li:first-child {background: none;}
#leftcornerImg {
background-image:url(footer-left1.png);
width:11px;
height:32px;
float:left;
}
#rightcornerImg {
background-image:url(footer-right1.png);
width:14px;
height:32px;
float:left;
}
connect this css and html files, and see it in browser.
If u set ths required things properly, U will see the menu.
No comments:
Post a Comment