fsyed
asked on
Need to highlight current page in navigation bar
Dear fellow developers:
I am having problems highlighting the current page on the vertical navigation bar. I am not sure why this is. I have attached my HTML code, for my main page, the CSS code, and the image of the arrow that should appear. Because there are submenus that also appear, if a submenu is selected, I would like the parent, as well as the submenu navigation bar to be highlighted.
I thought this block would have taken care of it:
#home #navigation .home a,
#aboutus #navigation .aboutus a{
background-color: #407273;
background-image: url(../images/menuitem-hov
color: white;
}
Unfortunately, it didn't. Any ideas?
Thanks to all who reply.
Sincerely;
Fayyaz
I am having problems highlighting the current page on the vertical navigation bar. I am not sure why this is. I have attached my HTML code, for my main page, the CSS code, and the image of the arrow that should appear. Because there are submenus that also appear, if a submenu is selected, I would like the parent, as well as the submenu navigation bar to be highlighted.
I thought this block would have taken care of it:
#home #navigation .home a,
#aboutus #navigation .aboutus a{
background-color: #407273;
background-image: url(../images/menuitem-hov
color: white;
}
Unfortunately, it didn't. Any ideas?
Thanks to all who reply.
Sincerely;
Fayyaz
HTML code:
---------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>McNickel and Associates</title>
<link rel="stylesheet" type="text/css" href="css/all.css" media="screen"/>
<!--[if lt IE 7]><link rel="stylesheet" type="text/css" href="css/lt7.css" media="screen"/><![endif]-->
</head>
<body id="home">
<div id="main">
<div id="header">
<strong class="logo"><a href="#">PrivateLawyer</a></strong>
<div class="header-area">
<ul id="navigation">
<li><a href="#">Home</a></li>
<li><a href="aboutus.html">About us</a></li>
<li>
<a href="#">Employers</a>
<ul>
<li><a href="#">Full Time Permanent Staffing</a></li>
<li><a href="#">Contract Staffing</a></li>
<li>
<a href="#">Temporary Staffing</a>
<ul>
<li><a href="#">administration</a></li>
<li><a href="#">labour</a></li>
</ul>
</li>
<li><a href="#">Testing</a></li>
<li><a href="#">Reference Checks</a></li>
<li><a href="#">Outplacment</a></li>
</ul>
</li>
<li>
<a href="#">Job seekers</a>
<ul>
<li><a href="#">Full Time Permanent</a></li>
<li><a href="#">Contract Staffing</a></li>
<li><a href="#">Immediate Staffing</a></li>
<ul>
<li><a href="#">administration</a></li>
<li><a href="#">labour</a></li>
</ul>
<li><a href="#">Testing</a></li>
</ul>
</li>
<li><a href="#">Testing</a></li>
<li><a href="#">Outplacement</a></li>
<li><a href="#">Contact / Office Locations</a></li>
</ul>
<img src="images/headerarea-img2c.jpg" alt="" />
</div>
<div class="slogan-holder">
<span class="slogan">Making your life at work easier</span>
</div>
</div>
<div id="content">
<div class="content-area">
<div class="welcome">
<img src="images/content-img1.jpg" alt="" />
<div class="welcome-text">
<h1>welcome to our web site</h1>
<strong>Lorem ipsum dolor sit amet, contuer adipiscingelit</strong>
<p>sed diamaccusantium doloremque laudantium, totam rem aperiam eaquep. Store veritatis et quasi architecto <a href="#">beatae vitae dicta</a> <a href="#">sunt, explicabo</a> nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit.</p>
</div>
</div>
<div class="columns-holder">
<div class="column1">
<h2>Testimonials</h2>
<strong>Lorem ipsum dolor sit amet</strong>
<blockquote cite="#">
<q>sed diamaccusantium doloremque laudantium, totam rem aperiam eaquep. Store veritatis et quasi architecto</q>
<cite>Bob Stanley</cite>
</blockquote>
</div>
<div class="column2 about">
<h2>About Us</h2>
<strong>Lorem ipsum dolor sit amet</strong>
<p>Lorem ipsum dolor sit amet sed diamaccusantium doloremque laudantium, totam rem aperiam eaquep. Store veritatis et quasi architecto <a href="#">beatae vitae dicta </a></p>
</div>
</div>
</div>
<div class="sidecolumn">
<h2>Latest News</h2>
<ul class="headlines">
<li>
<span class="date">January 23th, 08</span>
<strong>Amet, consectetuer adipis cing</strong>
<p>elit sed diam nonummy nibh euismod tincidunt ut <a href="#">laoreet</a> dolore</p>
<span class="read-more"><a href="#">read more</a></span>
</li>
<li>
<span class="date">September 12th, 08</span>
<strong>Consectetuer adipis cing elit</strong>
<p>sed diam volutpat. Ut wisi enim ad minim veniamuis nostrud exerci tation ullamc orper</p>
<span class="read-more"><a href="#">read more</a></span>
</li>
</ul>
</div>
</div>
<div id="footer">
<strong>Copyright © 2008 Busness Company. All Rights Reserved.</strong>
<ul>
<li><a href="#">Terms of Use</a></li>
<li><a href="#">Privacy Policy</a></li>
</ul>
</div>
</div>
</body>
</html>
-------------
CSS code:
-------------
body {
font: 11px Tahoma, Arial, sans-serif;
background:#265051;
color:#fff;
margin:0;
}
form {
margin:0;
padding:0;
}
img {border:none;}
q{quotes: none;}
q:before{content:"";}
q:after{content:"";}
a{
text-decoration: underline;
color: #e79836;
}
a:hover{text-decoration: none;}
/* main containers styles */
.holder {
overflow: hidden;
width: 100%;
}
#main {
margin:0 auto;
width:780px;
overflow:hidden;
position:relative;
}
/* header block styles */
#header {
background: url(../images/bg-header.png) repeat-x;
padding: 93px 0 0;
width: 100%;
height:310px;
overflow:hidden;
}
#header .header-area {
background: #fff;
overflow: hidden;
padding: 1px 0;
width: 100%;
height: 253px;
clear: both;
}
#header .header-area img {
float: right;
}
/* logo styles */
#header strong.logo {
background: url(../images/logo.png) no-repeat;
text-indent: -9999px;
overflow: hidden;
float: left;
width: 433px;
height: 93px;
margin: -93px 0 0 20px;
}
#header strong.logo a {
position: relative;
cursor: pointer;
display: block;
height: 100%;
}
/* slogan block styles */
#header .slogan-holder {
background: url(../images/bg-slogan.png) repeat-x;
overflow: hidden;
height: 55px;
}
#header span.slogan {
background: url(../images/slogan.png) no-repeat;
text-indent: -9999px;
overflow: hidden;
float: right;
width: 585px;
height: 55px;
}
/* navigation menu styles */
#navigation {
font: bold 15px/15px Arial, Helvetica, sans-serif;
letter-spacing: -1px;
text-transform: uppercase;
background: #aec2c3;
list-style: none;
padding: 13px 0 0;
margin: 0;
width: 227px;
height: 100%;
float: left;
}
#navigation li {
margin: 0 0 6px;
width: 100%;
float: left;
}
#navigation a {
padding: 6px 0 4px 93px;
text-decoration: none;
color: #fff;
background: #b5c8c9 url(../images/menuitem.gif) no-repeat 70px 10px;
/* uncomment this line for light grey color */
/* background: #d6e0e1 url(../images/menuitem.gif) no-repeat 70px 10px; */
display: block;
width: 134px;
}
#navigation a:hover,
#navigation a.active {
background: #407273 url(../images/menuitem-hover.gif) no-repeat 70px 10px;
}
#navigation li.hover,
#navigation li:hover {
position: relative;
}
#navigation li.hover ul, #navigation li:hover ul {display: block;}
#navigation li.hover ul ul, #navigation li:hover ul ul {display: none;}
#navigation ul {
background: #aec2c3;
position: absolute;
list-style: none;
display: none;
padding: 6px 0 0;
margin: 0;
left: 217px;
top: -6px;
width: 270px;
}
#navigation ul a {
background-position: 10px 10px !important;
padding: 6px 5px 4px 30px;
width: 235px;
}
#navigation ul ul {
left: 260px;
width: 190px;
}
#navigation ul ul a {width: 155px;}
#navigation ul li.hover ul, #navigation ul li:hover ul {display: block;}
#home #navigation .home a,
#aboutus #navigation .aboutus a{
background-color: #407273;
background-image: url(../images/menuitem-hover.gif);
color: white;
}
/* content block styles */
#content {
background: url(../images/bg-content.png) repeat-y;
padding: 0 0 22px;
overflow:hidden;
width: 100%;
}
#content .content-area {
margin: 0 0 0 28px;
overflow: hidden;
padding: 25px 18px 0;
display: inline;
width: 476px;
float: left;
}
#content h1, #content h2 {
font: 20px/20px "Times New Roman", Times, serif;
text-transform: uppercase;
margin: 0 0 14px;
}
/* welcome block styles */
#content .welcome {
background: #067d81;
padding: 14px 30px 14px 15px;
margin: 0 0 17px;
overflow: hidden;
width: 430px;
}
#content .welcome img {
border: 1px solid #fff;
margin: 3px 0 0;
float: left;
}
#content .welcome .welcome-text {
width: 315px;
float: right;
}
#content .welcome strong {
margin: 0 0 5px;
display: block;
}
#content .welcome a {
color: #e79836;
}
#content .welcome p {
line-height: 18px;
margin: 0;
}
/* content columns block styles */
#content .columns-holder {
background: url(../images/bg-divider.png) repeat-y 214px 0;
overflow: hidden;
clear: both;
width: 520px;
}
#content .columns-holder .column1 {
padding: 0 20px;
width: 179px;
float: left;
}
#content .columns-holder .column2 {
padding: 0 84px 0 20px;
width: 160px;
float: left;
}
#content .columns-holder .column2.about {background: url(../images/bg-about.png) no-repeat;}
#content .columns-holder p,
#content .columns-holder q {
line-height: 17px;
margin: 5px 0;
}
/* quote block styles */
#content .columns-holder blockquote {margin: 0;}
#content .columns-holder cite {
color: #adc2c2;
font-weight: bold;
font-style: italic;
display: block;
text-align: right;
padding: 0 4px 0 0;
margin: 0;
}
/* side column block styles */
#content .sidecolumn {
padding: 35px 29px 20px 35px;
width: 176px;
float: right;
}
#content .sidecolumn h2 {margin: 0 0 20px;}
#content ul.headlines {
list-style: none;
padding: 0;
margin: 0;
}
#content ul.headlines li {
padding: 0 0 22px;
}
#content ul.headlines span.date {
color: #14989b;
display: block;
margin: 0 0 14px;
font-size: 10px;
font-weight: bold;
}
#content ul.headlines strong {
display: block;
color: #14989b;
}
#content ul.headlines p {margin: 2px 0;}
/* read more link styles */
#content ul.headlines span.read-more {
font-weight: bold;
font-size: 9px;
padding: 15px 0 0;
text-align: right;
display: block;
}
#content ul.headlines span.read-more a {
background: url(../images/readmore.gif) no-repeat 0 50%;
padding: 0 0 0 10px;
}
/* footer block styles */
#footer {
background: url(../images/bg-footer.png) repeat-y;
padding: 9px 0;
overflow:hidden;
width:100%;
}
/* copyright string styles */
#footer strong {
padding: 0 0 0 46px;
font-weight: normal;
color: #819d9d;
float: left;
}
/* footer navigation styles */
#footer ul {
overflow: hidden;
list-style: none;
display: inline;
padding: 0;
margin: 0 20px 0 0;;
float: right;
}
#footer ul li {
background: url(../images/separator1.gif) no-repeat 100% 50%;
margin: 0 -1px 0 0;
padding: 0 13px 0 14px;
float: left;
}
#footer a {color:#14989b;}
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks so much for the feedback, I had a bit of en epiphany while I was working on this, and realized that when a user clicks on a submenu item, that the only options of the submenu should appear on the next screen, with the users selection highlighted. I was able to do this by adding the values of the body id="" values of the submenu pages to the CSS:
#home #navigation .home a,
#aboutus #navigation .aboutus a,
#employers #navigation .employers a,
#jobseekers #navigation .jobseekers a,
#testing #navigation .testing a,
#outplacement #navigation .outplacement a,
#contact #navigation .contact a,
#ftpstaffing #navigation .ftpstaffing a,
#eadmin #navigation .eadmin a{
background-color: #407273;
background-image: url(../images/menuitem-hov
color: white;
}
I have attached my full code below. My problem now is that when I select the option, "Full Time Permanent Staffing" from the "Employers" section, the option, "Outplacement" at the bottom is covered up. Is there a way for me to fix this menu on this page only to fit in the size allotted?
My other concern is that I find that in Internet Explorer, all the submenus are appearing fine, but in firefox, the submenu "Administration", and "Labour", which comes out of "Immediate Staffing", which is under "Job Seekers" doesn't come out as it should. Any reason for this?
As I said, I have attached my code below.
Thanks again to everyone.
Sincerely;
Fayyaz
#home #navigation .home a,
#aboutus #navigation .aboutus a,
#employers #navigation .employers a,
#jobseekers #navigation .jobseekers a,
#testing #navigation .testing a,
#outplacement #navigation .outplacement a,
#contact #navigation .contact a,
#ftpstaffing #navigation .ftpstaffing a,
#eadmin #navigation .eadmin a{
background-color: #407273;
background-image: url(../images/menuitem-hov
color: white;
}
I have attached my full code below. My problem now is that when I select the option, "Full Time Permanent Staffing" from the "Employers" section, the option, "Outplacement" at the bottom is covered up. Is there a way for me to fix this menu on this page only to fit in the size allotted?
My other concern is that I find that in Internet Explorer, all the submenus are appearing fine, but in firefox, the submenu "Administration", and "Labour", which comes out of "Immediate Staffing", which is under "Job Seekers" doesn't come out as it should. Any reason for this?
As I said, I have attached my code below.
Thanks again to everyone.
Sincerely;
Fayyaz
HTML for index.html
-------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>McNickel and Associates</title>
<link rel="stylesheet" type="text/css" href="css/all.css" media="screen"/>
<!--[if lt IE 7]><link rel="stylesheet" type="text/css" href="css/lt7.css" media="screen"/><![endif]-->
</head>
<body id="home">
<div id="main">
<div id="header">
<strong class="logo"><a href="#">PrivateLawyer</a></strong>
<div class="header-area">
<ul id="navigation">
<li class="home"><a href="#">Home</a></li>
<li class="aboutus"><a href="aboutus.html">About us</a></li>
<li class="employers">
<a href="#">Employers</a>
<ul>
<li class="ftpstaffing"><a href="ftpstaffing.html">Full Time Permanent Staffing</a></li>
<li class="cstaffing"><a href="cstaffing.html">Contract Staffing</a></li>
<li class="tstaffing">
<a href="#">Temporary Staffing</a>
<ul>
<li class="eadmin"><a href="eadmin.html">administration</a></li>
<li class="elabour"><a href="elabour.html">labour</a></li>
</ul>
</li>
<li class="testing"><a href="testing.html">Testing</a></li>
<li class="refchecks"><a href="refchecks.html">Reference Checks</a></li>
<li class="outplacement"><a href="outplacement.html">Outplacment</a></li>
</ul>
</li>
<li class="jobseekers">
<a href="#">Job seekers</a>
<ul>
<li class="ftpermanent"><a href="ftpermanent.html">Full Time Permanent</a></li>
<li class="cstaffing"><a href="cstaffing.html">Contract Staffing</a></li>
<li class="istaffing.html"><a href="#">Immediate Staffing</a></li>
<ul>
<li class="jadmin"><a href="jadmin.html">administration</a></li>
<li class="jlabour"><a href="jlabour.html">labour</a></li>
</ul>
<li class="testing"><a href="testing.html">Testing</a></li>
</ul>
</li>
<li class="testing"><a href="testing.html">Testing</a></li>
<li class="outplacement"><a href="outplacement.html">Outplacement</a></li>
<li class="contact"><a href="contact.html">Contact / Office Locations</a></li>
</ul>
<img src="images/headerarea-img2f.jpg" alt="" />
</div>
<div class="slogan-holder">
<span class="slogan">Making your life at work easier</span>
</div>
</div>
<div id="content">
<div class="content-area">
<div class="welcome">
<img src="images/content-img1.jpg" alt="" />
<div class="welcome-text">
<h1>Welcome!</h1>
<p>McNickel & Associates Inc. is full-service recruitment firm that finds success in placing high caliber candidates with equally high quality clientele. We are devoted to building rewarding relationships with both our clients and candidates through a uniquely creative and process-oriented approach that delivers exceptional staffing results.</p>
</div>
</div>
<div class="columns-holder">
<div class="column1">
<br><h2>
<ul><li>PROFESSIONAL</li>
<li>EFFICIENT</li>
<li>TRUSTWORTHY</li>
</ul>
</h2>
<blockquote cite="#">
</blockquote>
</div>
<div class="column2 about">
<h2>Timesheets</h2>
<p>Lorem ipsum dolor sit amet sed diamaccusantium doloremque laudantium, totam rem aperiam eaquep. Store veritatis et quasi architecto <a href="#">beatae vitae dicta </a></p>
</div>
</div>
</div>
<div class="sidecolumn">
<h2>Success story of the month!</h2>
<ul class="headlines">
<li>
<strong>This month's Professional of the Month award goes to John Dubois!</strong>
<br><p>On Friday February 13th, a client called our office at 8:20am with an urgent and important need to have a labourer begin work at 9am. Our first call was to John Dubois as he has done some excellent work for us in the past. John was able to overcome short notice, challenging road conditions and showed up 5 minutes early . For his dedication, professionalism and a job well done (as expected) John has been awarded a brunch for 2 at a local restaurant. Congratulations John!</p>
</li>
</ul>
</div>
</div>
<div id="footer">
<strong>Copyright © 2009 McNickel & Associates. All Rights Reserved.</strong>
<ul>
<li><a href="#">Terms of Use</a></li>
<li><a href="#">Privacy Policy</a></li>
</ul>
</div>
</div>
</body>
</html>
-----------------
HTML for ftpstaffing
-----------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>McNickel and Associates</title>
<link rel="stylesheet" type="text/css" href="css/all.css" media="screen"/>
<!--[if lt IE 7]><link rel="stylesheet" type="text/css" href="css/lt7.css" media="screen"/><![endif]-->
</head>
<body id="ftpstaffing">
<div id="main">
<div id="header">
<strong class="logo"><a href="#">PrivateLawyer</a></strong>
<div class="header-area">
<ul id="navigation">
<li class="ftpstaffing"><a href="ftpstaffing.html">Full Time Permanent Staffing</a></li>
<li class="cstaffing"><a href="cstaffing.html">Contract Staffing</a></li>
<li class="tstaffing">
<a href="tstaffing.html">Temporary Staffing</a>
<ul>
<li class="eadmin"><a href="eadmin.html">administration</a></li>
<li class="elabour"><a href="elabour.html">labour</a></li>
</ul>
</li>
<li class="testing"><a href="testing.html">Testing</a></li>
<li class="refchecks"><a href="refchecks.html">Reference Checks</a></li>
<li class="outplacement"><a href="outplacement.html">Outplacment</a></li>
</ul>
<img src="images/headerarea-imgemployers.jpg" alt="" />
</div>
<div class="slogan-holder">
<span class="slogan">Making your life at work easier</span>
</div>
</div>
<div id="content">
<div class="content-area">
<div class="welcome">
<img src="images/content-img1.jpg" alt="" />
<div class="welcome-text">
<h1>welcome to our web site</h1>
<strong>Lorem ipsum dolor sit amet, contuer adipiscingelit</strong>
<p>sed diamaccusantium doloremque laudantium, totam rem aperiam eaquep. Store veritatis et quasi architecto <a href="#">beatae vitae dicta</a> <a href="#">sunt, explicabo</a> nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit.</p>
</div>
</div>
<div class="columns-holder">
<div class="column1">
<h2>Testimonials</h2>
<strong>Lorem ipsum dolor sit amet</strong>
<blockquote cite="#">
<q>sed diamaccusantium doloremque laudantium, totam rem aperiam eaquep. Store veritatis et quasi architecto</q>
<cite>Bob Stanley</cite>
</blockquote>
</div>
<div class="column2 about">
<h2>About Us</h2>
<strong>Lorem ipsum dolor sit amet</strong>
<p>Lorem ipsum dolor sit amet sed diamaccusantium doloremque laudantium, totam rem aperiam eaquep. Store veritatis et quasi architecto <a href="#">beatae vitae dicta </a></p>
</div>
</div>
</div>
<div class="sidecolumn">
<h2>Latest News</h2>
<ul class="headlines">
<li>
<span class="date">January 23th, 08</span>
<strong>Amet, consectetuer adipis cing</strong>
<p>elit sed diam nonummy nibh euismod tincidunt ut <a href="#">laoreet</a> dolore</p>
<span class="read-more"><a href="#">read more</a></span>
</li>
<li>
<span class="date">September 12th, 08</span>
<strong>Consectetuer adipis cing elit</strong>
<p>sed diam volutpat. Ut wisi enim ad minim veniamuis nostrud exerci tation ullamc orper</p>
<span class="read-more"><a href="#">read more</a></span>
</li>
</ul>
</div>
</div>
<div id="footer">
<strong>Copyright © 2008 Busness Company. All Rights Reserved.</strong>
<ul>
<li><a href="#">Terms of Use</a></li>
<li><a href="#">Privacy Policy</a></li>
</ul>
</div>
</div>
</body>
</html>
---------------
CSS CODE
---------------
body {
font: 11px Tahoma, Arial, sans-serif;
background:#265051;
color:#fff;
margin:0;
}
form {
margin:0;
padding:0;
}
img {border:none;}
q{quotes: none;}
q:before{content:"";}
q:after{content:"";}
a{
text-decoration: underline;
color: #e79836;
}
a:hover{text-decoration: none;}
/* main containers styles */
.holder {
overflow: hidden;
width: 100%;
}
#main {
margin:0 auto;
width:780px;
overflow:hidden;
position:relative;
}
/* header block styles */
#header {
background: url(../images/bg-header.png) repeat-x;
padding: 93px 0 0;
width: 100%;
height:310px;
overflow:hidden;
}
#header .header-area {
background: #fff;
overflow: hidden;
padding: 1px 0;
width: 100%;
height: 253px;
clear: both;
}
#header .header-area img {
float: right;
}
/* logo styles */
#header strong.logo {
background: url(../images/logo.png) no-repeat;
text-indent: -9999px;
overflow: hidden;
float: left;
width: 433px;
height: 93px;
margin: -93px 0 0 20px;
}
#header strong.logo a {
position: relative;
cursor: pointer;
display: block;
height: 100%;
}
/* slogan block styles */
#header .slogan-holder {
background: url(../images/bg-slogan.png) repeat-x;
overflow: hidden;
height: 55px;
}
#header span.slogan {
background: url(../images/slogan.png) no-repeat;
text-indent: -9999px;
overflow: hidden;
float: right;
width: 585px;
height: 55px;
}
/* navigation menu styles */
#navigation {
font: bold 15px/15px Arial, Helvetica, sans-serif;
letter-spacing: -1px;
text-transform: uppercase;
background: #aec2c3;
list-style: none;
padding: 13px 0 0;
margin: 0;
width: 227px;
height: 100%;
float: left;
}
#navigation li {
margin: 0 0 6px;
width: 100%;
float: left;
}
#navigation a {
padding: 6px 0 4px 93px;
text-decoration: none;
color: #fff;
background: #b5c8c9 url(../images/menuitem.gif) no-repeat 70px 10px;
/* uncomment this line for light grey color */
/* background: #d6e0e1 url(../images/menuitem.gif) no-repeat 70px 10px; */
display: block;
width: 134px;
}
#navigation a:hover,
#navigation a.active {
background: #407273 url(../images/menuitem-hover.gif) no-repeat 70px 10px;
}
#navigation li.hover,
#navigation li:hover {
position: relative;
}
#navigation li.hover ul, #navigation li:hover ul {display: block;}
#navigation li.hover ul ul, #navigation li:hover ul ul {display: none;}
#navigation ul {
background: #aec2c3;
position: absolute;
list-style: none;
display: none;
padding: 6px 0 0;
margin: 0;
left: 217px;
top: -6px;
width: 270px;
}
#navigation ul a {
background-position: 10px 10px !important;
padding: 6px 5px 4px 30px;
width: 235px;
}
#navigation ul ul {
left: 260px;
width: 190px;
}
#navigation ul ul a {width: 155px;}
#navigation ul li.hover ul, #navigation ul li:hover ul {display: block;}
#home #navigation .home a,
#aboutus #navigation .aboutus a,
#employers #navigation .employers a,
#jobseekers #navigation .jobseekers a,
#testing #navigation .testing a,
#outplacement #navigation .outplacement a,
#contact #navigation .contact a,
#ftpstaffing #navigation .ftpstaffing a,
#eadmin #navigation .eadmin a{
background-color: #407273;
background-image: url(../images/menuitem-hover.gif);
color: white;
}
/* content block styles */
#content {
background: url(../images/bg-content.png) repeat-y;
padding: 0 0 22px;
overflow:hidden;
width: 100%;
}
#content .content-area {
margin: 0 0 0 28px;
overflow: hidden;
padding: 25px 18px 0;
display: inline;
width: 476px;
float: left;
}
#content h1, #content h2 {
font: 20px/20px "Times New Roman", Times, serif;
text-transform: uppercase;
margin: 0 0 14px;
}
/* welcome block styles */
#content .welcome {
background: #067d81;
padding: 14px 30px 14px 15px;
margin: 0 0 17px;
overflow: hidden;
width: 430px;
}
#content .welcome img {
border: 1px solid #fff;
margin: 3px 0 0;
float: left;
}
#content .welcome .welcome-text {
width: 315px;
float: right;
}
#content .welcome strong {
margin: 0 0 5px;
display: block;
}
#content .welcome a {
color: #e79836;
}
#content .welcome p {
line-height: 18px;
margin: 0;
}
/* content columns block styles */
#content .columns-holder {
background: url(../images/bg-divider.png) repeat-y 214px 0;
overflow: hidden;
clear: both;
width: 520px;
}
#content .columns-holder .column1 {
padding: 0 20px;
width: 179px;
float: left;
}
#content .columns-holder .column2 {
padding: 0 84px 0 20px;
width: 160px;
float: left;
}
#content .columns-holder .column2.about {background: url(../images/bg-about.png) no-repeat;}
#content .columns-holder p,
#content .columns-holder q {
line-height: 17px;
margin: 5px 0;
}
/* quote block styles */
#content .columns-holder blockquote {margin: 0;}
#content .columns-holder cite {
color: #adc2c2;
font-weight: bold;
font-style: italic;
display: block;
text-align: right;
padding: 0 4px 0 0;
margin: 0;
}
/* side column block styles */
#content .sidecolumn {
padding: 35px 29px 20px 35px;
width: 176px;
float: right;
}
#content .sidecolumn h2 {margin: 0 0 20px;}
#content ul.headlines {
list-style: none;
padding: 0;
margin: 0;
}
#content ul.headlines li {
padding: 0 0 22px;
}
#content ul.headlines span.date {
color: #14989b;
display: block;
margin: 0 0 14px;
font-size: 10px;
font-weight: bold;
}
#content ul.headlines strong {
display: block;
color: #14989b;
}
#content ul.headlines p {margin: 2px 0;}
/* read more link styles */
#content ul.headlines span.read-more {
font-weight: bold;
font-size: 9px;
padding: 15px 0 0;
text-align: right;
display: block;
}
#content ul.headlines span.read-more a {
background: url(../images/readmore.gif) no-repeat 0 50%;
padding: 0 0 0 10px;
}
/* footer block styles */
#footer {
background: url(../images/bg-footer.png) repeat-y;
padding: 9px 0;
overflow:hidden;
width:100%;
}
/* copyright string styles */
#footer strong {
padding: 0 0 0 46px;
font-weight: normal;
color: #819d9d;
float: left;
}
/* footer navigation styles */
#footer ul {
overflow: hidden;
list-style: none;
display: inline;
padding: 0;
margin: 0 20px 0 0;;
float: right;
}
#footer ul li {
background: url(../images/separator1.gif) no-repeat 100% 50%;
margin: 0 -1px 0 0;
padding: 0 13px 0 14px;
float: left;
}
#footer a {color:#14989b;}SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
My apologies for the delay. Thanks so much for your time, patience, and help.
ASKER
Below is my modified html and css code.
Thanks again to everyone.
Sincerely;
Fayyaz
Open in new window