Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jun 2007
    Posts
    34
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Webbot include causes conflicting CSS

    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
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You will need to add something on leftmenu.htm to identify those links. An ID or class would work.

    http://bonrouge.com/~faq#linkcolours

    I also advise that you stop using Frontpage. Its only going to bring you back here asking questions because you have no idea why the html does this or that because you aren't actually learning it.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New Coder
    Join Date
    Jun 2007
    Posts
    34
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for your help. I looked at the site. It gave me some inspiration and after some other searching I figured this out.

    On the navigation page I put all of the links within a <div id=light>.

    THen I created a .css page with the following:
    Code:
    <style>{  }
    a:link       { color: #24293C }
    a:visited    { color: #24293C }
    a:active     { color: #FF9900 }
    a:hover		 { color: #FF9900 }
    #light a:link {color:#B3C0CE}
    #light a:visited {color:#B3C0CE}
    #light a:active     { color: #FF9900 }
    #light a:hover		 { color: #FF9900 }
    -->
    </style>
    Thanks.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •