Results 1 to 4 of 4

Thread: Problems Extending Navigation Panel to Footer

  1. #1
    Join Date
    Jul 2012
    Posts
    54
    Thanks
    69
    Thanked 0 Times in 0 Posts

    Default Problems Extending Navigation Panel to Footer

    I would like to extend my left-hand navigation panel to the footer, so the panel does not come to abrupt end, which tends to look a bit odd.

    Here is the way one of the pages looks now: http://wildadirondacks.org/adirondack-wildlife.html

    Below is a picture of how I would like a page to look, with the left navigation panel extended down beyond the last navigation tab, to the top of the footer.

    Click image for larger version. 

Name:	Wild-Adirondacks-Navigation-Panel-Problem.jpg 
Views:	78 
Size:	103.4 KB 
ID:	6160

    I know there is probably a very simple solution, but I have spent many hours scouring the web for fixes and trying out various modifications of the css. I have tried all sorts of things (changing height, min-height, etc), but nothing works. Could the fix somehow be related to my old nemesis, box-sizing: border-box?

    If there is no simple solution, I would be satisfied with a solution that did not extend the navigation panel completely to the footer, but just far enough so the end is not abrupt. (I thought padding might work, but alas...) I have a gradient on the navigation panel, so the panel would just fade gracefully into white several inches or so below the last navigation tab. Anything to avoid the abrupt end.

    Any suggestions?

    Thanks, ellen

    Here is the relevant css (asideLeft is my left-hand navigation panel):

    Code:
    	/* These style determine how the page will look on a desktop with a viewing window from 1200 to 1400 pixels wide.  */
    		
    .container {
      width: 100%;
      margin: 0 auto;
    
    }
    .Main {
    	width: 80%;
    }
    .asideLeft {
    	float: left;
    background: #e6e9f1; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(rgba(230,233,241,1.00),rgba(230,233,241,0)); /*Safari 5.1-6*/
    background: -o-linear-gradient(rgba(230,233,241,1.00),rgba(230,233,241,0)); /*Opera 11.1-12*/
    background: -moz-linear-gradient(rgba(230,233,241,1.00),rgba(230,233,241,0)); /*Fx 3.6-15*/
    background: linear-gradient(rgba(230,233,241,1.00), rgba(230,233,241,0)); /*Standard*/ 
    	margin-left: 10%;
    	width: 25%;
    	margin-right: 0px;
    	font-size: 1em;
    }
    
    .sectionRight {
    	width: 53%;
    	float: right;
    	margin-left: 2%;
    	text-align: left;
    	font-size: 1.2em;
    	margin-right: 10%;
    }
    footer {
    	width: 100%;
    	background-color: rgba(86,95,100,1.00);
    	float: left;
    	margin: 0 auto;
    	margin-bottom: 10px;
    }

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,226
    Thanks
    75
    Thanked 3,386 Times in 3,347 Posts
    Blog Entries
    12

    Default

    You may get other responses on this that are more in line with what you're asking, but - just my 2 cents, I think it's fine as is. You do need room for the accordion to expand when it's activated. Many sites have content that "runs out" abruptly in one column while continuing in another. Having a small gradient at the bottom of the accordion might not be such a bad thing though. But I think finding an optimal color for it would be more important. It looks good with all the pages except the plants one. Perhaps the easiest integration there would be to have a different banner image for plants. One with more blues and greens, less yellows and browns.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    ellenjones6 (03-21-2017)

  4. #3
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,035
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    I like to use a pseudo element to do this kind of thing - similar to what's described here http://callmenick.com/post/css-equal...different-ways (although you could try all 3)

    If 100% height doesn't work in this case, try absolutely positioning with top, left, and bottom, all set as 0. You might need to offset the bottom value to stop above your footer though (on mobile so haven't/can't see your markup)
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  5. The Following User Says Thank You to Beverleyh For This Useful Post:

    ellenjones6 (03-21-2017)

  6. #4
    Join Date
    Jul 2012
    Posts
    54
    Thanks
    69
    Thanked 0 Times in 0 Posts

    Default

    Thank you. This looks a bit complicated. I think I will need to experiment with each of these three strategies using demo pages, to see how everything works, before I try to apply any of them to my web site. I'll give it a try after I finish migrating the shrub pages from my old site. Thanks again! ellen

Similar Threads

  1. move navigation panel to the top of the gallery
    By jjincdesign in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 10-25-2016, 08:16 PM
  2. SimpleGallery navigation panel help needed
    By robj98 in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 12-06-2011, 11:45 AM
  3. Slide-up footer panel push content up?
    By davelf in forum Looking for such a script or service
    Replies: 3
    Last Post: 01-21-2011, 07:42 AM
  4. Resolved Sticky panel on footer
    By davelf in forum Looking for such a script or service
    Replies: 2
    Last Post: 10-26-2010, 02:58 PM
  5. Footer Problems
    By Woody in forum CSS
    Replies: 4
    Last Post: 07-27-2006, 07:49 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •