•
•
•
•
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 391,944 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 3,882 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: 3404 | Replies: 5
![]() |
| |
•
•
Join Date: Aug 2005
Location: Atlanta, GA
Posts: 10
Reputation:
Rep Power: 4
Solved Threads: 0
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
Thanks in advance
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/
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/
•
•
Join Date: Aug 2005
Location: Atlanta, GA
Posts: 10
Reputation:
Rep Power: 4
Solved Threads: 0
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?
•
•
Join Date: Aug 2005
Location: Atlanta, GA
Posts: 10
Reputation:
Rep Power: 4
Solved Threads: 0
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?
#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?
>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.
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.
•
•
Join Date: Aug 2005
Location: Atlanta, GA
Posts: 10
Reputation:
Rep Power: 4
Solved Threads: 0
>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
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
![]() |
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
•
•
•
•
•
•
•
•
DaniWeb HTML and CSS Marketplace
- Photoshop: create a transparent navigation bar (Web Design Tutorials)
- Help with my Navigation bar (JavaScript / DHTML / AJAX)
- How to hide navigation bar (HTML and CSS)
- Photoshop: create a tabbed navigation bar (Web Design Tutorials)
- css to make navigation bar (HTML and CSS)
- New windows popping up for no apparent reason (Web Browsers)
Other Threads in the HTML and CSS Forum
- Previous Thread: Need some help with some CSS issues....
- Next Thread: Problem with window.open in Netscape7.2



Hybrid Mode