I got a free template for Dreamweaver and I am having a problem - If I make the page smaller the navigation does not do the same. I guess what I am trying to say is that the template will work in all resolutions except the navigation. When I make the browser window smaller - the navigation menu moves or when I make the view smaller it moves as well - I have to have the page at a cretin size in view for it to look right and it is only the nav bar that is doing that. And it does the same thing in all browsers. I must be doing something wrong with the attributes of the nav <div>'s. Could someone please point me in the right direction. - I am not sure what code to paste to make what I am asking more visible so if you need to see my code please tell me what code to show you or any other info that I have failed to mention. Thanks!

If you have the template hosted somewhere that would help us out in figuring out the problem much faster and easier.

OK - I see what is going on but I do not see how to fix it. The position of my navbar is in Absolute. Therefore it is staying to the top left corner of the parent wrapper. When I change it to static - it messes up the whole page. But with it in Absolute you have to have the screen magnified to a specific % for it to look right. Does anyone have any idea how I can fix this. Will I have to change the layout of the whole page or is there a simple way I can fix it?

It's hard to debug a concept. If the page isn't uploaded anywhere, at the least post the HTML and CSS here. Use the around it when you do.

tim

Thanks so much for the help - here is the code right here.

 Style sheet
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
}
img {
	border-style: none;
}
body {
	background-color: #061630;
	color: #333333;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 14px;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	text-align: center;
}
h1 {
	color: #0C2A5B;
	font-size: 28px;
	font-weight: normal;
	line-height: 28px;
	letter-spacing: -1px;
	font-family: Georgia, "Times New Roman", Times, serif;
}
h2 {
	color: #113D84;
	font-size: 18px;
	font-weight: bold;
	line-height: 20px;
}
a, a:link {
	color: #2799FA;
	font-weight: bold;
	text-decoration: none;
}
a:visited {
	color: #2799FA;
	font-weight: bold;
	text-decoration: none;
}
a:hover {
	color: #F90;
	text-decoration: underline;
}
a:focus {
	color: #2799FA;
}
a:active {
	color: #2799FA;
}
#wrapperbackground {
	background-color: #0B2653;
	background-image: url(images/body-bg.png);
	background-repeat: repeat-x;
	background-position: top;
		
}
#outerWrapper {
	text-align: left;
	width: 880px;
	margin-right: auto;
	margin-left: auto;
}
#header {
	height: 140px;
	text-align: left;
	padding-left: 10px;
}
#header #logo {
	color: #FFF;
	float: left;
	width: 350px;
	padding-top: 55px;
}
#header #links {
	color: #FFA600;
	font-size: 12px;
	font-weight: normal;
	float: right;
	width: 500px;
	text-align: right;
	padding-right: 0px;
	height: 35px;
	line-width: 540px;
}
#links a, #links a:active, #links a:visited {
	color: #FFA600;
	font-weight: normal;
}
#header #links a:hover {
	color: #FFF;
	text-decoration: none;
}
#socialbuttons {
	color: #FFF;
	letter-spacing:0px;
	width: 500px;
	padding-top: 5px;
}
#nav {
	clear: both;
	position: absolute;
	top: 105px;
	margin: 0px 0 -15px 0px;
	padding: 6px 0 0 10px;
	width:870px;
	left: 112px;
}

#nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#nav li {
	float: left;
	margin-right: 2px;
}

* html #nav li a { /* Filter for IE6 to prevent li stacking */
	float: left;
	text-decoration: none;
}

* html #nav li a span { /* Filter for IE6 to prevent li stacking */
	float: left;
	margin-left: 4px;
	text-decoration: none;
}

#nav li a {
	display: block;
	height: 27px;
	background: url(images/nav-left.png) left top no-repeat;
	font-size: 10pt;
	font-family: Arial, Helvetica;
	text-decoration: none;
  }  
  
#nav li a span {
	display: block;
	margin-left: 10px;
	padding-left: 5px;
	padding-right: 14px;
	line-height: 27px;
	font-weight: bold;
	color: #FFF;
	background: url(images/nav-right.png) right top no-repeat;
	text-decoration: none;
}

#nav li a:hover {
	background-position: left -27px;
	text-decoration: none;
	cursor: pointer; /* For IE6 */
}

#nav li a:hover span {
	background-position: right -27px;
	color: #061630;
}

#nav li.current_page a {
	background-position: left -27px;
}

#nav li.current_page a span {
	background-position: right -27px;
	color: #FFF;
}

#outerWrapper #feature {
	height: 225px;
	width: 880px;
	margin-left: 0px;
	margin-bottom: 5px;
	background-image: url(images/feature.jpg);
	background-repeat: no-repeat;
	background-position: center top;
}
#outerWrapper #subcontentWrapper {
	padding-right: 15px;
	padding-left: 15px;
	clear: both;
	padding-top: 20px;
	background-color: #FFF;
	padding-bottom: 40px;
	border-top-width: 4px;
	border-right-width: 4px;
	border-left-width: 4px;
	border-top-style: solid;
	border-right-style: solid;
	border-left-style: solid;
	border-top-color: #F90;
	border-right-color: #F90;
	border-left-color: #F90;
	background-image: url(images/footer-fade.jpg);
	background-repeat: repeat-x;
	background-position: bottom;
	height: 100%;
}
#outerWrapper #subcontentWrapper #rightColumn {
	float: right;
	width: 220px;
	background-color: #DBE7FB;
	border: 1px solid #DCDFE4;
	margin-bottom: 15px;
}
#outerWrapper #homecontentWrapper #content {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-bottom: 25px;
	color: #FFF;
	font-size: 12px;
	line-height: 18px;
	float: left;
	width: 880px;
}
#outerWrapper #subcontentWrapper #content {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-bottom: 15px;
	color: #333;
	font-size: 12px;
	line-height: 18px;
	float: left;
	width: 600px;
}
#content ul li {
	margin-bottom: 5px;
}
.hometitle {
	color:#89C5FA;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 28px;
	letter-spacing: -1px;
	line-height: 40px;
}
.homefeatureboxes {
	font-size: 11px;
	padding-top: 10px;
	line-height: 14px;
	padding-bottom: 20px;
	color: #FFF;
}
.homefeatureboxes p {
	padding-right:10px;	
	margin: 10px 0 5px 0;
}

.homefeatureboxes img {
	float: left;
	margin-top: 15px;
	margin-right: 10px;
	margin-bottom: 20px;
	display: block;
	padding-left: 10px;
}
.homeleft-box {
	float: left;
	width: 278px;
	margin-right: 17px;
	background-color: #0F3674;
	border: 1px solid #18ABF8;
}
.homemiddle-box {
	float: left;
	width: 278px;
	margin-right: 17px;
	background-color: #0F3674;
	border: 1px solid #18ABF8;
}
.homeright-box {
	float: left;
	width: 278px;
	background-color: #0F3674;
	border: 1px solid #18ABF8;
}.homeleft-box2 {
	float: left;
	width: 278px;
	margin-right: 17px;
	background-color: #0F3674;
	border: 1px solid #18ABF8;
}
.homemiddle-box2 {
	float: left;
	width: 278px;
	margin-right: 17px;
	background-color: #0F3674;
	border: 1px solid #18ABF8;
}
.homeright-box2 {
	float: left;
	width: 278px;
	background-color: #0F3674;
	border: 1px solid #18ABF8;
}
.homefeaturetitle {
	font-size: 23px;
	font-weight: normal;
	color: #F90;
	line-height: 25px;
	display: block;
	padding-bottom: 5px;
	padding-top: 5px;
	background-color: #0B2653;
	padding-left: 10px;
	font-family: Georgia, "Times New Roman", Times, serif;
	letter-spacing: -1px;
}
#rightColumnContent {
	width: 210px;
	color: #333;
	margin: 5px;
}
#rightColumnContent h3 {
	padding-top: 5px;
	padding-bottom: 6px;
	font-size: 18px;
	padding-right: 4px;
	padding-left: 4px;
	color: #036;
	font-family: Verdana, Geneva, sans-serif;
	letter-spacing: -1px;
	font-weight: normal;
}
#rightColumn ul {
	margin: 0px;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 0px;
}
#rightColumn ul li {
	list-style: none;
	display: inline;
}
#rightColumn ul li a {
	display: block;
	padding: 4px 4px 4px 6px;
	color: #036;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #B3CCF7;
}
#rightColumn ul li a:hover {
	text-decoration: none;
	background-color: #B0CBF7;
	color: #036;
}
#footer {
	color: #1B91E6;
	text-align: center;
	width: 880px;
	margin-right: auto;
	margin-left: auto;
	height: 30px;
	padding-top: 20px;
	padding-bottom: 10px;
}
#footer a, #footer a:hover, #footer a:visited, #footer a:active {
	color: #1C95EC;
}
.fltlft {
	float: left;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-top: 10px;
}
.fltrt {
	float: right;
	margin-left: 10px;
	margin-bottom: 10px;
	margin-top: 10px;
}
.center {
	display: block;
	margin-top: 10px;
	margin-right: auto;
	margin-bottom: 10px;
	margin-left: auto;
}
.sidebarlt {
	padding: 6px;
	border: 1px solid #BAD1F8;
	background-color: #FFF;
	color: #333;
}
.sidebardk {
	color: #333;
	border: 1px solid #87AFF1;
	padding: 6px;
	background-color: #A7C5F5;
}
.sidebardk a, .sidebardk a:hover, .sidebardk a:visited, sidebardk a:active {
	color: #000;
}
#credit {
	text-align: center;
	padding-top: 0px;
	padding-bottom: 8px;
	font-size: 11px;
	color: #12418D;
	width: 880px;
	margin-right: auto;
	margin-left: auto;
}
#credit a, #credit a:hover, #credit a:visited, #credit a:active, #credit a:focus {
	color: #12418D;
	font-weight: normal;
}
.featureboxes {
	font-size: 11px;
	padding-top: 10px;
	line-height: 14px;
	padding-bottom: 20px;
	float: left;
}
.featureboxes img {
	border: 1px solid #77859A;
}
.left-box {
	width: 180px;
	margin-right: 20px;
	float: left;
}
.middle-box {
	float: left;
	width: 180px;
	margin-right: 20px;
}
.right-box {
	float: left;
	width: 180px;
	margin-right: 0px;
}
.featuretitle {
	font-size: 16px;
	font-weight: bold;
	color: #036;
	line-height: 20px;
	display: block;
	padding-bottom: 0px;
	padding-top: 10px;
}
.readmore {
	background-image: url(images/arrow.png);
	background-repeat: no-repeat;
	background-position: left top;
	padding-left: 18px;
}

.clearFloat {
	clear: both;
	display: block;
}
.contacttext {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
	font-weight: normal;
}


Source Code

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title></title>
<!-- TemplateEndEditable -->
<style type="text/css" media="all">
<!--
@import url("../styles.css");
-->
</style>
<!--[if IE]>
<style type="text/css"> 
#outerWrapper #homecontentWrapper #content {
  zoom: 1;
}
</style>
<![endif]-->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
</head>
<body>

<div id="wrapperbackground">

  <div id="outerWrapper">
    <div id="header">
    
      4
      <div id="logo"><a href="#"><img src="../images/logo.png" alt="Logo" width="281" height="33" /></a><img src="../images/AC_plain_template.png" width="64" height="53" alt="logo" longdesc="Absolutely Clean Logo" /></div>
      
     <div id="links"><div id="socialbuttons"> <a href="http://facebook.com" target="_blank"><img src="../images/facebook_button.png" alt="Logo" width="25" height="25" /></a>&nbsp;&nbsp;&nbsp;  <a href="http://linkedin.com" target="_blank"><img src="../images/linkedin_button.png" width="25" height="25" alt="linkedin button" longdesc="http://linkenin.com" /></a>&nbsp;&nbsp;&nbsp;
         <a href="http://youtube.com" target="_blank"><img src="../images/youtube_button.png" width="25" height="25" alt="youtube" longdesc="http://youtube.com" /></a>&nbsp;&nbsp;&nbsp;
       <a href="http://twitter.com" target="_blank"><img src="../images/twitter_button.png" width="25" height="25" alt="Twitter" longdesc="http://twiter.com" /></a><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;About Us</a> | <a href="#">Contact Us</a> |   <strong>972.345.7370</strong>
      </div></div>
      <div class="clearFloat"></div>
    </div>
    <div id="nav">
      <ul>
        <li><a href="../index.html"><span>Home</span></a></li>
        <li><a href="../about_us.html"><span>About Us</span></a></li>
        <li><a href="../services_main_page.html"><span>Services</span></a></li>
        <li><a href="../why_green_cleaning.html"><span>Why Go Green</span></a></li>
        <li><a href="../cleaning_tips.html"><span>Cleaning Tips</span></a></li>
        <li><a href="../references.html"><span>References</span></a></li>
        <li><a href="../testimonials.html"><span>Testamonials</span></a></li>
        <li><a href="http://absolutelyclean.tumblr.com/"><span>Our Blog</span></a></li>
        <li><a href="../contact.html"><span>Contact</span></a></li>
      </ul>
    </div>
    <div id="feature"><object width="300" height="215"><param name="movie" value="http://www.youtube.com/v/1Hwd4ILNNCk&hl=en_US&fs=1&color1=0xe1600f&color2=0xfebd01&border=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/1Hwd4ILNNCk&hl=en_US&fs=1&color1=0xe1600f&color2=0xfebd01&border=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="300" height="215"></embed></object><img src="../images/feature_banner2.gif" width="580" height="215" alt="Banner" longdesc="main banner" /></div>
    <div id="homecontentWrapper">
      <div id="content"> <!-- TemplateBeginEditable name="Content" --> <span class="hometitle">Our Featured Services</span>
          <div class="homefeatureboxes">
          <div class="homeleft-box"> <span class="homefeaturetitle">Carpet Cleaning</span><img src="../images/carpet_cleaning.png" width="79" height="78" />
            <p>We take pride in our carpet cleaning. &quot;We will not leave the scene until the carpet stain is Absolutely Clean!&quot;</p>
            <p><a href="../carpet_cleaning.html">Read more...</a></p>
          </div>
          <div class="homemiddle-box"><span class="homefeaturetitle">Residential Cleaning</span><img src="../images/residential2.png" width="79" height="78" />
            <p>Providing professional residential home cleaning with a reputation for quality and reliability. </p>
            <p><a href="../residential_cleaning.html">Read more...</a></p>
          </div>
          <div class="homeright-box"><span class="homefeaturetitle">Comercial Cleaning</span><img src="../images/commercial.png" width="79" height="78" />
            <p> Your*<em>commercial</em>*needs are covered as we offer quality office*<em>cleaning services</em>. </p>
            <p><a href="../commercial_cleaning.html"> Read more...</a></p>
          </div>
          <br style="clear: both;" />
        </div>
        <div class="homefeatureboxes">
          <div class="homeleft-box2"> <span class="homefeaturetitle">Window Cleaning</span><img src="../images/window_cleaning.png" width="79" height="78" />
            <p>We guarantee timely, reliable and performed with the highest degree of quality and professionalism.</p>
            <p><a href="../window_cleaning.html">Read more...</a></p>
</div>
          <div class="homemiddle-box2"><span class="homefeaturetitle">Floor Cleaning</span><img src="../images/buffing.png" width="79" height="78" />
            <p>Simple maintenance and regular cleaning will increase the life of a floor by 30-40%.</p>
            <p><a href="../floor_cleaning.html">Read more...</a></p>
          </div>
          <div class="homeright-box2"><span class="homefeaturetitle">Office Cleaning</span><img src="../images/office.png" width="79" height="78" />
            <p>Absolutely Clean is equipped to serve with trained experienced insured and bonded staff. </p>
            <p><a href="../commercial_cleaning.html"> Read more...</a></p>
          </div>
          <br style="clear: both;" />
        </div>
        <p>&nbsp;</p>
        <!-- TemplateEndEditable --> </div>
      <br class="clearFloat" /><img src="http://www.justdreamweaver.com/templates/link/spacer.gif" width="1" height="1" />
    </div>
  </div>
</div>
<div id="footer">Copyright &copy; 2010 Absolutely Clean&nbsp;| <a href="#">Site Map</a> | <a href="#">Privacy Policy</a>
</div>
<!--The following code must be left in place and unaltered for free usage of this theme. If you wish to remove the links, visit http://www.justdreamweaver.com/dreamweaver-templates.html and purchase a template license.-->
<div id="credit"><a href="http://www.justdreamweaver.com/dreamweaver-templates.html">Free Dreamweaver CS4 templates</a> for  <a href="http://www.justdreamweaver.com">Adobe Dreamweaver</a></div>
</body>
</html>

I think if you just change the absolute positioning on your #nav to position: relative; that will take care of your problem. Save AP for when you absolutely must use it, and that's in few instances.

tim