homepage Welcome to WebmasterWorld Guest from 54.204.127.59
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Need help with background color on navigation
Trying to get it to run 100% of page
zreon




msg:3519320
 3:25 pm on Dec 3, 2007 (gmt 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.

 

benihana




msg:3519330
 3:34 pm on Dec 3, 2007 (gmt 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.

zreon




msg:3519333
 3:38 pm on Dec 3, 2007 (gmt 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.

Xapti




msg:3519936
 6:34 am on Dec 4, 2007 (gmt 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)

nimit




msg:3520017
 11:02 am on Dec 4, 2007 (gmt 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....

zreon




msg:3520135
 2:38 pm on Dec 4, 2007 (gmt 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.

Xapti




msg:3520207
 4:00 pm on Dec 4, 2007 (gmt 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved