troubleshooting Question

Formatting Horizontal Menu Bar

Avatar of rangers99
rangers99 asked on
Web Languages and StandardsHTMLCSS
6 Comments1 Solution799 ViewsLast Modified:
The horizontal menu bar that Im working on can be viewed here;
http://www.taxconcern.co.uk/default1.htm

As you can see there are some problems. Basically Id like each menu item to be centered in its "box". eg. you can see that "home" is placed at the bottom. How do I format the menu so it looks professional? Note:  I dont want to change the size of each menu item.

Ive attached both the html file and css file for you to look at.

Thanks.


HTML CODE below
---------------------------
 
<!DOCTYPE html PUBLIC "-//W3C//DTD html 4.0 Transitional//EN">
<html>
<head>
    <title>Tax Concern</title>
    <link media="screen" href="styles1.css" type="text/css" rel="StyleSheet">
</head>
<body>
     <div id="container">
    <h1><img alt="Taxconcern header" src="images/header1.png" /></h1>
        <br />
        <ul id="topnav">
            <li><a href="default.htm" title="cgtcalculator home page">Home</a></li>
            <li><a href="calculator.aspx" title="capital gains calculator">About Taxconcern</a></li>
            <li><a href="example.htm" title="capital gains calculator examples">HMRC COPS 2005 Investigation</a></li>
            <li><a href="instructions.htm" title="capital gains calculator instructions">HMRC COP 11 Personal Enquiry</a></li>
            <li><a href="algorithm.htm" title="cgtcalculator calculations explained">HMRC COP 14 Company Enquiry</a></li>
            <li><a href="convert.aspx" title="cgtcalculator convert format">HMRC PN160 VAT Enquiry</a></li>
            <li><a href="calculatecgt.aspx" title="tax calculator">Student Tax Refund</a></li>
	    <li><a href="calculatecgt.aspx" title="tax calculator">CIS Calculator</a></li>
	    <li><a href="calculatecgt.aspx" title="tax calculator">Shopping Calculator</a></li>
        </ul>
    </div>
    <div id="bodycontainer">
        <h1>
            Welcome to TaxConcern</h1>
        <div>
            <p>
                Content goes in here
            </p>
	</div>
     </div>   
</body>
</html>
 
 
 
CSS code below
---------------
 
/* Default CSS Stylesheet for a new Web Application project */
 
 
*
{
	-moz-box-sizing: border-box;
}
 
 
h1
{
	color: #003366;
	font-size: 110%;
	margin: 0;
	padding: 0;
}
 
 
ul
{
	list-style-type: none;
	margin:				0;
	
}
 
body
{
	font-family: arial, helvetica, sans-serif;
	margin: 0;
	padding: 0;
	text-align: center;
	color: #444;
}
 
img
{
	border-style: none;
}
 
 
a.nounderline
{
	text-decoration: none;
}
 
#container
{
	text-align: left;
	margin: 0 auto;
	width: 980;
	background: #fff;
}
 
 
#bodycontainer
{
	text-align: left;
	width: 980;
	background: #fff;
	padding: 20px 20px 7px 20px;
	border: 1px solid green;
	margin: 0 auto;
}
 
 
 
 
h1 img
{
	display: block;
	border: 0;
}
 
 
 
ul#topnav
{
	margin: 0;
	padding: 8px 2px;
	list-style-type: none;
	background: green;
	text-align: left;
	vertical-align: middle;
	font-size: 70%;
}
 
 
ul#topnav li
{
	font-weight: bold;
	display: inline;
	padding: 0 5px 0 5px;
	width:105px;
	border-right: thin solid #fff;
}
 
 
ul#topnav li a:link, ul#topnav li a:visited
{
	text-decoration: none;
	color: #fff;
}
 
 
ul#topnav li a:hover, ul#topnav li a:active
{
	text-decoration: underline;
	color: #90EE90;
	background: green;
}
ASKER CERTIFIED SOLUTION
rangers99

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 1 Answer and 6 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 6 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros