Increasing Navigational Column

I am trying to make the navigational column to the left on http://www.strongfamilies.us/index.php longer so that I could fit in more links. How can I make this column longer? Thanks.

The problem you have is that you, or whoever built the site, created a static image as a background for the navigation column. Technically increasing the length is as simple as editing the CSS to increase the height of the DIV, or better yet, just removing the height altogether and letting the content determine that. Problem is that the background image will not adjust in height to fill the space. I would recommend removing the background image, the height setting, and the overflow:hidden for #main_nav, filling the background with the blue, and then using CSS3 drop shadows for the DIV. That way you can add list elements to your navigation and it would expand naturally to fit. For browsers that do not support the dropshadows, they would still see the blue navigation so they wouldn’t be the wiser.

BTW, I know you are trying to overlap the navigation on that blue line. But you don’t need position:relative to do that. You can take out that plus the related properties like top, left, and z-index and simply add this: “margin: -35px 20px 0 -10px;”

Thank you for your response. Could you please elaborate more on your response as I am not a web designer? Thanks.

Your styles for that sidebar are currently

#main_nav {
  background-image: url("../images/layout/[COLOR="#FF0000"]nav-background.png[/COLOR]");
  background-repeat: no-repeat;
  float: left;
  [COLOR="#FF0000"]height: 740px;[/COLOR]
  left: -10px;
  overflow: hidden;
  position: relative;
  top: -39px;
  width: 239px;
  z-index: 400;
}

To make the sidebar higher, you’d need to increase the height setting (in red above). But you’d also need to redo the bg image to be taller as well. Using fixed-height elements is not a good idea, but you are kind of stuck with that as long as you use a background image that can’t repeat (or ‘tile’).

As SDT76 pointed out the problem is really a planning issue. I would suggest more complex adjustments to you structure otherwise you will face this issue in future, or even simply when a visitor has enlarged fonts… ects.

THIS IS STILL A PATCH… but at least is a permanent one.
take a section from the middle of your sidebar bg image. It doesn’t have to be huge, 10-20px will do. Save it as nav-background_slice.png and put it in the same folder as your other images.


#main_nav {
  background-image: url("../images/layout/nav-background_slice.png");
  background-repeat: repeat-y;
  float: left;
  /*height: 740px;*/
  left: -10px;
  /*overflow: hidden;*/
  position: relative;
  top: -39px;
  width: 239px;
  z-index: 400;
  zoom:expression(
		runtimeStyle.zoom=1,
		insertAdjacentHTML('beforeEnd','<span class="after"></span>'),
		insertAdjacentHTML('afterBegin','<span class="before"></span>')
  );
}
#main_nav:before, #main_nav:after, #main_nav span.before, #main_nav span.after {display:block; height:20px;  background-image: url("../images/layout/nav-background.png"); background-repeat: no-repeat;}

#main_nav:before,  #main_nav span.before {background-position:top left;}
#main_nav:after, #main_nav span.after {background-position:bottom right;}

This in not the most graceful of solutions ( especially for IE<8) , but it’s the least work intensive.

Just a tip on tiding up your code a bit… get rid of all the BRs and the <div class=“clear”> and just add “overflow:hidden” to your the parent of the floated element ( I believe it’s Content)

Hope that helps.

Thank you for your responses. I cannot seem to find main.nav in any css file. Could you please tell me which file this is in? I apparently don’t have a file labelled nav.css in the Includes folder. I just have general.css, layout.css, and sitemap.css.

I just found nav.css and I adjusted the height several times, but the height of the navigational column never changed. The nav.css is below. Please advise. Thanks.

#main_nav {
background-image: url(‘…/images/layout/nav-background.png’);
background-repeat: no-repeat;
width: 239px;
/*
margin-top: -29px;
*/
float: left;
left: -10px;
z-index: 400;
position: relative;
top: -39px;
height: 740px;
overflow: hidden;
}

#main_nav ul {
margin: 0px;
padding: 10px;
}
#main_nav ul li {

margin: 0px;
padding: 3px;
list-style: none;
margin: 5px;
width: 220px;

}
#main_nav ul li a.active {
color: #690;
font-size: 14px;
font-weight: bold;
padding-left: 30px;
background-image: url(‘…/images/layout/active-menu-arrow.png’);
}

#main_nav ul li a:hover {
color: #690;
font-size: 14px;
font-weight: bold;
padding-left: 30px;
background-image: url(‘…/images/layout/active-menu-arrow.png’);
}

#main_nav ul li a {
color: #333;
font-size: 14px;
text-decoration: none;
padding-left: 15px;
display: block;
background-image: url(‘…/images/layout/menu-arrow.png’);
background-repeat: no-repeat;
background-position: 0px 5px;
}

You’ve posted your CSS with no change! You have to change 740px to something higher, like 800px, but you will also have to alter the image height as well. Some good suggestions above.

#main_nav {
background-image: url('../images/layout/nav-background.png');
background-repeat: no-repeat;
width: 239px;
/*
margin-top: -29px;
*/
float: left;
left: -10px;
z-index: 400;
position: relative;
top: -39px;
[COLOR="#FF0000"]height: 740px;[/COLOR]
overflow: hidden;
}

Personally, I still think you should just nix the height altogether, and let the content determine that.

Yes indeed, that’s the ideal. Relying on a fixed height and a background image that can’t expand is a big fail on the web. Anyone who has font sizes increased by default will see the contents of the sidebar hanging out like a hernia.

:lol:

Not only that, the list navigation will start playing peekaboo because of the overflow:hidden