我正在这个网站上工作。
www.firmtechnologysolutions.us
我有一个奇怪的问题。我现在正在为 css 和 navs 做一些修复。每当我单击#services 或#about 之类的导航时，都会导致我的div 发生变化。我怀疑它是因为我将它们设置为相对于彼此。有什么方法可以纠正这个问题吗？
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Firm Technology Solutions</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css.css">
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav class="home main" style="display: block;">
<div class="content">
<a href="#top" class="scroll-it active"></a>
<ul class="nav-links">
<li><a href="#mainContainer" class="scroll-it">Home</a></li>
<li><a href="#services" class="scroll-it">Services</a></li>
<li><a href="#about" class="scroll-it">About Us</a></li>
<li><a href="#contacts" class="scroll-it">Contact</a></li>
</ul>
</div>
</nav>
<div id ="mainContainer" class ="home-slide slide">
<div id = "Logo">
<img src="images/ftslogo.png">
<h1>Managed Information Services for Small Business</h1>
<h2>Simple & Affordable IT Solutions to get you up and running</h2>
<div class ="contactButton">
<img src="images/contactButton.png">
</div>
</div>
<div id ="mainContainer2"></div>
<div id = "mainContainer3"></div>
<div id ="about" class ="about-slide slide">
<h1>At Firm Technology Solutions, we are all about customer service. <br> We know that our customer's time is valuable.<br> Waiting around all day to get a fix on a minor problem on your email or server means you lose money. <br>Our service creed is: efficency.<br> We get on your problem as soon as you report it and try to resolve it ASAP.</h1>
<p>Simple Solutions</p>
<h2>We determine with our clients what kind of technology would fit <br>
their business best by creating an action plan.
</h2>
<p>Affordable Solutions</p>
<h2>After we create our action plan we determine where we can cut costs for <br> deployment, overhead, and matainence costs. </h2>
<p>The Firm Gauruntee</p>
<h2>We gaurntee our work 100%. <br> As a locally based New Jersey business we understand that our clients don't want to talk to someone 2000 miles away.<br> On top of our remote administration service. <br>We offer full in person consultations to handle everything from A to Zip.</h2>
</div>
<div ="services" class ="services-slide slide" >
<h1>Services</h1>
</div>
<div id = "serviceIcons">
<div class = "icon1">
<img src="images/icon1.png">
<p>Managed Information Services</p>
</div>
<div class ="icon2">
<img src="images/icon2.png">
<p>Networking</p>
</div>
<div class ="icon3">
<img src="images/icon3.png">
<p>Remote Services</p>
</div>
<div class="icon4">
<img src="images/icon3.png">
<p>Web Design</p>
</div>
</div>
<div id = "contacts" class ="contact-slide slide">
<h3>Contact us for more information!</h3>
<form id="form1" name="form1" method="post" action="">
<p>
<label for="Name">Name</label>
<input name="Name" type="text" id="Name" size="40" />
</p>
<p>
<label for="Email">Email</label>
<input name="Email" type="text" id="Email" size="40" />
</p>
<p>
<label for="Discription">Tell us about the job<br />
</label>
<textarea name="Discription" id="Discription" cols="50" rows="10"></textarea>
</p>
</form>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="http://www.elli.nu/potatis/js/jquery.backstretch.min.js"></script>
<script>
$.backstretch("http://www.wallpapersmood.com/uploads/2010-09/green-plants-nature-wallpaper/1285552282-AE04VJ2.jpg");
</script>
</body>
</html>
谢谢！