468,121 Members | 1,528 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,121 developers. It's quick & easy.

Hi, every one, anchor tag in li tag is problem, pls see it

Hi every one,
I designed a web page, having horizontal menu using UL and LI tags;

I need to be set rollover effect for a menu items.

whenever user hover on a menu item, the entire item(including anchor tag text) has to change to another color,
but since iam using anchor tag in LI tag, the text in the menu item is not changing color when i hover on the menu item(LI). (but changing color when i hover on the anchor tag Text).


But i want the entire item(including anchor tag text) has to change to another color,
whenever user hover on a menu item(LI).

(i think Iam clear to explain, If not please excuseme)

here is the entire code i have used for designing page

please verify my code and tell me necessary changes to make it possible.


---------------html file------------
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>index</title>
  6.  
  7. <link href="consult.css" rel="stylesheet" type="text/css" />
  8. <link href="menu.css" rel="stylesheet" type="text/css" />
  9. <link href="style.css" rel="stylesheet" type="text/css" />
  10.  
  11. <script src="jsfiles/login.js" type="text/javascript" language="javascript"></script>
  12. </head>
  13.  
  14. <body class="bdy"  onload="disableButton()">
  15.  
  16. <!--wrap-->
  17. <div id="wrap">
  18.  
  19. <!-- hedr -->
  20. <div id="hedr">
  21.  
  22.     <!-- MarQuee -->
  23.     <div id="marq">
  24.       <marquee behavior="scroll" direction="left" width="100%"><img src="imgs/123.gif" style=""></marquee>
  25.     </div>
  26.     <!-- ends marquee -->
  27.  
  28.  
  29.     <!-- LogIn info  -->
  30.     <div id="stsup">
  31.       <table width=358 height="25" border='0' style="border-collapse: collapse" cellspacing='0' cellpadding='1' align="left">
  32.        <tr>
  33.          <td width="87" height=20 valign="top" ><div><span class="para" style="color:white">&nbsp;&nbsp; Admin Login</span></div></td>
  34.          <td width="297" valign="middle">
  35.            <form id="loginForm" method="POST" action="innerpages/jobs.php">
  36.  
  37.             <div align="left"  class="para">
  38.               <input id="email" name="username" type="text" value="username" class="ltxt" onclick="clrtxt1()" onfocus="clrtxt1()"/>
  39.               <input id="password" name="password" type="password" value="password" class="ltxt" onclick="clrtxt2()" onfocus=                "clrtxt2()" onblur="chklog()" />
  40.               <input type="submit" id="submitbtn" name="submitbtn" value="Login" class="lbtn"  />
  41.             </div>
  42.           </form>          </td>
  43.         </tr>
  44.       </table>
  45.     </div> 
  46.        <!-- ends loginfo -->
  47. </div>
  48. <!-- ends hedr -->
  49.  
  50.     <!-- menu -->  
  51.       <div id="nav">
  52.         <ul class="menu2" >
  53.  
  54.             <li ><a href="consult.html"  title="Aboutus" class="active"><span>Aboutus</span></a></li>
  55.             <li ><a href="innerpages\clients.html"  title="Clients"><span>Clients</span></a></li>
  56.             <li ><a href="innerpages\outsource.html"  title="Outsourcing"><span >Out sourcing</span></a></li>    
  57.             <li ><a href="innerpages\jobsdispay.php"  title="Jobs"><span >Jobs</span></a></li>
  58.             <li ><a href="innerpages\testing.html"  title="Testing"><span >Testing</span></a></li>    
  59.             <li ><a href="innerpages\conus.html"  title="Contactus"><span >Contactus</span></a></li>        
  60.         </ul>
  61.     </div>
  62.     <!-- ends menu-->
  63.  
  64. <!-- content -->
  65.     <div id="cntnt">
  66.  
  67.       <table border="0" cellspacing="0" cellpadding="0" width="695" class="tblimg">
  68.           <tr>
  69.           <td width="541" valign="top">
  70.           <span class="para1">About Blue Berry</span><br /><br />
  71.           <span class="para">
  72.        Blue Berry is a premiere information technology services company specializing in Staffing Services,and Testing Services. Blue Berrys goal is to consistently provide the highest quality service and technical expertise for our information technology clients, delivered by professionals who have both academic and applied experience.<br /><br />
  73.  
  74.     Blue Berry is engaged in the business of working with organizations, to understand and meet the requirement imperatives of the ever changing and growing Industry, providing them with the competitive advantage with the intellectual capital and cutting-edge technology solutions,we offer Contract/Contract-to-Hire. <br /><br />
  75.     </span></td>
  76.     <td align="right" width="154" style="padding:0px;"><div id="img1"></div></td>
  77.     </tr>
  78.     <tr>
  79.     <td height="311" colspan="2">
  80.     <span class="para">
  81.     Help when you need it <br />
  82.     Concentrating on your core business is the top priority, so when technology issues arise they can be distracting and taxing on your internal resources. We provide assistance to augment your resources with the talent you need.<br /><br />
  83.  
  84.     Delivering Optimal Workforce Flexibility<br />
  85.     At Blue Berry, we offer skilled technology talent that delivers the professional expertise you need, when you need it -- from short-term and long-term contract assignments to contract-to-hire and direct-hire placements. We are uniquely structured to recruit, screen, deploy and manage a technical workforce anywhere in the United States. <br /><br />
  86.     Ensuring Quality in Every Hire<br />
  87.     With offices strategically located throughout the country, we offer technology professionals for every level of your organization, from help desk technicians to CIOs. And, our comprehensive recruiting and screening process is one of the most robust in the industry. <br /><br />
  88.     It includes: <br />
  89.     Interviews <br />
  90.     Reference &amp; background checks <br />
  91.     Drug screening <br />
  92.     Soft-skills assessment <br /> 
  93.     Technical proficiency testing<br /> 
  94.     Whether you're looking for contract, contract-to-hire or direct-hire support, Blue Berry delivers high-caliber technology talent for virtually any skill set and position.</span></td>
  95.     </tr>
  96. </table>
  97.   </div>
  98.     <!-- ends content -->
  99.  
  100. <!-- footer -->
  101.       <div class="footr">
  102.         <table width="696" height="24" border="0" cellpadding="0" cellspacing="1" class="footrtbl">
  103.         <tr>
  104.         <td height="22"  valign="middle" >
  105.           <span class="para">Copyright &copy; 2008. All rights resereved.</span>        </td>  
  106.         <td width="427"  align="left" valign="middle"><span class="para">Site designed and developed by <a href="http://www.indusray.in" target="_blank" class="folnk" >IndusRay Software Services</a></span> </td>
  107.         </tr>
  108.         </table>
  109.     </div>
  110. <!-- ends footer -->
  111.  
  112. </div>
  113.  
  114. </body>
  115. </html>
  116.  
  117.  
  118.  
----------------style.css-----------------

Expand|Select|Wrap|Line Numbers
  1. .bdy,
  2. html {
  3.     margin:0;
  4.     padding:0;
  5. }
  6.  
  7. .bdy {
  8.     min-width:710px;
  9.     background-attachment: scroll;
  10.     background-image:url(imgs/bg_b.gif);
  11.     background-repeat:repeat;
  12.     background-position: left top;
  13.     /*background-color:#0099FF;*/
  14. }
  15.  
  16.  
  17.  
  18. #wrap #hedr {
  19.     height: 163px;
  20.     width: 700px;
  21.     background-attachment: scroll;
  22.     background-image: url(imgs/blue1.jpg);
  23.     background-repeat: no-repeat;
  24.     background-position: center top;
  25.  
  26. }
  27.  
  28.  
  29.  
  30.  
  31. .footr {
  32. border:#AACCEE solid 1px;
  33. background:#fff;
  34. }
  35.  
  36. .footr .para{
  37.     font-family: Arial, Helvetica, sans-serif;
  38.     font-size: 11px;
  39.     font-style: normal;
  40.     color:#07519A;
  41.     word-spacing:5px;
  42.     white-space:normal;
  43.  
  44.     padding-right:3px;
  45.     text-align: justify;
  46. }
  47.  
  48. .footr .folnk {
  49.     font-family: Arial, Helvetica, sans-serif;
  50.     font-size: 12px;
  51.     font-style: normal;
  52.     font-weight: bold;
  53.     color:#07519A;
  54.     text-decoration:none;
  55. }
  56.  
  57.  
  58.  
  59. #cntnt {
  60. border:#AACCEE solid 1px;
  61. background-color:#fff;
  62. }
  63.  
  64. .bdy #marq {
  65.     position: absolute;
  66.     height: 37px;
  67.     width: 449px;
  68.     left: 305px;
  69.     top: 36px;
  70.     z-index: 10;
  71. }
  72.  
  73.  
  74. #cntnt .para {
  75.     font-family: Arial, Helvetica, sans-serif;
  76.     font-size: 11px;
  77.     font-style: normal;
  78.     color:#07519A;
  79.     word-spacing:5px;
  80.     white-space:normal;
  81.     line-height:20px;
  82.  
  83.     padding-right:3px;
  84.     text-align: justify;
  85.     }
  86.  
  87. #cntnt .para1 {
  88.     font-family: Arial, Helvetica, sans-serif;
  89.     font-size: 12px;
  90.     font-style: normal;
  91.     font-weight: bold;
  92.     color:#07519A;
  93. }
  94. .bdy #wrap #hedr #logo {
  95.     background-attachment: scroll;
  96.     background-image: url(imgs/bluberrylogo1.jpg);
  97.     background-repeat: no-repeat;
  98.     background-position: left top;
  99.     position: absolute;
  100.     height: 130px;
  101.     width: 169px;
  102.     z-index: 300;
  103.     left: 0px;
  104.     top: 68px;
  105. }
  106.  
  107.  
  108. .menu2 li a.active{
  109. background:#3C7FAF;
  110. color:#ffffff;
  111. }
  112.  
  113.  
  114. .bdy #stsup .para {
  115.     font-family: Arial, Helvetica, sans-serif;
  116.     font-size: 11px;
  117.     font-style: normal;
  118.     color:#07519A;
  119.     word-spacing:3px;
  120.     white-space:normal;
  121.     line-height:20px;
  122.  
  123.     text-align: justify
  124.  
  125. }
  126.  
  127. .bdy #hedr #stsup .ltxt {
  128.     color: #999999;
  129.     height: 12px;
  130.     width: 100px;
  131.     vertical-align:top;
  132.     font:Arial, Helvetica, sans-serif;
  133.     font-size:9px;
  134.     font-style:normal;
  135.  
  136. }
  137. .bdy #wrap #hedr #stsup .lbtn {
  138.     font-family: Arial, Helvetica, sans-serif;
  139.     font-size: 9px;
  140.     height: 20px;
  141.     width: 50px;
  142. }
  143. .bdy #wrap .marqimg {
  144.     background-attachment: scroll;
  145.     background-image: url(innerpages/imgs/berry.png);
  146.     background-repeat: no-repeat;
  147.     background-position: left top;
  148. }
  149.  
  150.  
  151. /*#hedr {
  152.     height: 163px;
  153.     width: 700px;
  154.     position: absolute;
  155.     z-index: 2;
  156. }*/
  157.  
  158. .bdy .footrtbl {
  159. background-color:#EBF3FB;
  160.  
  161. }
  162.  
---------------consult.css---------

Expand|Select|Wrap|Line Numbers
  1. #wrap {
  2.    /* background:#99c;*/
  3.     margin:0 auto;
  4.     width:710px;
  5.     height:600px;
  6. }    
  7.  
  8. #cntnt {
  9.     float:left;
  10.     height: 650x;
  11.     width: 695px;
  12.     border:#CCCCCC solid 1px;
  13.     padding-left:3px;
  14. }
  15.  
  16.  
  17.  
  18. .footr {
  19.     float:left;
  20.     height: 25px;
  21.     width: 698px;
  22.     border:#CCCCCC solid 1px;
  23.     background-color:#EBF3FB;
  24. }
  25.  
  26.  
  27.  
  28. .bdy #cntnt #img1 {
  29.     background-attachment: scroll;
  30.     background-color: #5984AF;
  31.     background-image: url(imgs/coni.jpg);
  32.     background-repeat: no-repeat;
  33.     background-position: left top;
  34.  
  35.     height: 147px;
  36.     width: 144px;
  37.     left: 679px;
  38.     top: 217px;
  39. }
  40.  
  41.  
  42. .bdy #stsup {
  43.     position:relative;
  44.     left: 335px;
  45.     width: 323px;
  46.     height:25px;    
  47.     top: 135px;
  48.  
  49. }
  50.  
  51.  
-----------------menu.css------------
Expand|Select|Wrap|Line Numbers
  1. #nav {
  2.  
  3.     width: 695px;
  4.     padding:5px;
  5.     padding-left:0px;
  6.     padding-top:5px;
  7.     padding-right:5px;
  8.     padding-top:5px;
  9.     background-color:#EBF3FB;
  10. }
  11.  
  12. #nav ul{
  13.     margin:0;
  14.     padding:0;
  15.     font-family:Arial, Helvetica, sans-serif;
  16.     font-size:11px;
  17.     font-style:normal;
  18.     background-color:#EBF3FB;
  19. }
  20.  
  21. #nav li{
  22.     display:inline;
  23.     list-style:none;
  24.     margin:0;
  25.     padding: 3px 35px;
  26.     border-left:#AACCEE solid 1px;
  27. }
  28.  
  29. #nav ul li a {
  30.     text-decoration:none;
  31.     text-align:center;
  32.     background:#EBF3FB;
  33.     color:#07519A;
  34. }
  35.  
  36. #nav li a:hover{
  37. background:#3C7FAF;
  38. color:#FFFFFF;
  39. }
  40.  
  41. #nav li:hover{
  42. background:#3C7FAF;
  43. color:#FFFFFF;
  44. }
  45.  
---------------------------------------

And one thing I also want to set some height to the menu to the menu.
if possible please tell me.

Any suggestions also welcome with pleasure.

Thanks in advance.
Sep 5 '08 #1
1 7422
I am testing in IE6 and Mozilla FF, showing differently

pls checkit
Sep 6 '08 #2

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

reply views Thread by nam | last post: by
5 posts views Thread by elsenraat_76 | last post: by
2 posts views Thread by James | last post: by
6 posts views Thread by Richard Brown | last post: by
5 posts views Thread by Randy Webb | last post: by
5 posts views Thread by Meadock | last post: by
18 posts views Thread by didacticone | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.