473,856 Members | 1,560 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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

I want the <div id="navigation" column to be the same color all the way to
the bottom. The "background-image: url(bg_menu_til e.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>Untitl ed 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"><i mg src="value1.gif "></div>
<div id="values2"><i mg src="value2.gif "></div>
<div id="values3"><i mg src="value3.gif "></div>
<div id="values4"><i mg 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">Cop yright &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_til e.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
3 2519
On 2006-09-30, Paul <no*********@no where.invalidwr ote:
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_til e.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>Untitle d 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"><i mg src="value1.gif "></div>
<div id="values2"><i mg src="value2.gif "></div>
<div id="values3"><i mg src="value3.gif "></div>
<div id="values4"><i mg 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">Cop yright &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_til e.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
"Ben C" <sp******@spam. eggswrote in message
news:sl******** *************@b owser.marioworl d...
On 2006-09-30, Paul <no*********@no where.invalidwr ote:
>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
On 2006-10-01, Paul <no*********@no where.invalidwr ote:
"Ben C" <sp******@spam. eggswrote in message
news:sl******** *************@b owser.marioworl d...
>On 2006-09-30, Paul <no*********@no where.invalidwr ote:
>>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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
3935
by: Dave Patton | last post by:
Using my About page as an example: http://members.shaw.ca/davepatton/about.html What is the best/proper way to markup a page such as this that has "the main body" and "a navigation menu"? It has been suggested before that I should have the navigation menu at the end of the HTML, so that a screen reader doesn't have to read it to get to the content, with the possible exception of having
9
2512
by: Theodore A. Jencks | last post by:
Hi All, I have a problem that is two fold. First a little about the enviroment I'm using; I am running Microsoft Windows XP with all security patches applied. I use Mozilla 1.6 for all testing before I test on IE 6 w/ all updates. I am editing my style sheet with StyleMaster 3.5.2 and am hand coding. I use Dreamweaver MX 2004 and am also hand coding. I have a problem that is easily solved by using tables however I don't want to use...
28
2703
by: laredotornado | last post by:
Hi, Surprisingly, I can't get the drop down menus to work on PC IE 6. If you roll over "PRODUCTS", normally a drop down menu appears (on Safari and Firefox), but on PC IE, nada. http://test2.boxxtech.com/corporate/test.asp Any ideas? Thanks, - Dave
3
4941
by: Jannette | last post by:
I've got this to finally work in IE (its only taken me 2 days solid), but now mozilla isn't displaying the text on the same line as the image. I'm a newby at CSS, and I've think I've worked on trying to resolve this too long and now I'm totally lost. I've posted this up to a site: *************************Uploaded to SERVER ******************** www.onlinecreations.com.au/wtts/index.php like I said, works in IE but not Mozilla. I just...
8
3911
by: paul.denlinger | last post by:
Hi-- Things have gone well for me on this page design, but when I added a background image, it pushed everything down and messed up my page layout. Before I added the navigation background image, here is the CSS code: body { font-family:Verdana, Arial, Helvetica, sans-serif;
4
3996
by: tburger | last post by:
Hey everyone- This is my first post at The Scripts, but I've used the forums before for other programming issues. Hopefully, someone has some solid styling advice for me. I've now been dealing with XHTML/CSS for about a week. I'm trying to set up a website for my dad, and this navigation menu is driving me nuts. I designed this part of the site on Firefox 2.0. Here's the link: http://www.yalestartups.com/tburger/test.html
7
1433
by: Jeff | last post by:
What's the current wisdom on styling lists for navigation. What I'd like is for: links and background colors to be 100% of the width. multi-line OK (ie links will wrap). Padding OK. Same width in IE as other browsers I'm finding that IE differs from conforming browsers in the way it calculates width after adding padding (yes, strict doctype.) I have a feeling that things have moved on fro the old ListAPart article on this.
0
1917
by: tom59593 | last post by:
Hi there. I have been attempting (for a few days on end, sadly) to get a navigation section of my new site to work. Granted, this is the first time I've ever written CSS...although I had PLENTY of practice using tables...tee hee. Anyways, this should be EXTREMELY simple...as I want NO rollovers, no fancy hovers, no current-page differences...I just want the navigation bar image to be "click-able" where the words are. You can see the...
3
2063
by: smokymtnman | last post by:
I have a drop down menu that has grown so long that I am afraid it will be hidden at the bottom of the page. I am using a ssi file for navigation. I was wondering if I can use the same code but break it into two columns. The site is: http://www.fabserv.com/ The code for navigation.ssi is pasted below:
0
9921
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9765
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
1
10795
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
10390
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
9536
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
0
7098
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5962
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
4581
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
4177
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.