By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,247 Members | 1,057 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,247 IT Pros & Developers. It's quick & easy.

how to force navigation column to be same color to the bottom?

P: n/a
I want the <div id="navigation"column to be the same color all the way to
the bottom. The "background-image: url(bg_menu_tile.gif);" was a try to
force it with a long 1-pixel graphic - didn't work. Any ideas?
Here's the HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="test.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="top">
<p><img src="logo.gif"></p>
</div>
<div id="values">
<div id="values1"><img src="value1.gif"></div>
<div id="values2"><img src="value2.gif"></div>
<div id="values3"><img src="value3.gif"></div>
<div id="values4"><img src="value4.gif"></div>
</div>
<div id="content">
<h3>Here to help</h3>
</div>
<div id="navigation">
<ul id="mainnav">
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
<li><a href="#">menu4</a></li>
</ul>
</div>
<div id="footer">Copyright &copy; 2006</div>
</div>
</body>
</html>

here's the css:
/* CSS Document */
body {
margin: 0;
padding: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
text-align: center;
}
#wrapper {
text-align: left;
width: 800px;
margin-right: auto;
margin-left: auto;
margin-top: 10px;
padding: 20px 0 0 0;
background-image: url(top.gif);
background-repeat: repeat-x;
background-position: left top;
border-top: 2px solid #722100;
border-left: 2px solid #722100;
border-right: 2px solid #722100;
border-bottom: 2px solid #722100;
}
#top {
height: 4em;
padding: 5px 0px 0px 5px;
}
#values {
border-top: 1px solid #778899;
border-bottom: 1px solid #FFF;
height: 5em;
}
#values1, #values2, #values3, #values4 {
float: left;
color: #FFFFFF;
padding: 5px;
height: 5em;
width: 189px;
margin-right: 1px;
}
#values1 {
background-color: #FFFFCC;\
}
#values2 {
background-color: #FFFFCC;
}
#values3 {
background-color: #FFFFCC;
}
#values4 {
background-color: #FFFFCC;
width: 190px;
margin-right: 0;
}
#content {
background-color: #FFFFFF;
width: 580px;
float: right;
padding: 0px 10px 0 0;
font-size: 12px
}
#content h3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #B54B27;
}
#navigation {
float: left;
width: 180px;
background-image: url(bg_menu_tile.gif);
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#navigation li {
width: 180px;
border-bottom: 1px solid #ED9F9F;
margin: 0;
padding: 0;
font-size: 80%;
vertical-align: bottom;
}
#navigation a:link, #navigation a:visited {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 1px solid #722100;
border-right: 1px solid #722100;
/* background-color: #D3D2B6;*/
color: #000000;
text-decoration: none;
}
#navigation a:hover {
background-color: #B54B27;
color: #FFFFFF;
}
#navigation ul.subnav {
margin-left: 12px;
}
#navigation ul.subnav li {
border-bottom: 1px solid #722100;
width: 168px;
}
#navigation .subnav a:link, #navigation ul.subnav a:visited {
background-color: #661200;
color: #722100;
}
#footer {
clear: both;
padding: 10px 0 10px 255px;
font-size: 70%;
color: #AAAAAA;
background-color: transparent;
}
Sep 30 '06 #1
Share this Question
Share on Google+
3 Replies


P: n/a
On 2006-09-30, Paul <no*********@nowhere.invalidwrote:
I want the <div id="navigation"column to be the same color all the way to
the bottom.
It is isn't it? On Firefox if I set #navigation to background-color:
green, I get green all the way to #footer. Obviously you can give
#footer a background-color too if you want.
The "background-image: url(bg_menu_tile.gif);" was a try to force it
with a long 1-pixel graphic - didn't work.
That shouldn't be necessary, background-color should work just as well.
Any ideas?
Don't understand the problem I'm afraid, you have to explain it in more
detail.
Here's the HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="test.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="top">
<p><img src="logo.gif"></p>
</div>
<div id="values">
<div id="values1"><img src="value1.gif"></div>
<div id="values2"><img src="value2.gif"></div>
<div id="values3"><img src="value3.gif"></div>
<div id="values4"><img src="value4.gif"></div>
</div>
<div id="content">
<h3>Here to help</h3>
</div>
<div id="navigation">
<ul id="mainnav">
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
<li><a href="#">menu4</a></li>
</ul>
</div>
<div id="footer">Copyright &copy; 2006</div>
</div>
</body>
</html>

here's the css:
/* CSS Document */
body {
margin: 0;
padding: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
text-align: center;
}
#wrapper {
text-align: left;
width: 800px;
margin-right: auto;
margin-left: auto;
margin-top: 10px;
padding: 20px 0 0 0;
background-image: url(top.gif);
background-repeat: repeat-x;
background-position: left top;
border-top: 2px solid #722100;
border-left: 2px solid #722100;
border-right: 2px solid #722100;
border-bottom: 2px solid #722100;
}
#top {
height: 4em;
padding: 5px 0px 0px 5px;
}
#values {
border-top: 1px solid #778899;
border-bottom: 1px solid #FFF;
height: 5em;
}
#values1, #values2, #values3, #values4 {
float: left;
color: #FFFFFF;
padding: 5px;
height: 5em;
width: 189px;
margin-right: 1px;
}
#values1 {
background-color: #FFFFCC;\
}
#values2 {
background-color: #FFFFCC;
}
#values3 {
background-color: #FFFFCC;
}
#values4 {
background-color: #FFFFCC;
width: 190px;
margin-right: 0;
}
#content {
background-color: #FFFFFF;
width: 580px;
float: right;
padding: 0px 10px 0 0;
font-size: 12px
}
#content h3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #B54B27;
}
#navigation {
float: left;
width: 180px;
background-image: url(bg_menu_tile.gif);
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#navigation li {
width: 180px;
border-bottom: 1px solid #ED9F9F;
margin: 0;
padding: 0;
font-size: 80%;
vertical-align: bottom;
}
#navigation a:link, #navigation a:visited {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 1px solid #722100;
border-right: 1px solid #722100;
/* background-color: #D3D2B6;*/
color: #000000;
text-decoration: none;
}
#navigation a:hover {
background-color: #B54B27;
color: #FFFFFF;
}
#navigation ul.subnav {
margin-left: 12px;
}
#navigation ul.subnav li {
border-bottom: 1px solid #722100;
width: 168px;
}
#navigation .subnav a:link, #navigation ul.subnav a:visited {
background-color: #661200;
color: #722100;
}
#footer {
clear: both;
padding: 10px 0 10px 255px;
font-size: 70%;
color: #AAAAAA;
background-color: transparent;
}

Oct 1 '06 #2

P: n/a
"Ben C" <sp******@spam.eggswrote in message
news:sl*********************@bowser.marioworld...
On 2006-09-30, Paul <no*********@nowhere.invalidwrote:
>I want the <div id="navigation"column to be the same color all the way
to
the bottom.

It is isn't it? On Firefox if I set #navigation to background-color:
green, I get green all the way to #footer. Obviously you can give
#footer a background-color too if you want.
I added background-color:green; to :
#navigation {
float: left;
width: 199px;
background-color:green;
}
and it does not show up in my either firefox or ie browsers. Is that what
you changed?
Oct 1 '06 #3

P: n/a
On 2006-10-01, Paul <no*********@nowhere.invalidwrote:
"Ben C" <sp******@spam.eggswrote in message
news:sl*********************@bowser.marioworld...
>On 2006-09-30, Paul <no*********@nowhere.invalidwrote:
>>I want the <div id="navigation"column to be the same color all the way
to
the bottom.

It is isn't it? On Firefox if I set #navigation to background-color:
green, I get green all the way to #footer. Obviously you can give
#footer a background-color too if you want.

I added background-color:green; to :
#navigation {
float: left;
width: 199px;
background-color:green;
}
and it does not show up in my either firefox or ie browsers. Is that what
you changed?
Yes, and I tried it on Firefox too.

I must have misunderstood what you're talking about. Post a link to the
actual page and to a screenshot of what you're seeing.
Oct 1 '06 #4

This discussion thread is closed

Replies have been disabled for this discussion.