www.webdeveloper.com
Results 1 to 2 of 2

Thread: Link Style in Container

  1. #1
    Join Date
    Sep 2013
    Posts
    2

    Link Style in Container

    So we have a tips and tricks section on our page and I have the following to display the links which works. Problem is it controls all the links on the page.

    This in the Header section of the page.

    <STYLE>
    A:link {color: black; text-decoration:none}
    A:visited {color: red; text-decoration:none}
    A:hover {font-weight:bold; color: black; text-decoration:none}
    </STYLE>

    This as an external script.

    document.write("<br><a class='jsLink' href='tip1.htm'>Tip 1</a>" );
    document.write("<br><a class='jsLink' href='tip2.htm'>Tip 2</a>" );
    document.write("<br><a class='jsLink' href='tip3.htm'>Tip 3</a>" );
    document.write("<br><a class='jsLink' href='trick1.htm'>Trick 1</a>" );
    document.write("<br><a class='jsLink' href='trick2.htm'>Trick 2 </a></br>" );

    This where I want the links to apper.
    <script type="text/javascript" src="javascripts/ne.js"></script>

    I'm trying to migrate from tables and what I would like is to have the link style be applied in the left content container only. Is this possible??

    #container #content #left {
    height: 150px;
    width: 210px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    float: left;
    text-align: left;
    margin-left: 40px;
    background-image: url(../images/ne.jpg);
    padding-top: 5px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 10px;
    }

  2. #2
    Join Date
    Sep 2013
    Posts
    8
    If I'm reading your question right you should be able to do:
    Code:
    #container #content #left a:link {
      /* link style properties here */
    }
    
    #container #content #left a:visited {
      /* visited style properties here */
    }
    
    #container #content #left a:hover {
      /* hover style properties here */
    }
    This tells it that all links within the left content container will have this style but it will be ignored for other links on the page.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles