User Name Password Register
DaniWeb IT Discussion Community
All
What is DaniWeb IT Discussion Community?
You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 374,458 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,795 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our HTML and CSS advertiser: Lunarpages Web Hosting
Views: 3244 | Replies: 5
Reply
Join Date: Aug 2005
Location: Atlanta, GA
Posts: 10
Reputation: Kschikan is an unknown quantity at this point 
Rep Power: 3
Solved Threads: 0
Kschikan Kschikan is offline Offline
Newbie Poster

Navigation Bar that extends the length of the page

  #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
AddThis Social Bookmark Button
Reply With Quote  
Join Date: Jul 2005
Posts: 69
Reputation: bkendall is an unknown quantity at this point 
Rep Power: 4
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

  #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  
Join Date: Aug 2005
Location: Atlanta, GA
Posts: 10
Reputation: Kschikan is an unknown quantity at this point 
Rep Power: 3
Solved Threads: 0
Kschikan Kschikan is offline Offline
Newbie Poster

Re: Navigation Bar that extends the length of the page

  #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  
Join Date: Aug 2005
Location: Atlanta, GA
Posts: 10
Reputation: Kschikan is an unknown quantity at this point 
Rep Power: 3
Solved Threads: 0
Kschikan Kschikan is offline Offline
Newbie Poster

Re: Navigation Bar that extends the length of the page

  #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  
Join Date: Sep 2004
Posts: 6,008
Reputation: Narue has much to be proud of Narue has much to be proud of Narue has much to be proud of Narue has much to be proud of Narue has much to be proud of Narue has much to be proud of Narue has much to be proud of Narue has much to be proud of 
Rep Power: 26
Solved Threads: 409
Super Moderator
Narue's Avatar
Narue Narue is offline Offline
Expert Meanie

Re: Navigation Bar that extends the length of the page

  #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.
Member of: Beautiful Code Club.
Reply With Quote  
Join Date: Aug 2005
Location: Atlanta, GA
Posts: 10
Reputation: Kschikan is an unknown quantity at this point 
Rep Power: 3
Solved Threads: 0
Kschikan Kschikan is offline Offline
Newbie Poster

Re: Navigation Bar that extends the length of the page

  #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  
Reply

Only community members can participate in forum threads. You must register or log in to contribute.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

 

DaniWeb HTML and CSS Marketplace
Thread Tools Display Modes

Similar Threads
Other Threads in the HTML and CSS Forum

All times are GMT -4. The time now is 12:48 pm.
Forum system based on vBulletin Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
©2003 - 2008 DaniWeb® LLC