I have a navigation bar which I want to appear on the bottom of each web page of a site. Each page is a different height (varies between 525 and 650px) and I would like to change the "top" property for the bar on each page without having to rewrite the entire definition(s) for each page. I have tried writing a definition for each page which contains just the "top" property (#home for example) while removing the "top property from the #navbar rule and then adding the "id" of home to the table in the html code, but have not been able to make that work. I am sure this is fairly straight forward, but it continues to confuse me.

[html code]

<div id="bottomnav">
<table "width="800" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<ul>
<li class="current"><a href="/">Home</a></li>
<li><a href="about.html">About Susie</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="work.html">How It Works</a></li>
<li><a href="start.html">Getting Started</a></li>
<li><a href="testimonials.html">Testimonials</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="contractors.html">Contractors Join</a></li>
</ul>
</td>
</tr>

<tr id="copyright">
<td>
<div align="center">&copy; 2008, Just Ask Susie
</div>
</td>
</tr>
</table>

[html code]


[css style sheet code]

#bottomnav {
width: 800px;
background-color:#97CCFF;
position:absolute;
top:610px;
text-align:center
}

#bottomnav ul {
padding: 0px;
list-style-type:none;
}

#bottomnav ul li {
display: inline;
}

#bottomnav ul li a {
padding: 8px;
text-decoration: none;
font-size: 10px;
color: #3300CC;
font-weight: bold;
}

#bottomnav ul li a:hover {
color: #FFF;
}

#bottomnav ul li.current a {
color:#84AAD9;
}

[css style sheet code]

The problem lies in the absolute positioning at 610px from the top.

I understand that. What I am trying to do is change the "top"number (610) depending on what page you are viewing. I thought it would be as simple as giving a different ID to each table (if you are looking at the table on the home page it has the ID of <table id="home">, if you are looking at the table on the about us page it has a different ID <table id=about> etc. By using that ID info and the original "bottomnav" rule I was hoping to set the top number for that page, something like this . . .


[code]

#home }
top: 545px;
}

[code}

I guess I am not making my self clear here.

Thanks for your input,

Bruce

You have your classes set incorrectly. It is seeing #HOME as a completely different division.



If you are writing you code like this:



The browser is trying to position "home" 545px from the top of "bottomnav" which is already 610px from the top of the page.

You need to remove the positioning from the #bottomnav and do something more like this:



So, in your HTML, it will look like this:



Am I making more sense now? Please tell me if I'm not....

-- BD

This post has been edited by BenignDesign: 28 Apr, 2008 - 05:57 PM