Forum Moderators: not2easy
I am building a website with a left side navigation. The background color for this is different then the rest of the page. For the life of me, I cannot figure out how to make this background color run the entire height of the page.
Some of my pages are very long, so the color just cuts off on the left side leaving a big empty boring whitespace.
Is there a simple way to accomplish this with css?
Any advice would be greatly appreciated.
Now, you said there's whitespace under the menu, you mean actual white (or possibly the default color for the browser), or just the backgroudn you assigned to the rest of the page?
Now if the answer is it's actually white, and you wouldn't mind if it was just the color of the main page, then you shouldn't need to do much changing. The changing in question depends on your code, which you haven't supplied. To be sure of what your problem is, and for a solution, it would be good to post the relevant CSS and HTML for the page in question.
Now, if you want the navigation to be essentially a column, which spans the entire height of the page, then you're looking at a technique called "faux columns". This will assign the background color (or image) to the column to appear to stretch the div to the bottom of the page. It's downside is that typically (the basic faux columns) when that's done, your column needs to have a fixed with. I think certain designs don't need to be though, but just using ems for with is almost always good enough (will always fit text the same proportions, so you don't get nav items spanning two lines and such)
<div class="sidebar">
<table bgcolor="#223553" align="left" width="160" border="0"> <tr>
<td>
<!-- Keep all menus within masterdiv-->
<div id="masterdiv">
<div border="1" class="menutitle"><a href="./index.php">Home</a></div>
<div class="menutitle" onclick="SwitchMenu('sub1')">Products</div>
<span class="submenu" id="sub1">
- <a href="http://www.example.com/cart.php?m=product_list&c=2">Detox Machines</a><br>
- <a href="http://www.example.com/cart.php?m=product_list&c=3">Array Modules</a><br>
- <a href="revised.htm">Foot Tubs</a><br>
- <a href="http://www.example.com/cart.php?m=product_list&c=6">Foot Massagers</a><br />
- <a href="http://www.example.com/cart.php?m=product_list&c=7">Marketing</a>
</span>
<div class="menutitle"><a href="./about.php">About Us</a></div>
<div class="menutitle"><a href="./contact.php">Contact Us</a></div>
<div class="menutitle"><a href="./detox.php">Detox</a></div>
<div class="menutitle"><a href="./articles.php">Articles</a></div>
<div class="menutitle"><a href="./testimonials.php">Testimonials</a></div>
<div class="menutitle"><a href="./faq.php">FAQ's</a></div>
</div>
</table>
</div>
And here is my css:
* html ul li a {
width: 1%;
}.menutitle{
border-bottom:1px solid #304961;
margin-top:-10px
cursor:pointer;
background-color:#223553;
font-size: 16px;
line-height:20px;
color:#ffffff;
padding:2px;
text-align:center;
display:block;
position:relative;
zoom:1.0;
}
.menutitle a{
cursor:pointer;
background-color:#223553;
font-size: 16px;
line-height:20px;
color:#ffffff;
width:160px;
text-align:center;
display:block;
}
.menutitle a:hover{
cursor:pointer;
background-color:#ffffff;
color:#000000;
display:block;
text-decoration: none;
}
.submenu{
margin-bottom: 0.5em;
color:#ffffff;
}
.submenu a{
margin-bottom: 0.5em;
color:#ffffff;
}
.left1 {color: #FFFFFF}
.style2 {font-size: 16px; color: #FFFFFF;}
</style>
I was trying to figure out the faux columns but I can't seem to get them to work.
If you need help with faux columns, you should look it up on the internet (including here). These forums have many references to faux columns, so it shouldn't be very hard.
