Navigation Bar that extends the length of the page

Reply

Join Date: Aug 2005
Posts: 10
Reputation: Kschikan is an unknown quantity at this point 
Solved Threads: 2
Kschikan Kschikan is offline Offline
Newbie Poster

Navigation Bar that extends the length of the page

 
0
  #1
Aug 5th, 2005
So, I'm making a page with navigation bars on the left and the right, and I want them to extend to the bottom of the page regardless of the length of the content of either the nav bar, or the page content. Right now my navigation is done with a table. I've tried setting the height attribute to 100% to no avail. If possible, I'd like to do this with CSS, in a browser independent way. Any suggestions?

Thanks in advance
Reply With Quote Quick reply to this message  
Join Date: Jul 2005
Posts: 69
Reputation: bkendall is an unknown quantity at this point 
Solved Threads: 0
bkendall's Avatar
bkendall bkendall is offline Offline
Junior Poster in Training

Re: Navigation Bar that extends the length of the page

 
0
  #2
Aug 5th, 2005
It would be helpful if you had an example for us to look at but the easiest way to give the impression that a "bar" goes the length of the page is to put a bgcolor on the cell so that it matches. if you want an image to extend the full length of the cell you can use a repeating bgimage.

Both of these can also be done with css as well and there are lots of good examples out there just google css 3 column layouts. http://www.saila.com/usage/layouts/
Reply With Quote Quick reply to this message  
Join Date: Aug 2005
Posts: 10
Reputation: Kschikan is an unknown quantity at this point 
Solved Threads: 2
Kschikan Kschikan is offline Offline
Newbie Poster

Re: Navigation Bar that extends the length of the page

 
0
  #3
Aug 5th, 2005
Apologies. A testing version of the page I'm working on can be found at http://www.prism.gatech.edu/~gtg216r/oagt.html If you'll notice the nav bars to the left and the right (in old gold) they don't extend to the bottom of the page. They are colored just fine, but the table ends and I'm left with blank space at the bottom. I couldn't find any solutions on the link you provided (although I may have just missed them) Any more help?
Reply With Quote Quick reply to this message  
Join Date: Aug 2005
Posts: 10
Reputation: Kschikan is an unknown quantity at this point 
Solved Threads: 2
Kschikan Kschikan is offline Offline
Newbie Poster

Re: Navigation Bar that extends the length of the page

 
0
  #4
Aug 8th, 2005
I figured out how to do this. The best way is to us a div, instead of a table. (which really cut down on filesize and makes it render faster anyway :mrgreen: ) the code for the right nav bar is included below.

#right {
position: absolute;
top: 0px;
right: 0px;
width: 15%;
min-height: 100%;
background-color: #B5A642;
}

Unfortunately, IE6 doens't render this correctly. (Curse you, Microsoft!) Anyone know of a hack to make this work in IE also?
Reply With Quote Quick reply to this message  
Join Date: Sep 2004
Posts: 7,541
Reputation: Narue has a reputation beyond repute Narue has a reputation beyond repute Narue has a reputation beyond repute Narue has a reputation beyond repute Narue has a reputation beyond repute Narue has a reputation beyond repute Narue has a reputation beyond repute Narue has a reputation beyond repute Narue has a reputation beyond repute Narue has a reputation beyond repute Narue has a reputation beyond repute 
Solved Threads: 704
Team Colleague
Narue's Avatar
Narue Narue is offline Offline
Code Goddess

Re: Navigation Bar that extends the length of the page

 
0
  #5
Aug 8th, 2005
>Anyone know of a hack to make this work in IE also?
Use a background image with a different color for the navigation bar. Repeat it down the page, then set up your divs so that they fit nicely onto the image. The effect is a perfect navigation bar that goes all the way from the top to the bottom regardless of page length or window size.
I'm here to prove you wrong.
Reply With Quote Quick reply to this message  
Join Date: Aug 2005
Posts: 10
Reputation: Kschikan is an unknown quantity at this point 
Solved Threads: 2
Kschikan Kschikan is offline Offline
Newbie Poster

Re: Navigation Bar that extends the length of the page

 
0
  #6
Aug 8th, 2005
>regardless of page length or window size.

While a background image will work regardlesss of page length, I'd have to disagree about window size. My columns are relative width (and I'd like to keep them that way) which means that someone viewing on a 800x600 might see the "bar" fine, but someone on a 1280x1024 resolution like me will notice that something's amiss. Not to mention that I have a nav bar on both sides of the page, and then my background image will either only cover one of them, or I'll run into the window size problem again
Reply With Quote Quick reply to this message  
Reply

This thread is more than three months old.
Perhaps start a new thread instead?
Message:



Similar Threads
Other Threads in the HTML and CSS Forum
Thread Tools Search this Thread



About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC