Menu
I’ve got stuck trying to figure out why my border on my top nav bar is on the top and not on the bottom also why my bottom nav bar is not center on the page. I’ve read over the book and other posts and i seem to be stuck. Any help in learning were my CSS went wrong would be perfect.
here is the URL to the page:
[url]http://stu.wccnet.edu/~jswager/inp150/homeworks/HW6/index.htm
here is the xhtml code:
[code]
PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<head>
<title>eMerge Web Solutions</title>
<link rel=”stylesheet” type=”text/css” href=”../../css/hw6.css” />
<meta http-equiv=”Content-Type” content=”text/html;
charset=utf-8″ />
</head>
<body>
<div id=”wholepage”>
<div id=”topnav”>
<h1><em>eMerge Web Solutions</em></h1>
<ul class=”topnavbar”>
<li><strong><a href=” “>Home |</a></strong></li>
<li><a href=”who.htm”>Who We Are |</a></li>
<li><a href=”what.htm”>What We Do |</a></li>
<li><a href=”process.htm”>Our Process |</a></li>
<li><a href=”casesudies.htm”>Case Studies |</a></li>
<li><a href=”client.htm”>Client List |</a></li>
<li><a href=”contact.htm”>Contact Us</a></li>
</ul>
</div>
<div id=”content”>
<p><br /></p>
<h2>Welcome to eMerge Web Solutions!</h2>
<p>We offer high developmet web solutions:</p>
<ul>
<li>Web application development using languages such as <acronym title=”PHP: Hypertext Preprocessor”>PHP</acronym>,
<acronym title=”Active Server Pages”>ASP</acronym>,
<acronym title=”Java Server Pages”>JSP</acronym>, Perl</li>
<li><acronym title=”extensible Hypertext Markup Languge”>XHTML</acronym> 1.0,
<acronym title=”Cascading Style Sheets”>CSS</acronym> 2.1, and JavaScript for front-end development</li>
<li>A focus on accessibiltiy and usability</li>
</ul>
<p>We have worked with a wide variety of <a href=”clients.htm”>clients</a>, representing industries as diverse as:</p>
<ul>
<li>Banking</li>
<li>Health Care</li>
<li>Biotech</li>
<li>Entertainment</li>
</ul>
<p>With our <a href=”who.htm”>years of experience</a>, we can definitely meet your Web Design needs.
<a href=”contact.htm”>Contact us</a> for a free quote!</p>
</div>
</div>
<div id=”botnav”>
<ul class=”botnav”>
<li><a href=”sitemap.htm”>Site Map |</a></li>
<li><a href=”privacy.htm”>Privacy Policy |</a></li>
<li><a href=”guarantee.htm”>Quality Garantee |</a></li>
</ul>
</div>
</body>
</html>
here is the css code:
[code]
html { padding: 0; border: 0; }
body { margin: auto; text-align: center;
font: 12px/1.5 verdona, geneva, lucida, arial sans-serif;}
div { margin: auto; text-align: center; }
div p , div ul li { text-align: left; }
#wholepage { border: 3px double #000; width: 740px; }
#topnav ul{ border-bottom: 3px double #000; }
#topnav h1 { font: 22px oblique georgia, serif; background: gray; }
.topnavbar li { display: inline; padding-top: 3px; padding-bottom: 3px;}
.topnavbar a { color:#000; display: block; float: left;
padding: .2em 1em; text-decoration: none;}
#botnav { font-size: 11px; }
.botnav li { display: inline; }
.botnav a { color: #000; display: block; float: left;
padding: .2em 1em; text-decoration: none; }
h1 { margin-left: 0; text-align: left; }
h2 { display: inline; font-size: 16px; font-weight: normal; }
acronym { border-bottom: 1px dotted #000; cursor: help; }
thanks,
Joe?