Section of the menu highlighted that shouldn't be

Lady Gray

Section of the menu highlighted that shouldn't be

Sep 28 '10, 03:40 AM

Link to site: http://kukuwhelkrevolution.artistyandprose.com/Index/

Here's the HTML:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Kuku Whelk Revolution</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250" />
<link rel="stylesheet" type="text/css" media="screen, projection" href="menu.css" />
<link rel="stylesheet" type="text/css" media="screen, projection" href="style.css" />
<style type="text/css">
<!--

div.wrap1 .wrap2 {
    /* only with left panel- background-image: url(img/bg1.gif); */
    /* right and left panel - background-image: url(img/bg2.gif); */
    /* only with right panel */ background-image: url(img/bg3.gif);
}

-->
</style>
</head>
<body>
<div class="wrap1">
  <div class="wrap2">
    <div class="logo">Kuku Whelk Revolution
      <div class="slogan">by Charles Kam</div>
    </div>
    <div id="menu">
      <div class="menu">
        <ul>
          <li><span class="hlavny_"><a href="http://kukuwhelkrevolution.artistyandprose.com/Index/">Home</a></span></li>
          <li><img src="img/divider2.png" alt="" /></li>
          <li><span class="hlavny_"><a href="http://kukuwhelkrevolution.artistyandprose.com/Gallery/Gallery.html">Gallery</a></span></li>
          <li><img src="img/divider2.png" alt="" /></li>
          <li><span class="hlavny"><a href="Contact.html">Contact</a></span></li>
          <li><img src="img/divider2.png" alt="" /></li>
          <li><span class="hlavny_"><a href="http://artistryandprose.freeforums.org/">Forum</a></span></li>
          <li><img src="img/divider2.png" alt="" /></li>
          <li><span class="hlavny_"><a href="http://www.artistyandprose.com/index.php">Main Site</a></span></li>
        </ul>
      </div>
      <div class="mainpanel" style="width:656px;">
        <div class="text_">
          <h1>About</h1>
          <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 />
            <br />
            <br />
            <br />
        </div>
      </div>
</div>
      <div class="rightpanel">
        <div class="header">Artists</div>
        <ul id="categories">
          <li style="border-top:0;"><a href="http://shadesofgray.artistyandprose.com/Index/">Gray</a></li>
          <li><a href="http://artistyandprose.com/index.php?p=4_1">Yin</a></li>
          <li><a href="http://shadowwood.artistyandprose.com/">TGP</a></li>
          <li><a href="http://moonshineandmonsters.artistyandprose.com/index.html/">Cal</a></li>
        </ul><br />
          <br />
<br/>
        <div class="header">Quote of the Day</div>
        <div class="text"> <strong>The beatings will continue until morale improves.</strong><br />
          <br />
        </div>
      </div>
    </div>
    <div class="info1">
      <div style="display:inline; float:left;">&copy; 2010 Charles Kam; Artistry and Prose. Design by P&amp;B Creations.</div>
      <div style="display:inline; float:right;"><a href="http://www.topas-tachlovice.cz/topas-tachlovice.aspx">Tachlovice</a></div>
    </div>
  </div>
</div>
</body>
</html>

Here's the CSS:

Code:

<!--

/* 
© 2008 - Design, CSS Style by P&B Creations, pbcreations.sk
© 2008 - Martin Plakinger (CEO)
*/

body {
    color:#333333;
    font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;
    font-size:11px;
    margin:0 auto;
    background: transparent url("img/bg.gif") center top no-repeat;
    background-color:#e4e4e4;
}

a, a:visited, a:link { color:#000000; text-decoration:underline; }

a:hover { color: #666666; }

h1 { font-size:18px; margin:0; color:#333333; border-bottom: 1px dashed #333333; }

h2 { font-size:12px; margin:0; color:#333333; border-bottom: 1px dashed #333333; border-top:1px dotted #333333; }

h1 a, h1 a:visited, h1 a:link { text-decoration:none; }

h2 a, h2 a:visited, h2 a:link { text-decoration:none; padding:10px; line-height:25px; }

h2 img { margin-right:5px; border:0; }

input {
    background-color: #fff;
    background-image:url("img/input.gif");
    background-repeat: repeat-x;
    border:1px solid #a66347;
    width:140px;
    padding:3px;
    margin-top:18px;
}

div.wrap1 {
    width: 858px;
    margin: 0 auto;
    overflow: hidden;
    border:1px solid #c3c3c3;
}

div.wrap1 .wrap2 {
    width: 856px;
    background-repeat:repeat-y;
    border: 1px solid #FFFFFF;
    margin: 0 auto;
    overflow: hidden;
}

div.wrap2 .logo {
    width:796px;
    height:61px;
    padding:0px;
    margin:0 auto;
    background-image: url("img/logo.png");
    background-repeat:no-repeat;
    color:#FFFFFF;
    font-size:22px;
    font-weight:bold;
    padding:30px;
}

div.logo .slogan {
    font-size:9px;
    font-weight:normal;
    margin-top:3px;
}

div.info, div.info1 {
    width:816px;
    line-height:40px;
    background-color:#FFFFFF;
    padding-left:20px;
    padding-right:20px;
    background-image:url(img/info.gif);
    background-repeat:repeat-x;
}

div.info1 { 
    background-image:url(img/info1.gif);
    float:left; 
    border-top:1px solid #fff; 
    background-color:#e4e4e4;
    color:#999;
}

div.info1 a, div.info1 a:link, div.info1 a:visited { color:#999; }

div.info1 a:hover { color: #666; }

div.wrap2 .leftpanel, div.wrap2 .rightpanel {
    width:200px;
    display: inline;
    float:left;
}

div.wrap2 .mainpanel {
    width:456px;
    float:left;
}

div.leftpanel .header, div.rightpanel .header {
    background-image:url(img/header.png);
    background-repeat:no-repeat;
    width:180px;
    line-height:35px;
    padding-left:20px;
    color:#FFFFFF;
    overflow:hidden;
    font-weight:bold;
}

.text { padding:8px; text-align:justify; }
/* uplatnuje sa na left a right stlpec */
.text img { margin-right:10px; margin-bottom: 10px; border:0;  float:left; }

.text_ { padding:15px; text-align:justify; }
/* uplatnuje sa na hlavny stlpec */
.text_ img { vertical-align:middle; border:0; }

span.divider {
    border-bottom:1px dashed #333333; 
    padding-bottom:5px; 
    margin-bottom:5px; 
    display:block;
}

div.rightpanel .inquiry, div.leftpanel .inquiry {
    padding:8px; 
    text-align:justify;
}

.inquiry a, .inquiry a:link, .inquiry a:visited, .inquiry a:hover { text-decoration:none; }

-->

And here's the info for the Menu CSS (I've never worked with one of these before):

Code:

<!--

/* 
© 2008 - Design, CSS Style by P&B Creations, pbcreations.sk
© 2008 - Martin Plakinger (CEO)
*/

div#menu .menu {
        height: 47px;
        width: 856px;
        background-image: url('img/menu.png');
        background-repeat: repeat-x;
    }
    
    *> div#menu .menu { margin-top: -11px; }
    
    div#menu .menu ul {
        padding: 0;
        list-style: none;
        line-height: normal;
        margin-left: -7px;
    }
    
    *> div#menu .menu ul { margin-left:0; }
    
    div#menu .menu li {
        display: inline;
        
    }
    
    div#menu li span.left {
        background-image:url(img/menu-left.gif);
        background-repeat:no-repeat;
        width: 5px;
        height: 64px;
        overflow: visible;
        position: relative;
        bottom:15px;
        vertical-align: bottom;
        visibility:visible;
        display:block;
        padding-top: 15px;
        margin-bottom: -32px;
        float:left;
    }
    
    div#menu li span.hlavny {
        background-image:url(img/menu-central.gif);
        background-repeat:repeat-x;
        height: 64px;
        overflow: visible;
        position: relative;
        bottom:15px;
        vertical-align: bottom;
        visibility:visible;
        display:block;
        float: left;
        padding-top: 15px;
        margin-bottom: -32px;
        text-align: center;
        text-decoration: none;
        padding-left:40px;
        padding-right:40px;
    }
    
    
    div#menu li span.hlavny a, div#menu li span.hlavny a:visited, div#menu li span.hlavny a:link { color:#000000; }
    
    div#menu li span.hlavny_ {
        height: 64px;
        overflow: visible;
        position: relative;
        bottom:15px;
        vertical-align: bottom;
        visibility:visible;
        display:block;
        float: left;
        padding-top: 15px;
        margin-bottom: -32px;
        text-align: center;
        text-decoration: none;
        padding-left:45px;
        padding-right:45px;
    }
    
    div#menu li span.right {
        background-image:url(img/menu-right.gif);
        background-repeat:no-repeat;
        width: 6px;
        height:64px;
        overflow: visible;
        position: relative;
        bottom:15px;
        vertical-align: bottom;
        visibility:visible;
        display:block;
        padding-top: 15px;
        margin-bottom: -32px;
        float: left;
    }
    
    div#menu .menu a, div#menu .menu a:visited, div#menu .menu a:active {
        color:#fff;
        display:block;
        float: left;
        padding: 16px 0 0 0;
        margin:0;
        text-align: center;
        text-decoration: none;
    }

    div#menu .menu img {
        display:block;
        float: left;
        margin: 0px;
        margin-bottom: -16px;
        padding: 12px 0 0 0;
        text-align: center;
        text-decoration: none;
    }
    
    div#menu .menu a:hover { color:#FFFFFF; text-decoration:underline; }

/* categories */

ul#categories {
    width:200px;
    position: relative;
    margin: 0px;
    padding: 0px;
    list-style: none;
    font-size: 11px;
}

ul#categories li {
    display: block;
    padding: 0px;
    line-height: 30px;
    border-bottom: 1px #e4d0c7 solid;
    border-top: 1px solid #f9faf7;
    height: 30px;
    margin-top: -2px; 
    margin-bottom: -2px;
}

*> ul#categories li { margin-top: 0px; margin-bottom: 0px; }

ul#categories li.selected {
    text-decoration: none; 
    background-color:#e4d0c7;
}

ul#categories li a {
    display: block;
    overflow: hidden;
    padding: 0px 0px 0px 40px;
    line-height: 30px;
    text-decoration: none;
    font-size: 11px;
    color: 000;
    background: url(img/arrow.gif) 26px 12px no-repeat;
}
ul#categories li a:hover { 
    text-decoration: underline; 
    background-color:#e4d0c7;
}

-->

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!

Tags: None

RamananKalirajan

Contributor

Join Date: Mar 2008

Posts: 608
#2

Sep 28 '10, 05:28 AM

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
Comment
drhowarddrfine

Recognized Expert Expert

Join Date: Sep 2006

Posts: 7434
#3

Sep 28 '10, 12:25 PM

If you provide a link, posting the html/css is not necessary.
Comment
Lady Gray
#4

Sep 28 '10, 01:31 PM

@ RamananKaliraja n - 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.
Comment

Previous template Next

Section of the menu highlighted that shouldn't be

Section of the menu highlighted that shouldn't be

Comment

Comment

Comment