Happy Codings - Programming Code Examples
Html Css Web Design Sample Codes CPlusPlus Programming Sample Codes JavaScript Programming Sample Codes C Programming Sample Codes CSharp Programming Sample Codes Java Programming Sample Codes Php Programming Sample Codes Visual Basic Programming Sample Codes


HTML & CSS Web Design

Html Css > Code Examples

Anchor based tab

Anchor based tab <!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" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Anchor based tab</title> <style type="text/css" media="screen"> .container { width: 600px; padding: 12px; margin: 2px 0 20px 0; border: 1px solid #999; background: #fff; } #nav { margin: 0; padding: 0 0 20px 8px; border-bottom: 1px solid #88FF99; } #nav li { margin: 2; padding: 2; display: inline; list-style-type: none; } #nav a:link, #nav a:visited { float: left; font-size: 12px; line-height: 15px; font-weight: bold; padding: 0 12px 6px 12px; text-decoration: none; color: #FF9944; } #nav a:hover { color: #000; } </style> </head> <body> <div class="container"> <ul id="nav"> <li id=""><a href="www.happycodings.com">Item 1</a></li> <li id=""><a href="www.happycodings.com">Item 2</a></li> <li id=""><a href="www.happycodings.com">Item 3</a></li> <li id=""><a href="www.happycodings.com">Item 4</a></li> </ul> </div> </body> </html>