Top Navigation Bar Needs Fixing

ZappyLawns · April 15, 2014

I can't figure out how to fix it buy the image shows the problem ill post css/html codes too.

Html:

<!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>
	<title>Zappy Lawns | Home | Lawn Mowing/Raking in Toms River NJ and Manchester | ZappyLawns</title>
	<link rel="stylesheet" media="screen" type="text/css" href="style.css" />
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
  </head>

  <body>
	<div id="ad">
	<a href="http://secure.hostgator.com/~affiliat/cgi-bin/affiliates/clickthru.cgi?id=zappylawns-1"><img src="http://tracking.hostgator.com/img/Shared_Blue/728x90-animated.gif" border="0"></a>
	</div>
	<div id="page">
	  <div id="header">
		<div id="logo">
		<!-- type your logo and small slogan here -->
		<p>Zappy<span class="green">Lawns</span></p>
		<div id="slogan"><p>your lawn will be ready in a zap.</p></div>
		<!-- end logo -->
		</div>
	    <div id="phone">
		<p>732-818-9880</p>
		</div>
		<div id="nav">
		  <div id="nav-menu-left"></div>
		  <div id="nav-menu">
		  <!-- start of navigation -->
		    <ul>
			  <li><a href="index.html">Home</a></li>
			  <li><a href="rates.html">Rates/Services</a></li>
			  <li><a href="terms.html">Terms</a></li>
			  <li><a href="faq.html">FAQ</a></li>
			  <a href="login.php">Login</a>
			  <a href="register.php">Register</a>
			  <li><a href="help.html">Help Me</a></li>
			  <li><a href="contact.html" style="background-image: none;">Contact Us</a></li>
			</ul>
			<!-- end navigation -->
          </div>
		  <div id="nav-menu-right"></div>
		</div>
	  </div>
	  <div class="clearfloats"></div>
	  <div id="header2">
	    <!-- the large header slogan which is over top of the grass image can either be changed, or removed below -->
	    <div id="header2-slogan1"><p>your lawn will be ready in a zap</p></div>
	    <!-- end header slogan -->
	  </div>
	  
	  <div id="content">
	    <div class="content-padding">
		  <!-- page content below -->
	      <h1>About Us:</h1>
          <p>We are a small lawn care company in Manchester and Toms River New Jersey. We will do lots of things for your lawn and driveway. We offer fair prices. We give you a discount if you do front and back! Call us today for a free estimate. </p>
          <p>I offer many services for your lawn. If you want to see these services go to the services tab in the top navigation bar. If you want the rates go to the rates tab. Although they are not a garunteed price. But that's our usual prices. I have a big promotion for you in the next paragraph!</p>
          <p>My promotion is if you can get me another paying job I will give your next service 50% off per customer. Also if you get me 2 or more your next service is free!</p>
		</div>
	  </div>
	  <div id="body-divider"></div><!-- the division between the light green content section, and the dark -->
	  <div id="content2">
	    <div class="content-padding">
		  <!-- content blocks (three side by side), can remove if needed, this was just an example -->
		  <div class="content2-block">
		    <h2>Site news</h2>
		    <div id="promotion">Promotion:</div> <p>If you can get me another customer your next service is 50% off. If you get me 2 customers or more your next service is free.</p>
		    <div id="news">News:</div> <p>You can get any service for 4.95! Visit help me tab for more info.</p>
		  </div>
		  <div class="content-divider"></div>
		  <div class="content2-block">
		    <h3>Common FAQ</h3>
		    <p>Q: Do you offer outside of Toms River and Manchester?</p>
			<p>A: No, sorry we don't In a few years we plan on expanding.</p>
			<p>Q: How Much do you charge?</p>
			<p>A: We don't have an actual set price but you can look on the rates tab.</p>
			<p>Q: Do you have a phone number?</p>
			<p>A: Yes it is, 732-818-9880</p>
		  </div>
		  <div class="content-divider"></div>
  		  <div class="content2-block">
		    <h4>Newsletter</h4>
			<p>Subscribe to our monthly newsletter below for savings, news, and more!</p>
			<div id="subscribe">
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">
<style type="text/css">
	#mc_embed_signup{background:; clear:left; font:14px Helvetica,Arial,sans-serif; }
	/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
	   We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="http://zappylawns.us8.list-manage1.com/subscribe/post?u=71a010a87d0efd8f3f0287500&id=0203caa5fc" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
	<label for="mce-EMAIL"></label>
	<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
    <div style="position: absolute; left: -5000px;"><input type="text" name="b_71a010a87d0efd8f3f0287500_0203caa5fc" value=""></div>
	<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</form>
</div>

<!--End mc_embed_signup-->
		    </div>
		  <!-- end content blocks -->
		  </div>
		  <div class="clearfloats"></div>
		</div>
      </div>
	  <div id="footer-div"></div>
	  <div id="footer">
	    <p>©2013-2014 Zappy Lawns "your lawn will be ready in a zap"</p>
	  </div>
	</div>
  </body>
</html>

CSS:

* {
  margin: 0;
  padding: 0;
  }

body {
  font-size:100%;
  font-family: Arial,'Lucida Grande',Verdana,sans-serif;
  text-align:center;
  background:#002400 url(images/background.gif) no-repeat top center;
}

#ad {
  position: absolute;
  top: 5px;
  left: 475px;
 }

#fb-like {
  position: absolute;
  top:60px;
  left:100px;
}
 
#fblogo {
	position: absolute;
	top: 75px;
	left: 200px;
}
 
 #signup {
  position: absolute;
  top: 175px;
  left: 1200px;
}
#page {width:992px; margin:0px auto; text-align:center;}

#header {
  height:191px;
  width:992px;
  background:url(images/topbg.gif);
  text-align:left;
}

#logo {
  text-align:left;
  letter-spacing:-2px;
  text-shadow:0px 0px 8px #000;
  font:38px Georgia, Arial, "Times New Roman", Times;
  margin-left:18px;
  margin-top:124px;
  color:#FFF;
  width:364px;
  height:97px;
  float: left;
}

#phone {
  text-align:right;
  letter-spacing:-2px;
  text-shadow:0px 0px 8px #000;
  font:48px Georgia, Arial, "Times New Roman", Times;
  margin-left:18px;
  margin-top:94px;
  color:#FFF;
  width:364px;
  height:97px;
  float: right;
}

.green {
color:#AEF080;
}

#slogan {
  text-align:left;
  margin-left:100px;
  font:14px Arial, "Times New Roman", Times;
  letter-spacing:0px;
  color:#FFF;
}

/* TOP NAVIGATION BAR */
#nav {
  position: absolute;
  top: 180px;
  left: 335px;
  width:1010px;
  float:left;
  margin-top:15px;
}

#nav-menu-left {
  background:url(images/navbar-left.gif) no-repeat top left;
  width:27px;
  height:55px;
  float: left;
}
#nav-menu-right {
  background:url(images/navbar-right.gif) no-repeat top left;
  width:27px;
  height:55px;
  float: left;
}
#nav-menu {
  background:url(images/navbar-bg.gif) repeat-x top left;
  height:55px;
  width:940px;
  float: left;
}

#nav-menu ul {
  list-style:none;
}
  
#nav-menu ul a {
  background-image: url(images/navbar-divider.gif);
  background-repeat: no-repeat;
  background-position: right;
  padding-right: 12px;
  padding-left: 12px;
  padding-top:5px;
  display: block;
  line-height: 50px;
  text-decoration: none;
  text-shadow:1px 1px 1px #000;
  font-family: Arial, "Times New Roman", Times, serif;
  font-size: 18px;
  color: #FFF;
}
	
#nav-menu ul a:hover {
  text-decoration:underline;
  text-shadow:0px 0px 4px #FF0000;
}
 
#nav-menu li {
  float:left;
}
/* END NAVIGATION BAR */

/* Large header image of grass and flower, with slogans */
#header2 {
  background:url(images/header.jpg) no-repeat top left;
  width:992px;
  height:224px;
  text-shadow:1px 1px 1px #000;
}

#header2-slogan1 {
  font:48px Georgia, Arial, "Times New Roman", Times;
  padding:68px 0px 0px 106px;
  color:#FFF;
  text-align:left;
  letter-spacing:-2px;
}
#header2-slogan2 {
  font:48px Georgia, Arial, "Times New Roman", Times;
  padding:0px 0px 0px 267px;
  color:#FFF;
  text-align:left;
  letter-spacing:-2px;
}
/* end large header */

/* clears all floated elements */
.clearfloats {
  clear:both;
}
/* end clear floats */

/* first content section, lighter green area */
#content {
  background:#2E650D url(images/body-bg.gif) no-repeat top left;
  width:992px;
  min-height:270px;
  text-align:left;
  padding-top:35px;
  padding-bottom:20px;
}
.content-padding {
  padding:0px 20px 0px 20px;
}

.content-padding a {
  font:16px Arial, "Times New Roman", Times;
  color:#CEFF9F;
  text-shadow:1px 1px 1px #104D00;
}

.content-padding a:hover {
  font:16px Arial, "Times New Roman", Times;
  color:#FFF;
  text-decoration:none;
  text-shadow:0px 0px 3px #FF0000;
}


#content h1 {
  font:36px Georgia, Arial, "Times New Roman", Times;
  color:#FFF;
  padding-bottom:10px;
  text-shadow:1px 1px 2px #000;
}

#content p {
  font:16px Arial, "Times New Roman", Times;
  color:#FFF;
  text-align:justify;
  padding-bottom:10px;
}
/* end content 1 section */

#promotion {
	font:24px Georgia, Arial, "Times New Roman", Times;
	color:#a3a5a6;
}
#news {
	font:24px Georgia, Arial, "Times New Roman", Times;
	color:#a3a5a6;
}
/* image that divides the two different colored content sections */
#body-divider {
  background:#1D5600 url(images/body-divider.gif) no-repeat top left;
  width:992px;
  height:23px;
}
/* end content divider */

/* darker green content section, "content 2" */
#content2 {
  width:992px;
  min-height:250px;
  background:#1D5600;
  text-align:left;
  padding-top:10px;
  padding-bottom:30px;
}

#content2 p {
  font:16px Arial, "Times New Roman", Times;
  color:#FFF;
  text-align:justify;
  padding-bottom:10px;
}

#content2 h2,h3,h4,h5,h6 {
  background:#1D5600 url(images/headline-arrow.gif) no-repeat top left;
  font:normal 25px serif, "Times New Roman", Times;
  line-height:25px;
  color:#FFF;
  text-shadow:1px 1px 2px #000;
  padding-bottom:10px;
  padding-left:30px;
}

.content2-block {
  width:274px;
  float:left;
}

.content2-block p {
  width:274px; 
  float:left;
  text-align:left;
}

  /* three column area, vertical dotted divider */
  .content-divider {
    background:url(images/content-divider.gif) no-repeat top center;
    width:2px;
    height:274px;
    float:left;
    padding:0px 30px 0px 30px; 
  }
  /* end divider */

/* end content 2 */


/* subscribe form */
#subscribe {text-align:right; padding-right:15px;}
#subscribe input { margin:1px 0;}
.button {
  background:transparent url(images/submit.gif) no-repeat top left;
  padding-bottom:5px; 
  border:none;
  width:126px;
  height:33px;
  color:#FFFFFF;
  font:bold 13px Arial, Georgia, "Times New Roman", Times;
  cursor:pointer;
}
.inputstyle {
  background:#002200;
  width:200px;
  height:30px;
  color:#FFF;
  font-size:14px;
  padding:0px 5px 0px 10px;
  border:1px solid #427B23;
}
/* end subscribe form */



/* footer of page */
#footer-div {
  background:url(images/footer-div.gif) no-repeat top left;
  width:992px;
  height:6px;
}

#footer {
  padding-top:15px;
  width:992px;
  height:100px;
  background:#001800;
  text-align:center;
}

#footer p {
  font:12px Arial, "Times New Roman", Times;
  color:#FFF;
}

#footer a {
  font:12px Arial, "Times New Roman", Times;
  color:#FFF;
}
/* end footer */

adam_bray · April 15, 2014

increase the width of the menu

ZappyLawns · April 15, 2014

increase the width of the menu

I found the error i didnt put the <li></li> in some of then links.

Sign In

Top Navigation Bar Needs Fixing

Recommended Posts

ZappyLawns

Link to comment

Share on other sites

adam_bray

Link to comment

Share on other sites

ZappyLawns

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information