Tabbed Navigation: Rounding the Corners - Exercise

Contact Us or call 1-877-932-8228
Tabbed Navigation: Rounding the Corners - Exercise

Tabbed Navigation: Rounding the Corners

Duration: 15 to 25 minutes.

In this exercise, you will modify the tabbed menu we just showed so that the top corners of each menu item are rounded like this: Rounded Corners

  1. Open CssBackgroundTricks/Exercises/tabbedMenus.html.
  2. Modify the code so that it uses hole.gif from the Images folder to create the rounded corners shown in the screenshot above.

Solution:

CssBackgroundTricks/Solutions/tabbedMenus.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="../reset-meyer.css">
<style type="text/css">
	#wrapper {
		width:846px;
		margin:10px auto;
	}
	
	#content {
		clear:both;	
		width:838px;
		background-color:#eee;
		border:4px solid #000808;
	}
	
	p {
		margin:5px;
		padding:5px;	
	}

	#mainMenu {
		width:846px;
		font-family: "Trebuchet MS";
	}
	#mainMenu li {
		display:block;
		width:120px;
		float:left;
		margin-left:1px;
	}
	#mainMenu li:first-child,#mainMenu li.first  {
		margin-left:0px;
	}
	
	#mainMenu a {
		display:block;
		padding:10px;
		text-decoration:none;
		background:transparent url(Images/link.gif) repeat-x;
		color:#fff;
		text-align:center;
	}
	
	#mainMenu a:hover {
		background:transparent url(Images/hover.gif) repeat-x;
		color:#333;
	}
	
	#mainMenu a:active {
		background:transparent url(Images/active.gif) repeat-x;
		color:#fff;
	}
	
	#mainMenu .bgLeft {
		position:absolute;
		top:-1px;
		left:-1px;
		height: 9px;
		width: 9px;
		background: transparent url('Images/hole.gif') no-repeat top left;
	}
	
	#mainMenu .bgRight {
		position:absolute;
		top:-1px;
		right:-1px;
		height: 9px;
		width: 9px;
		background: transparent url('Images/hole.gif') no-repeat top right;
	}
</style>
<title>CSS Menu</title>
</head>
<body>
<div id="wrapper">
<ul id="mainMenu">
	<li class="first"><span class="bgLeft"><!--for IE6--></span><span class="bgRight"><!--for IE6--></span><a href="home.html">Home</a></li>
	<li><span class="bgLeft"><!--for IE6--></span><span class="bgRight"><!--for IE6--></span><a href="services.html">Services</a></li>
	<li><span class="bgLeft"><!--for IE6--></span><span class="bgRight"><!--for IE6--></span><a href="products.html">Products</a></li>
	<li><span class="bgLeft"><!--for IE6--></span><span class="bgRight"><!--for IE6--></span><a href="support.html">Support</a></li>
	<li><span class="bgLeft"><!--for IE6--></span><span class="bgRight"><!--for IE6--></span><a href="blog.html">Blog</a></li>
	<li><span class="bgLeft"><!--for IE6--></span><span class="bgRight"><!--for IE6--></span><a href="about.html">About</a></li>
	<li><span class="bgLeft"><!--for IE6--></span><span class="bgRight"><!--for IE6--></span><a href="contact.html">Contact</a></li>
</ul>
<div id="content">
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
</div>
</body>
</html>
Next