Help | Site Map
Connecting Tech Pros Worldwide
bytes > answers > HTML
Reply
 
LinkBack Thread Tools
  #1  
Old September 5th, 2008, 12:57 PM
Newbie
  
Join Date: Aug 2008
Posts: 7
Default 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.
Reply
  #2  
Old September 6th, 2008, 06:10 AM
Newbie
  
Join Date: Aug 2008
Posts: 7
Default
I am testing in IE6 and Mozilla FF, showing differently

pls checkit
Reply
Reply

Bookmarks

« Previous Thread | Next Thread »
Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are Off
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

What is Bytes?

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over network members.
Post your question now . . .
It's fast and it's free

Popular Articles
Quick Browse:
Communities / Archives
XML / CSS | HTML | Javascript | PHP | Perl | Visual Basic | Python | C++ / C | Java | .NET / C# / VB / XML / ASP.net | ASP
PostgreSQL | MS SQL | Oracle | IBM DB2 | MS Access | MySQL

About Bytes | Sitemap | Privacy Policy | Terms of Use
Copyright 1995-2008 Bytes.com. All rights Reserved