Member Avatar for Member #174700

Hello,

I have created a list of links that serve as the left side navigation that I include in every page of my site.

I add it using Frontpage's Webbot include

<!--webbot bot="Include" U-Include="navigation/leftmenu.htm" TAG="BODY" -->

On leftmenu.htm I have included some internal CSS to make links and visited links light blue with an orange hover.

<!--
a:link {color:#B3C0CE}
a:visited {color:#B3C0CE}
a:active { color: #FF9900 }
a:hover { color: #FF9900 }
-->

In my other pages I have the links set to dark blue with an orange hover.

So what happens, of course, is that since the navigation page is inserted it takes the style from the other pages.

Can anyone figure out how to keep the navigation links from taking their style from the other pages?

Thank you.

Matt

  • 2 Contributors
  • 1 Reply
  • 104 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

The included navigation is being merged into each page, so it simply inherits whatever global anchor rules the host page defines. That is the cascade and specificity at work: a plain a rule can be trumped by a more specific selector or by a rule that appears later. is right to flag browser quirks around link styling, but the practical fix is to scope the nav styles so they have higher specificity than the page-wide rules.

Put the menu markup inside a uniquely identified container and style anchors beneath it (or give the links a class). Example patterns:

<div id="leftnav">
  <ul>
    <li><a class="navlink" href="/page1">Page 1</a></li>
  </ul>
</div>
#leftnav a,
#leftnav a:visited {
  color: #005eaa;
}
#leftnav a:hover,
#leftnav a:active {
  color: #ff6600;
}

/* or using a class */
.navlink { color: #005eaa; }
.navlink:hover { color: #ff6600; }

If your site already uses a global a rule with the same specificity, make sure the nav-specific rules appear after it in the stylesheet, or give them greater specificity (ID vs element). Avoid overusing !important; inline styles will win but are harder to maintain. Best practice: keep the included file as markup-only and centralize all CSS in the main site stylesheet so cascade behavior is predictable.

For completeness: modern browsers impose restrictions on what can be changed for :visited (privacy-related), so rely mainly on color changes and test across browsers.

Member Avatar for MidiMagic

It is best to not change the colors of these items, sinc most browsers can block your styles on links.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.