473,387 Members | 1,520 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

home > topics > html / css > questions > hi, every one, anchor tag in li tag is problem, pls see it

Join Bytes to post your question to a community of 473,387 software developers and data experts.

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 7717
I am testing in IE6 and Mozilla FF, showing differently

pls checkit
Sep 6 '08 #2

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

Similar topics

0
javascript problems linking to anchor
by: nam | last post by:
could someone please help me with this bizarre problem - I've created a swf file at the top of my html page. The swf file (using Swish) is simply a menu of 5 links to 5 anchor points on the html...
Java
2
Dynamically specifying an anchor and name/value pairs
by: Astra | last post by:
Hi everybody Need your help. I have a DB-extracted list of say 5 items per page, which have links on each one that takes you to more detailed info on the 'clicked' particular item. When you...
ASP / Active Server Pages
5
Calling a javascript function from an anchor tag?
by: elsenraat_76 | last post by:
Hello! I was wondering if someone could help me out with a problem I'm having? I'm trying to input a javascript value into an anchor tag (from a function), but don't have an event to call the...
Javascript
2
Anchor/dock property
by: James | last post by:
I have a forms application which has many controls such as buttons,labels,listviews,text boxes etc. If you set the window size to maximum size so that it would expand to the size of the screen the...
C# / C Sharp
6
Anything better than "Anchor"?
by: Richard Brown | last post by:
Ok, I celebrate and rejoice in the Anchor property. So wonderful compared to the horrible 'resize' code I had to write in VB6, there is just no end to the wonders of VB.NET..... uh, ok..... BUT......
Visual Basic .NET
5
FAQ Proposed Anchor Names
by: Randy Webb | last post by:
The list below has the current section number, proposed anchor name, and then the current title of that section. Some make sense, some don't. There are a few that don't have proposed anchor names...
Javascript
5
anchor fails in fire fox
by: Meadock | last post by:
Here's an example of what i'm trying to do. At www.webpage.com/page1.php, there's a link that points to an anchor at www.webpage.com/page2.php. The syntax is: <a href="page2.php#anchor">Link</a>...
HTML / CSS
2
Javascript, window.opener.location.href with anchor doesn't actually refresh
by: TheITGuyFromNY | last post by:
To set this up, I have a parent window with a list of things (doesn't matter what they are, but they are loaded by the page dynamically from a database with ASP server-side script. So, next to each...
Javascript
0
Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
General
0
Batch import of multiple excel files into the database
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
Data Management
0
Merging data from multiple Excel files
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
Data Management
0
Migrating Website to Cloud - Emmanuel Katto
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
General
0
BarryA
Navigating the Data Structures and Algorithms (DSA)
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
Algorithms / Advanced Math
1
Is that possible of reading the .csv file in column wise and the column have different lengths ?
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
C / C++
0
marktang
What is ONU?
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,...
General
0
Changing the language in Windows 10
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...
Windows Server
0
jinu1996
Maximizing Business Potential: The Nexus of Website Design and Digital Marketing
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
Online Marketing

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.

BYTES.COM © 2024
About Bytes
Terms Of Use
Privacy Policy
Sitemap
Advertise on Bytes:
Post a Job
Sponsored Posts
Platinum & Gold Sponsors
Hire Now!