Welcome to WebmasterWorld Guest from 54.167.83.224

Forum Moderators: not2easy

Message Too Old, No Replies

Need help with background color on navigation

Trying to get it to run 100% of page

     
3:25 pm on Dec 3, 2007 (gmt 0)

New User

5+ Year Member

joined:Dec 3, 2007
posts:4
votes: 0


Hey everybody! I just joined the webmasterworld in seek of a problem that has been bugging me for over a week!

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.

3:34 pm on Dec 3, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Jan 13, 2003
posts:1240
votes: 0


you need to fake it. Use a background image on the body or the main container of your page, so it appears to run the full length of the page.
3:38 pm on Dec 3, 2007 (gmt 0)

New User

5+ Year Member

joined:Dec 3, 2007
posts:4
votes: 0


You mean use the transparent 1x1 spacer.gif? I was going to do that but the problem is on all of the pages I use the "<? include('left.php');?>" code. So all of my heights are going to be different.
6:34 am on Dec 4, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Mar 18, 2007
posts:671
votes: 0


No, spacer images are a totally different thing and are no longer necessary to use at all anymore.
I believe what he is referring to is faux columns.

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)

11:02 am on Dec 4, 2007 (gmt 0)

New User

5+ Year Member

joined:Sept 8, 2007
posts:3
votes: 0


Hi zreon,
The most ideal solution is, if you are using nested tables you need to specify the height as 100% of your left bar and the rest of your right section.
Specifying 100% will never give you problems irrespective the size of your web page.
I have done this in past and it works whatsoever.
..happy coding....
2:38 pm on Dec 4, 2007 (gmt 0)

New User

5+ Year Member

joined:Dec 3, 2007
posts:4
votes: 0


Here is what my left navigation bar looks like:

<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&amp;c=2">Detox Machines</a><br>
- <a href="http://www.example.com/cart.php?m=product_list&amp;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&amp;c=6">Foot Massagers</a><br />
- <a href="http://www.example.com/cart.php?m=product_list&amp;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.

4:00 pm on Dec 4, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Mar 18, 2007
posts:671
votes: 0


Why do you have things wrapped in a 1 celled table?
You may want to make the choice, if you want to use tables for non-semantic coding or not.
tables should really only be used for tabular data, not website layout. Floated divs are proper and sufficient for those purposes.

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.