14 Replies Latest reply on Feb 8, 2010 5:50 PM by John Waller

    Link Colour Problem

    Jonathon Bowers1

      Hi, I am having two problems with the link colours on my website I

      am designing.

       

      My first problem is the link colour I have on one page is green, and I want it to be grey (#CCCCCC). I have it set to grey in css, but it stays green and I can't figure out why.

       

      My second problem is I have two links on one page, but I want them to be different colours. On the page that I have attached I want the links at the top to be grey, and the links at the bottom to be blue. I can't figure out how to change the link colour of one link without the colour of the other link changing.

       

      Thank you in advance.

       

      Here is the following html and css code (Also attached):

       

      HTML

       

      !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

      <title>The Station</title>

      <html

      <link rel="stylesheet" href="../style_train.css" type="text/css" charset="utf-8" />

          <style type="text/css">
      <!--
      .style1 {
      font-size: 36px;
      color: #000000;
      font-family: Verdana, Arial, Helvetica, sans-serif;
      }
      #apDiv1 {
      position:absolute;
      left:501px;
      top:1085px;
      width:329px;
      height:286px;
      z-index:1;
      }
      .style2 {color: #FFFFFF}
      #apDiv2 {
      position:absolute;
      left:64px;
      top:17px;
      width:89px;
      height:1133px;
      z-index:2;
      }
      #apDiv3 {
      position:absolute;
      left:183px;
      top:1073px;
      width:490px;
      height:149px;
      z-index:1;
      visibility: visible;
      padding-left: 15px;
      }
      #apDiv4 {
      position:absolute;
      left:499px;
      top:1079px;
      width:334px;
      height:318px;
      z-index:1;
      }
      #apDiv5 {
      position:absolute;
      left:493px;
      top:1078px;
      width:346px;
      height:313px;
      z-index:1;
      }
      .style22 {color: #000000}
      #apDiv6 {
      position:absolute;
      left:522px;
      top:1085px;
      width:357px;
      height:312px;
      z-index:1;
      }
      #apDiv7 {
      position:absolute;
      left:235px;
      top:362px;
      width:522px;
      height:349px;
      z-index:1;
      }
      .style23 {font-size: 14px}
      .style24 { font-size: 24px;
      color: #1F8BBA;
      font-family: "Times New Roman", Times, serif;
      }
      .style25 {
      color: #005980;
      font-size: 13px;
      }
      .style11 { color: #005980;
      line-height: 30px;
      }
      .style26 { font-size: 24px;
      font-family: "Times New Roman", Times, serif;
      color: #208CBA;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      }
      .style30 { line-height: 30px;
      font-weight: normal;
      font-family: Arial, Helvetica, sans-serif;
      color: #005980;
      font-size: 13px;
      }
      .style31 { font-family: Arial, Helvetica, sans-serif;
      font-size: 13px;
      color: #005980;
      }
      .style32 {color: #208CBA; font-style: normal; font-weight: normal; font-variant: normal; font-family: "Times New Roman", Times, serif;}
      .style35 { font-weight: bold;
      font-variant: normal;
      font-family: "Times New Roman", Times, serif;
      font-style: normal;
      color: #005980;
      }
      .style46 {line-height: 30px; font-family: Arial, Helvetica, sans-serif; font-size: 13px;}
      .style47 {color: #005980; font-style: normal; font-weight: normal; font-variant: normal; font-family: "Times New Roman", Times, serif; }
      .style49 {
      line-height: 30px;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 13px;
      color: #FFFFFF;
      }
      -->
          </style>
      </head>

      <body>
      <div id="wrapper">
        <div id="header">
          <h1 class="style1 style2">The Station</h1>
          <div id="nav-top"></div>
          <div id="nav">
            <ul>
              <li class="home"><a href="../index.html">Home</a></li>
              <div class="style22" id="div-1d"><img src="../images/Pictures/station_map.JPG" alt="map" width="372" height="296" /></div>
              <div class="style22" id="div-1f"><span class="style26">Train Gallery</span><br />
                <br />
                <span class="style32"><span class="style30">Click </span></span><span class="style35"><span class="style49"><a href="../Templates/">HERE</a></span></span><span class="style47"><span class="style46"> to view photos of the authentic 24-guage miniature steam train out on the tracks!</span></span></div>
              <div class="style22" id="div-1g"><span class="style26">Ticket Prices<br />
                  <br />
                  <span class="style30">Tickets are good for any run of the year.<br />
                  </span><span class="style31">Adults: $5.50<br />
      Children: $5.00<br />
      Children under 12 months: Free</span></span></div>
              <div class="style22" id="div-1c">
                <div align="left"><span class="style24">Come For A Ride!</span><br />
                  <span class="style25">The whole family will enjoy a ride aboard an authentic narrow-guage Replica of an 1836 American Steam Engine. The train takes a fifteen minute route around the Port Elgin Harbour and through the beautiful North Shore Park (see route below). It's a one mile scenic trip that will take you back in time. The train departs from The Station located on Port Elgin's main beach.</span></div>
              </div>
              <li class="train"><a href="train.html">Train</a></li>
              <li class="mini_putt"><a href="mini_putt.html">Mini Putt</a></li>
              <li class="fudge"><a href="fudge.html">Fudge</a></li>
              <li class="candy_factory"><a href="candy_factory.html">Candy Factory</a></li>
              <div class="style1" id="div-1b">
                <div align="center" class="style22 style23"><img src="../images(2)/train1.jpg" alt="train pic" width="264" height="208" /></div>         
               
              </div>
              <div class="style1" id="div-1a">
                <div align="center">
                  <h2 class="style26">Train Schedule</h2>
                  <p align="justify"><span class="style11">The train runs every day <strong>except Mondays</strong> from July 1st to Labour Day. There are five runs a day at the following times: <strong> <br />
                    1:00 p.m</strong>.<br />
        <strong>3:00 p.m</strong>.<br />
        <strong>5:00 p.m</strong>.<br />
        <strong>7:30 p.m</strong>. <br />
        <strong> 8:30 p.m</strong>.<br />
                    All train runs are<strong> weather permitting</strong>; if the tracks are wet the train will not run. Tickets are sold by a first-come, first-serve basis - tickets can be bought in advance but do not guarantee you a spot on the train. It is suggested that you come to The Station 20 - 30 minutes before each scheduled run to ensure you get a spot on the train.</span></p>
                </div>
              </div>
              <li class="food"><a href="food.html">Food/Treats</a></li>
              <li class="gallery"><a href="gallery.html">Gallery</a></li>
              <li class="merchandise"><a href="merchandise.html">Merchandise</a></li>
            </ul>
          </div>
        </div>
      </div>
      </body>
      </html>                                     

       

      CSS

       

      html, body, h1, h2, h3, h4 {
      margin: 0;
      padding: 0;
      }
      h1 img {
      display: block;
      }

      a {
      color: #464544;
      }
      a:hover {
      color: #FFA405;
      }
      .left {
      float: left;
      }
      .right {
      float: right;
      }
      .more {
      text-align: right;
      }
      .clear {
      clear: both;
      }

      body {
      text-align: center;
      color: #FFFFFF;
      padding-top: 0px;
      padding-right: 0px;
      padding-bottom: 0px;
      padding-left: 0px;
      background-color: #FFFFFF;
      background-repeat: repeat-x;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 12px;
      top: 80px;
      }

      /** layout **/
      #wrapper {
      text-align: left;
      margin: auto;
      width: 678px;
      position: relative;
      background-color: #E4E4E4;
      vertical-align: top;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 11px;
      border-right-width: thick;
      border-left-width: thick;
      border-right-style: solid;
      border-left-style: solid;
      border-right-color: #208CBA;
      border-left-color: #208CBA;
      border-top-width: thick;
      border-top-style: solid;
      border-top-color: #208CBA;
      color: #FFFFFF;
      background-position: center;
      height: 1100px;
      border-bottom-width: 30px;
      border-bottom-style: solid;
      border-bottom-color: #208CBA;
      bottom: 10px;
      top: 10px;
      }

      /** header **/
      #header {
      padding-top: 0px;
      }
      #header h1 {
      font-weight: normal;
      position: absolute;
      left: 2px;
      top: 36px;
      color: #FFFFFF;
      padding: 0 0 0 0.7em;
      margin: -1em 0 0 0;
      line-height: 1;
      width: 650px;
      font-family: "Times new roman", serif;
      font-size: 32px;
      visibility: visible;
      }
      #nav-top {
        margin-left: 503px;
      }
      #nav-top ul {
        margin: 1em 0 0 0;
        padding: 0;
        height: 31px;
      }
      #nav-top li {
        float: left;
        background: #C19855 url(images/Pictures/tab_left.gif) no-repeat;
        list-style: none;
        text-align: center;
        font: 18px "Times new roman", serif;
        height: 31px;
        line-height: 31px;
      }
      #nav-top li div {
        background: top right url(images/Pictures/tab_right.gif) no-repeat;
      }
      #nav-top li#tab-faq {
        width: 59px;
      }
      #nav-top li#tab-map {
        width: 99px;
        margin-left: 3px;
      }
      #nav-top a {
        color: #443816;
        text-decoration: none;
      }
      #nav-top a:hover {
        color: #241D0A;
      }

      #nav {
      background-image: url(images(2)/main_pic
      .jpg)
      ;
      background-repeat: no-repeat;
      padding-top: 250px;
      background-position: center;
      background-color: #1f8bba;
      background-image: url(images/Pictures/header_pic.jpg);
      }
      #nav ul {
        margin: 0;
        padding: 0;
        height: 36px;
        line-height: 36px;
        border-left: 2px solid #9E9479;
        background: bottom left url(images/nav_lit.gif) repeat-x;
      }
      #nav li {
      list-style: none;
      float: left;
      margin: 0;
      padding: 0 10px;
      top: 200px;
      right: 100px;
      }
      #nav li.train {
      background: bottom left url(images/nav_drk.gif) repeat-x;
      padding-left: 15px;
      height: 36px;
      }
      #nav a {
      color: #006666;
      text-decoration: none;
      font-family: "Times new roman", serif;
      font-size: 16px;
      }
      #nav a:hover {
      color: #CCCCCC;
      }

      /** content **/

      #content {
        padding-left: 20px;
      }
      #content h2 {
      color: #208CBA;
      font-weight: normal;
      padding: 1px 1px 1px 8px;
      margin-top: 22px;
      border-left-width: 3px;
      border-left-style: none;
      border-left-color: #005980;
      font-family: "Times new roman", serif;
      font-size: 24px;
      }
      #content p {
        margin-left: 11px;
        line-height: 1.4;
      }
      #content a {
        color: #8D692D;
        font-weight: bold;
        text-decoration: none;
      }
      #content a:hover {
        color: #5B431A;
      }

      #content .left-col {
      float: left;
      width: 510px;
      height: 550px;
      }
      #content .right-col {
        float: right;
        width: 136px;
      }


      #content #welcome {
        margin-right: 40px;
        font-size:13px;
        color: #3E341E;
      }
      #content #welcome a{
        color: #3E341E;
        text-decoration:underline;
      }
      #content #welcome a:hover{
        color: #DBBF77;
        text-decoration:underline;
      }
      #gallery {
        margin-top: 14px;
      }
      #gallery .box {
      float: left;
      width: 119px;
      margin-right: 1px;
      position: relative;
      height: 215px;
      background-color: #1f8bba;
      padding-top: 0;
      padding-right: 23px;
      padding-bottom: 2.3em;
      padding-left: 23px;
      }
      #gallery .box h3 {
        text-align: center;
        line-height: 23px;
        font: 23px "Times new roman", serif;
        color: #fff;
        height: 23px;
        margin-bottom: 20px;
        background: top center url(images/Pictures/tab_drk.gif) no-repeat;
      }
      #gallery .box p {
      margin: 1em 0;
      padding: 0;
      line-height: 1.4;
      }
      #gallery .box .more {
      height: 18px;
      line-height: 18px;
      background: #978040 top left url(images/moretab_left_drk.gif) no-repeat;
      position: absolute;
      bottom: -26px;
      right: 8px;
      width: 3.2em;
      padding-right: 4px;
      margin-bottom: 0;
      }
      #gallery .box .more a {
        color: #4C330D;
      }
      #gallery .box .more a:hover {
        color: #291B06;
      }
      #gallery .box-lit {
      background-color: 005980;
      background-image: url(images/back.gif);
      background-repeat: repeat;
      }
      #gallery .box-lit h3 {
        background: top center url(images/Pictures/tab_lit.gif) no-repeat;
      }
      #gallery .box-lit .more {
        background: #B4A26D top left url(images/moretab_left_lit.gif) no-repeat;
      }

      #content .right-col li, #content .right-col ul {
        list-style: none;
        margin: 0;
        padding: 0;
      }

      #content .right-col li {
        border-left: 1px solid #615331;
        padding-left: 9px;
        margin: 10px;
      }
      #content .right-col a {
        font-size: 12px;
        font-weight: normal;
        color: #67450D;
      }
      #content .right-col a:hover {
        color: #2C1D04;
      }
      /** later **/

      #later {
      color: #564929;
      background-position: top;
      height: 20px;
      }
      #later h2 {
        font-size: 20px;
      }
      #later .right-col p {
        font-size: 12px;
        line-height: 1.7;
      }

      #later .box {
        float: left;
        width: 85px;

      }
      #later .box a{
      text-decoration:underline;
      }
      #later #later-b1 {
        padding-top: 67px;
        margin-right: 4px;
      }
      #later #later-b2 {
        width: 155px;
        margin-right: 4px;
      }
      #later #later-b3 {
        width: 114px;
        margin-right: 6px;
      }
      #later #later-b4 {
        padding-top: 67px;
        width: 137px;
      }

      #footc {
        height: 10px;
      }
      #footer {
      text-align: center;
      color: #CFB472;
      padding: 14px;
      background-color: #1f8bba;
      }
      #apDiv5 {
      position: fixed;
      }
      #divtest {
      width: 50px;
      }
      #div-1 {
      position:relative;
      }
      #div-1a {
      position:absolute;
      top:546px;
      right:16px;
      width:257px;
      height: 211px;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 13px;
      font-style: normal;
      line-height: normal;
      }
      #div-1b {
      position:absolute;
      top:311px;
      left:388px;
      width:293px;
      height: 217px;
      }
      #div-1c {
      position:absolute;
      top:292px;
      left:12px;
      width:370px;
      height: 130px;
      }
      #div-1d {
      position:absolute;
      top:558px;
      left:14px;
      width:370px;
      height: 130px;
      }
      #div-1e {
      position:absolute;
      top:840px;
      left:24px;
      width:168px;
      height: 256px;
      line-height: 20px;
      }
      #div-1f {
      position:absolute;
      top:820px;
      left:213px;
      width:168px;
      height: 259px;
      line-height: 20px;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      }
      #div-1g {
      position:absolute;
      top:777px;
      left:191px;
      width:80px;
      height: 32px;
      line-height: 20px;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;

      }
      #div-1f {
      position:absolute;
      top:880px;
      left:207px;
      width:168px;
      height: 256px;
      line-height: 20px;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      color: #ffa405;
      }
      #div-1g {
      position:absolute;
      top:878px;
      left:17px;
      width:168px;
      height: 256px;
      line-height: 20px;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;

      }