Nav bar alll the way to the bottom

[Robert_R]

Hey guy and girls. The X-mas stress is getting to me and I've decided to throw my arms up in the air. LOL!

I'm hopeful that someone can give me a hand. I've included a screen shot of the website I'm working and the relevant CSS code is located within this post (bottom)

I'd like the Nav bar to go all the way to the bottom of the screen.

Thanks and Happy Holidays to all!!


#navBar{
margin: 0 79% 0 0;
padding: 24px;
background-color: #eeeeee;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}


*********** #navBar link styles ***********/

#navBar ul a:link, #navBar ul a:visited {display: block;}
#navBar ul {list-style: none; margin: 0; padding: 0;}

/* hack to fix IE/Win's broken rendering of block-level anchors in lists */
#navBar li {border-bottom: 1px solid #EEE;}

/* fix for browsers that don't need the hack */
html>body #navBar li {border-bottom: none;}

[pcthug]

Maybe the code would be helpful so I could Trial and Error, But why dont you try adding height: 100% to #navbar

[_Aerospace_Eng_]

Put the content and nav column inside of a container, set the background of the container to match the background color of the nav.

[Robert_R]

Maybe the code would be helpful so I could Trial and Error, But why dont you try adding height: 100% to #navbar

Nope. Didn't do a thing.

[Robert_R]

Put the content and nav column inside of a container, set the background of the container to match the background color of the nav.

I think I have it like that already my friend.

Edit: Except for the color part. :p

What do you think anyway about the code below and then affix the aforementioned color

<div id="content">
<h2 id="pageName">LBTB</h2>
<div class="feature">
<img src="LBTB.jpg" alt="logo" width="300" height="215">
<h3>Intro</h3>
<p>
Are you a resident or company located in Northern New Jersey? Is the proper maintenance and care of your lawn a concern? Do you wish for an organization that would provide you with timely, efficient, courteous and meticulous service? Whether residentail or commercial you should seriously consider Lawns By The Best Landscaping for all your landscaping needs.
</p>
</div>
<div class="story">
<h3>Spring/Summer</h3>
<p>
We will do more than the basic lawn mowing service.
</p>
<p>
No two lawns are alike and subsequently your maintenance needs will vary. This is where we come in. Factors such as your lifestyle, type of lawn grass, water, fertilizer, etc. will determine which service or services are right for you. And we will determine this for all our customers not just the chosen few. After all we are here for you. If you look good we look good.
</p>
<p>
For more information please click here or on our Services link.
</p>
</div>
<div class="story">
<h3>Fall/Winter</h3>
<p>
Just because the temperature goes down and the amount of daylight decreases LBTB does not stop working for you. We're committed to providing you with year round service.
</p>
<p>
Fall cleanup and snow removal are just two more off season services which we are happy to provide to our customers.
</p>
<p>
For more information please click here or on our Service link.
</p>
</div>
</div>
<!--end content -->
<div id="navBar">
<div id="sectionLinks">
<ul>
<li><a href="#">Home</a></li>
<li><a href="aboutus.htm">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Sample Images</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>

[Robert_R]

Maybe the code would be helpful so I could Trial and Error, But why dont you try adding height: 100% to #navbar

At 900 px it worked.

[_Aerospace_Eng_]

Can you post a link to the page? How was I supposed to know that you have your code in a container, from the code you posted you don't have that.

[Robert_R]

Can you post a link to the page? How was I supposed to know that you have your code in a container, from the code you posted you don't have that.

Here is the HTML bro. I can't provide a link to you because I'm still under construction.

I'm not sure about the 900 px solution (see 2 posts above) anymore. It renders beautifully in IE but terribly in Dreamweaver. :confused:

I'll provide the CSS in the post after this one.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Lawns By The Best Landscaping</title>
<link rel="stylesheet" href="LBTB.css" type="text/css">
</head>
<body bgcolor="#000000" text="#008000" link="#33FF00" vlink="#666666" alink="#666600">
<div id="masthead">
<h1 id="siteName">Lawns By The Best Landscaping</h1>
</div>
<!-- end masthead -->
<div id="content">
<h2 id="pageName">LBTB</h2>
<div class="feature">
<img src="LBTB.jpg" alt="logo" width="300" height="215">
<h3>Intro</h3>
<p>
Are you a resident or company located in Northern New Jersey? Is the proper maintenance
and care of your lawn a concern? Do you wish for an organization that would provide you
with timely, efficient, courteous and meticulous service? Whether residential or commercial
you should seriously consider Lawns By The Best Landscaping for all your landscaping needs.
</p>
</div>
<div class="story">
<h3>Spring/Summer</h3>
<p>
We will do more than the basic lawn mowing service.
</p>
<p>
No two lawns are alike and subsequently your maintenance needs will vary. This is where we come in.
Factors such as your lifestyle, type of lawn grass, water, fertilizer, etc. will determine which service
or services are right for you. And we will determine this for all our customers not just the chosen few.
After all we are here for you. If you look good we look good.
</p>
<p>
For more information please click here or on our Services link.
</p>
</div>
<div class="story">
<h3>Fall/Winter</h3>
<p>
Just because the temperature goes down and the amount of daylight decreases LBTB does not
stop working for you. We're committed to providing you with year round service.
</p>
<p>
Fall cleanup and snow removal are just two more off season services which we are happy
to provide to our customers.
</p>
<p>
For more information please click here or on our Service link.
</p>
</div>
</div>
<!--end content -->
<div id="navBar">
<div id="sectionLinks">
<ul>
<li><a href="#">Home</a></li>
<li><a href="aboutus.htm">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Sample Images</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<div id="advert">
<img src="BobbyRagsLogo_Thumbnail.jpg" alt="Logo" width="111" height="83">
</div>
</div>
<!--end navbar -->
<div id="siteInfo">
<a href="#">About Us</a> | <a href="#">Contact Us</a> | &copy;2005 Lawns By The Best Landscaping
</div>
<br>
</body>
</html>

[Robert_R]

CSS code as promised.



/***********************************************/
/* LBTB */
/***********************************************/

/***********************************************/
/* HTML tag styles */
/***********************************************/

body{
font-family: Arial, sans-serif;
color: #008000;
line-height: 1.166;
margin: 0px;
padding: 0px;
}

a:link, a:visited, a:hover {
color: #006699;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}
/* overrides decoration from previous rule for hovered links */

h1, h2, h3, h4, h5, h6 {
font-family: Arial,sans-serif;
margin: 0px;
padding: 0px;
}

h1{
font-family: Verdana,Arial,sans-serif;
font-size: 120%;
color: #FF0000;
}

h2{
font-size: 114%;
color: #FF0000;
}

h3{
font-size: 100%;
color: #FF0000;
}

h4{
font-size: 100%;
font-weight: normal;
color: #333333;
}

h5{
font-size: 100%;
color: #334d55;
}

ul{
list-style-type: square;
}

ul ul{
list-style-type: disc;
}

ul ul ul{
list-style-type: none;
}

label{
font: bold 100% Arial,sans-serif;
color: #334d55;
}


/***********************************************/
/* Layout Divs */
/***********************************************/

#masthead{
margin: 0;
padding: 10px 0px;
border-bottom: 1px solid #cccccc;
width: 100%;
}

#navBar{
margin: 0 79% 0 0;
padding: 0px;
background-color: #333333;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
height: 900px;
}

#content{
float:right;
width: 75%;
margin: 0;
padding: 0 3% 0 0;
}


/***********************************************/
/*Component Divs */
/***********************************************/

#siteName{
margin: 0px;
padding: 0px 0px 10px 10px;
}


/*************** #pageName styles **************/

#pageName{
padding: 0px 0px 10px 10px;
}


/************** .feature styles ***************/

.feature{
padding: 0px 0px 10px 10px;
font-size: 80%;
}

.feature h3{
padding: 30px 0px 5px 0px;
text-align: center;
}

.feature img{
float: left;
padding: 0px 10px 0px 0px;
margin: 0 5px 5px 0;
}
/* adjust margins to change separation between the feature image and text flowing around it */


/************** .story styles *****************/

.story{
clear: both;
padding: 10px 0px 0px 10px;
font-size: 80%;
}

.story p{
padding: 0px 0px 10px 0px;
}


/************* #siteInfo styles ***************/

#siteInfo{
clear: both;
border: 1px solid #cccccc;
font-size: 75%;
color: #cccccc;
padding: 10px 10px 10px 10px;
margin-top: -1px;
}
/* negative top margin pulls siteinfo up so its top border overlaps (and thus lines up with)
the bottom border of the navBar in cases where they "touch" */

#siteInfo img{
padding: 4px 4px 4px 0px;
vertical-align: middle;
}


/*********** #navBar link styles ***********/

#navBar ul a:link, #navBar ul a:visited {display: block;}
#navBar ul {list-style: none; margin: 0; padding: 0;}

/* hack to fix IE/Win's broken rendering of block-level anchors in lists */
#navBar li {border-bottom: 1px solid #EEE;}

/* fix for browsers that don't need the hack */
html>body #navBar li {border-bottom: none;}


/************** #advert styles **************/

#advert{
padding: 10px 0px 0px 10px;
font-size: 80%;
border-top: 1px solid #cccccc;
}

#advert img{
display: block;
}

[pcthug]

After skimming over your code I see a reference

<div id="sectionlinks">


But I do not see any css code to match.

And another thing

At 900 px it worked.

Will only work if all of your pages are of the same vertical height.

[pcthug]

So I just messed with your code, and...



Well it worked. But I don't really know why it work. Here's the changes;

OLD CODE

<!--end content -->
<div id="navBar">
<div id="sectionlinks">
<ul>
<li><a href="#">Home</a></li>
<li><a href="aboutus.htm">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Sample Images</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<div id="advert">
<img src="BobbyRagsLogo_Thumbnail.jpg" alt="Logo" width="111" height="83">
</div>
</div>
<!--end navbar -->

NEW CODE

<!--end content -->
<div id="navBar">
<div id="sectionlinks">
<ul>
<li><a href="#">Home</a></li>
<li><a href="aboutus.htm">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Sample Images</a></li>
<li><a href="#">Contact Us</a></li>
</ul>

<div id="advert">
<img src="BobbyRagsLogo_Thumbnail.jpg" alt="Logo" width="111" height="83">
</div>
</div>
<!--end navbar -->

And to the CSS

OLD CODE

#navBar{
margin: 0 79% 0 0;
padding: 0px;
background-color: #333333;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
height: 900px;
}

NEW CODE

#navBar{
margin: 0 79% 0 0;
padding: 0px;
background-color: #333333;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
height: 100%;
}

What I've done is remove what seems to be the closing tag of sectionlinks, and change the navBar height to 100%.

To save you some time here are some brief results

FIREFOX::

NavBar streches all the way to the bottom, I suggest Maybe absolute positioning it, and changing the margin to ##px

INTERNET EXPLORER:: No major changes, but you should design for FireFox not IE, with that said 90%+ users have IE installed on there systems.

[Robert_R]

To save you some time here are some brief results

FIREFOX::

NavBar streches all the way to the bottom, I suggest Maybe absolute positioning it, and changing the margin to ##px

INTERNET EXPLORER:: No major changes, but you should design for FireFox not IE, with that said 90%+ users have IE installed on there systems.

Thanks for all your help I appreciate it. :)

Secondly, so we're on the same page. What you're saying is that with the changes you made the nav bar reaches the bottom in Firefox but doesn't in IE?

Because I use IE (I'll install Firefox later today) and the navbar doesn't reach the bottom. It looks good but the intention didn't happen.

Again, many thanks!