By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
434,984 Members | 2,686 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 434,984 IT Pros & Developers. It's quick & easy.

Section of the menu highlighted that shouldn't be

P: n/a
Link to site: http://kukuwhelkrevolution.artistyandprose.com/Index/

Here's the HTML:

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. <title>Kuku Whelk Revolution</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=windows-1250" />
  6. <link rel="stylesheet" type="text/css" media="screen, projection" href="menu.css" />
  7. <link rel="stylesheet" type="text/css" media="screen, projection" href="style.css" />
  8. <style type="text/css">
  9. <!--
  10.  
  11. div.wrap1 .wrap2 {
  12.     /* only with left panel- background-image: url(img/bg1.gif); */
  13.     /* right and left panel - background-image: url(img/bg2.gif); */
  14.     /* only with right panel */ background-image: url(img/bg3.gif);
  15. }
  16.  
  17. -->
  18. </style>
  19. </head>
  20. <body>
  21. <div class="wrap1">
  22.   <div class="wrap2">
  23.     <div class="logo">Kuku Whelk Revolution
  24.       <div class="slogan">by Charles Kam</div>
  25.     </div>
  26.     <div id="menu">
  27.       <div class="menu">
  28.         <ul>
  29.           <li><span class="hlavny_"><a href="http://kukuwhelkrevolution.artistyandprose.com/Index/">Home</a></span></li>
  30.           <li><img src="img/divider2.png" alt="" /></li>
  31.           <li><span class="hlavny_"><a href="http://kukuwhelkrevolution.artistyandprose.com/Gallery/Gallery.html">Gallery</a></span></li>
  32.           <li><img src="img/divider2.png" alt="" /></li>
  33.           <li><span class="hlavny"><a href="Contact.html">Contact</a></span></li>
  34.           <li><img src="img/divider2.png" alt="" /></li>
  35.           <li><span class="hlavny_"><a href="http://artistryandprose.freeforums.org/">Forum</a></span></li>
  36.           <li><img src="img/divider2.png" alt="" /></li>
  37.           <li><span class="hlavny_"><a href="http://www.artistyandprose.com/index.php">Main Site</a></span></li>
  38.         </ul>
  39.       </div>
  40.       <div class="mainpanel" style="width:656px;">
  41.         <div class="text_">
  42.           <h1>About</h1>
  43.           <div class="text">Coming soon!  Please forgive the sawdust and construction signs as I rearrange, add, and get rid of things.  Thanks for your patience and understanding!<br />
  44.             <br />
  45.             <br />
  46.             <br />
  47.         </div>
  48.       </div>
  49. </div>
  50.       <div class="rightpanel">
  51.         <div class="header">Artists</div>
  52.         <ul id="categories">
  53.           <li style="border-top:0;"><a href="http://shadesofgray.artistyandprose.com/Index/">Gray</a></li>
  54.           <li><a href="http://artistyandprose.com/index.php?p=4_1">Yin</a></li>
  55.           <li><a href="http://shadowwood.artistyandprose.com/">TGP</a></li>
  56.           <li><a href="http://moonshineandmonsters.artistyandprose.com/index.html/">Cal</a></li>
  57.         </ul><br />
  58.           <br />
  59. <br/>
  60.         <div class="header">Quote of the Day</div>
  61.         <div class="text"> <strong>The beatings will continue until morale improves.</strong><br />
  62.           <br />
  63.         </div>
  64.       </div>
  65.     </div>
  66.     <div class="info1">
  67.       <div style="display:inline; float:left;">&copy; 2010 Charles Kam; Artistry and Prose. Design by P&amp;B Creations.</div>
  68.       <div style="display:inline; float:right;"><a href="http://www.topas-tachlovice.cz/topas-tachlovice.aspx">Tachlovice</a></div>
  69.     </div>
  70.   </div>
  71. </div>
  72. </body>
  73. </html>
  74.  
Here's the CSS:

Expand|Select|Wrap|Line Numbers
  1. <!--
  2.  
  3. /* 
  4.  2008 - Design, CSS Style by P&B Creations, pbcreations.sk
  5.  2008 - Martin Plakinger (CEO)
  6. */
  7.  
  8. body {
  9.     color:#333333;
  10.     font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;
  11.     font-size:11px;
  12.     margin:0 auto;
  13.     background: transparent url("img/bg.gif") center top no-repeat;
  14.     background-color:#e4e4e4;
  15. }
  16.  
  17. a, a:visited, a:link { color:#000000; text-decoration:underline; }
  18.  
  19. a:hover { color: #666666; }
  20.  
  21. h1 { font-size:18px; margin:0; color:#333333; border-bottom: 1px dashed #333333; }
  22.  
  23. h2 { font-size:12px; margin:0; color:#333333; border-bottom: 1px dashed #333333; border-top:1px dotted #333333; }
  24.  
  25. h1 a, h1 a:visited, h1 a:link { text-decoration:none; }
  26.  
  27. h2 a, h2 a:visited, h2 a:link { text-decoration:none; padding:10px; line-height:25px; }
  28.  
  29. h2 img { margin-right:5px; border:0; }
  30.  
  31. input {
  32.     background-color: #fff;
  33.     background-image:url("img/input.gif");
  34.     background-repeat: repeat-x;
  35.     border:1px solid #a66347;
  36.     width:140px;
  37.     padding:3px;
  38.     margin-top:18px;
  39. }
  40.  
  41. div.wrap1 {
  42.     width: 858px;
  43.     margin: 0 auto;
  44.     overflow: hidden;
  45.     border:1px solid #c3c3c3;
  46. }
  47.  
  48. div.wrap1 .wrap2 {
  49.     width: 856px;
  50.     background-repeat:repeat-y;
  51.     border: 1px solid #FFFFFF;
  52.     margin: 0 auto;
  53.     overflow: hidden;
  54. }
  55.  
  56. div.wrap2 .logo {
  57.     width:796px;
  58.     height:61px;
  59.     padding:0px;
  60.     margin:0 auto;
  61.     background-image: url("img/logo.png");
  62.     background-repeat:no-repeat;
  63.     color:#FFFFFF;
  64.     font-size:22px;
  65.     font-weight:bold;
  66.     padding:30px;
  67. }
  68.  
  69. div.logo .slogan {
  70.     font-size:9px;
  71.     font-weight:normal;
  72.     margin-top:3px;
  73. }
  74.  
  75. div.info, div.info1 {
  76.     width:816px;
  77.     line-height:40px;
  78.     background-color:#FFFFFF;
  79.     padding-left:20px;
  80.     padding-right:20px;
  81.     background-image:url(img/info.gif);
  82.     background-repeat:repeat-x;
  83. }
  84.  
  85. div.info1 { 
  86.     background-image:url(img/info1.gif);
  87.     float:left; 
  88.     border-top:1px solid #fff; 
  89.     background-color:#e4e4e4;
  90.     color:#999;
  91. }
  92.  
  93. div.info1 a, div.info1 a:link, div.info1 a:visited { color:#999; }
  94.  
  95. div.info1 a:hover { color: #666; }
  96.  
  97. div.wrap2 .leftpanel, div.wrap2 .rightpanel {
  98.     width:200px;
  99.     display: inline;
  100.     float:left;
  101. }
  102.  
  103. div.wrap2 .mainpanel {
  104.     width:456px;
  105.     float:left;
  106. }
  107.  
  108. div.leftpanel .header, div.rightpanel .header {
  109.     background-image:url(img/header.png);
  110.     background-repeat:no-repeat;
  111.     width:180px;
  112.     line-height:35px;
  113.     padding-left:20px;
  114.     color:#FFFFFF;
  115.     overflow:hidden;
  116.     font-weight:bold;
  117. }
  118.  
  119. .text { padding:8px; text-align:justify; }
  120. /* uplatnuje sa na left a right stlpec */
  121. .text img { margin-right:10px; margin-bottom: 10px; border:0;  float:left; }
  122.  
  123. .text_ { padding:15px; text-align:justify; }
  124. /* uplatnuje sa na hlavny stlpec */
  125. .text_ img { vertical-align:middle; border:0; }
  126.  
  127. span.divider {
  128.     border-bottom:1px dashed #333333; 
  129.     padding-bottom:5px; 
  130.     margin-bottom:5px; 
  131.     display:block;
  132. }
  133.  
  134. div.rightpanel .inquiry, div.leftpanel .inquiry {
  135.     padding:8px; 
  136.     text-align:justify;
  137. }
  138.  
  139. .inquiry a, .inquiry a:link, .inquiry a:visited, .inquiry a:hover { text-decoration:none; }
  140.  
  141. -->
And here's the info for the Menu CSS (I've never worked with one of these before):

Expand|Select|Wrap|Line Numbers
  1. <!--
  2.  
  3. /* 
  4.  2008 - Design, CSS Style by P&B Creations, pbcreations.sk
  5.  2008 - Martin Plakinger (CEO)
  6. */
  7.  
  8. div#menu .menu {
  9.         height: 47px;
  10.         width: 856px;
  11.         background-image: url('img/menu.png');
  12.         background-repeat: repeat-x;
  13.     }
  14.  
  15.     *> div#menu .menu { margin-top: -11px; }
  16.  
  17.     div#menu .menu ul {
  18.         padding: 0;
  19.         list-style: none;
  20.         line-height: normal;
  21.         margin-left: -7px;
  22.     }
  23.  
  24.     *> div#menu .menu ul { margin-left:0; }
  25.  
  26.     div#menu .menu li {
  27.         display: inline;
  28.  
  29.     }
  30.  
  31.     div#menu li span.left {
  32.         background-image:url(img/menu-left.gif);
  33.         background-repeat:no-repeat;
  34.         width: 5px;
  35.         height: 64px;
  36.         overflow: visible;
  37.         position: relative;
  38.         bottom:15px;
  39.         vertical-align: bottom;
  40.         visibility:visible;
  41.         display:block;
  42.         padding-top: 15px;
  43.         margin-bottom: -32px;
  44.         float:left;
  45.     }
  46.  
  47.     div#menu li span.hlavny {
  48.         background-image:url(img/menu-central.gif);
  49.         background-repeat:repeat-x;
  50.         height: 64px;
  51.         overflow: visible;
  52.         position: relative;
  53.         bottom:15px;
  54.         vertical-align: bottom;
  55.         visibility:visible;
  56.         display:block;
  57.         float: left;
  58.         padding-top: 15px;
  59.         margin-bottom: -32px;
  60.         text-align: center;
  61.         text-decoration: none;
  62.         padding-left:40px;
  63.         padding-right:40px;
  64.     }
  65.  
  66.  
  67.     div#menu li span.hlavny a, div#menu li span.hlavny a:visited, div#menu li span.hlavny a:link { color:#000000; }
  68.  
  69.     div#menu li span.hlavny_ {
  70.         height: 64px;
  71.         overflow: visible;
  72.         position: relative;
  73.         bottom:15px;
  74.         vertical-align: bottom;
  75.         visibility:visible;
  76.         display:block;
  77.         float: left;
  78.         padding-top: 15px;
  79.         margin-bottom: -32px;
  80.         text-align: center;
  81.         text-decoration: none;
  82.         padding-left:45px;
  83.         padding-right:45px;
  84.     }
  85.  
  86.     div#menu li span.right {
  87.         background-image:url(img/menu-right.gif);
  88.         background-repeat:no-repeat;
  89.         width: 6px;
  90.         height:64px;
  91.         overflow: visible;
  92.         position: relative;
  93.         bottom:15px;
  94.         vertical-align: bottom;
  95.         visibility:visible;
  96.         display:block;
  97.         padding-top: 15px;
  98.         margin-bottom: -32px;
  99.         float: left;
  100.     }
  101.  
  102.     div#menu .menu a, div#menu .menu a:visited, div#menu .menu a:active {
  103.         color:#fff;
  104.         display:block;
  105.         float: left;
  106.         padding: 16px 0 0 0;
  107.         margin:0;
  108.         text-align: center;
  109.         text-decoration: none;
  110.     }
  111.  
  112.     div#menu .menu img {
  113.         display:block;
  114.         float: left;
  115.         margin: 0px;
  116.         margin-bottom: -16px;
  117.         padding: 12px 0 0 0;
  118.         text-align: center;
  119.         text-decoration: none;
  120.     }
  121.  
  122.     div#menu .menu a:hover { color:#FFFFFF; text-decoration:underline; }
  123.  
  124. /* categories */
  125.  
  126. ul#categories {
  127.     width:200px;
  128.     position: relative;
  129.     margin: 0px;
  130.     padding: 0px;
  131.     list-style: none;
  132.     font-size: 11px;
  133. }
  134.  
  135. ul#categories li {
  136.     display: block;
  137.     padding: 0px;
  138.     line-height: 30px;
  139.     border-bottom: 1px #e4d0c7 solid;
  140.     border-top: 1px solid #f9faf7;
  141.     height: 30px;
  142.     margin-top: -2px; 
  143.     margin-bottom: -2px;
  144. }
  145.  
  146. *> ul#categories li { margin-top: 0px; margin-bottom: 0px; }
  147.  
  148. ul#categories li.selected {
  149.     text-decoration: none; 
  150.     background-color:#e4d0c7;
  151. }
  152.  
  153. ul#categories li a {
  154.     display: block;
  155.     overflow: hidden;
  156.     padding: 0px 0px 0px 40px;
  157.     line-height: 30px;
  158.     text-decoration: none;
  159.     font-size: 11px;
  160.     color: 000;
  161.     background: url(img/arrow.gif) 26px 12px no-repeat;
  162. }
  163. ul#categories li a:hover { 
  164.     text-decoration: underline; 
  165.     background-color:#e4d0c7;
  166. }
  167.  
  168. -->
When I go to the Index or Homepage of the site, it still shows "Contact" in the menu as being highlighted. I don't mind the menu sections being highlighted, so long as it's the proper section. How can I change the highlighting, or, barring that, how do I remove it completely? Thank you!
Sep 28 '10 #1
Share this Question
Share on Google+
3 Replies


RamananKalirajan
100+
P: 607
The Contact menu is having the class "hlavny" and the rest has "hlavny_". Please check on this this will solve your problem.

Thanks and Regards
Ramanan Kalirajan
Sep 28 '10 #2

drhowarddrfine
Expert 5K+
P: 7,435
If you provide a link, posting the html/css is not necessary.
Sep 28 '10 #3

P: n/a
@ RamananKalirajan - Thank you so much! See, I knew it was going to be something simple like that that I was going to miss. *headdesk*

@ drhowarddrfine - I know the CSS/HTML wasn't necessary, but I wasn't sure how to explain the problem without the visual of the code. Thanks, though.
Sep 28 '10 #4

Post your reply

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