3 Replies Latest reply on Feb 16, 2010 7:14 AM by osgood_

    Rollover link problem

    camelbreath Level 1

      http://westmemphisstorage.com/rollover.html

       

      This site is up and operational, but the client wants to change how his customers see the "account login" and "reserve a unit links." He has asked for buttons. I made some buttons and got them in place with the idea of creating a link and having the background image change on rollover via CSS.

       

      Thus far, my efforts have been a dismal failure. I originally built this site with tables before I learned how to build with CSS. So I added a couple of divs over the main content table in this test file to house the rollovers. He is happy with the appearance. I have links in the main menu on the active pages of the site, but my guy wants the big buttons.

       

      Can anyone help?

       

      Thanks,

      Jie

        • 1. Re: Rollover link problem
          osgood_ Level 8

          You need to use an 'unordered list' <ul> to contain the buttons (see below). Give each <li> an identity 'id' as shown below, "logIn" and "reserveUnit"

           

           

          <div id="nav">
            <ul>
            <li id="logIn"><a href="account.html"></a></li>
            <li id="reserveUnit"><a href="unit.html"></a></li>
          </ul>
            </div>

           

          Next add the following css to your style sheet:

           

          #nav ul {
          margin: 0;
          padding: 0;
          width: 290px;
          }
          #nav li {
          float: left;
          list-style: none;
          width: 135px;
          margin: 0 10px 0 0;
          padding: 0;

          }
          #nav #logIn a {
          display: block;
          width: 135px;
          height: 25px;
          background-color:#639;
          background-image: url(logIn_1.gif);
          background-repeat: no-repeat;
          text-align: center;
          }
          #nav #logIn a:hover {
          background-color: #CF0;
          background-image: url(logIn_2.gif);
          }
          #nav #reserveUnit a {
          display: block;
          width: 135px;
          height: 25px;
          background-color: #0F0;
          background-image: url(reserveUnit_1.gif);
          background-repeat: no-repeat;
          text-align: center;
          }
          #nav #reserveUnit a:hover {
          background-color:#F96;
          background-image: url(reserveUnit_2.gif);
          }

           

          Use background images for the buttons applied to the anchor <a> tags as shown in the above css #nav #logIn a, #nav #logIn a:hover Make sure the <a> css is set to the width and height of the button, which is currently 135px x 25px.

           

          Repeat the use of background images for #nav #reserveUnit a, #nav #reserveUnit a:hover as shown above.

           

          You can delete the background colors as these are only there to give some visual guidance whilst setting the images.

           

          Finally remove the two css selector styles shown below from your css as these are now redundant if you follow the instructions above. Leaving them in the stylesheet may cause conflicts.

           

          #container #nav a {
               font-family: Verdana, Geneva, sans-serif;
               font-size: 0.9em;
               font-weight: bold;
               text-decoration: none;
               color: #000;
               display: block;
               width: 135px;
               float: left;
               height: 25px;
               text-align: center;
               line-height: 1.8em;
               border: 1px solid #000;
               margin-right: .5em;
               background: #EAD102;
              
          }
          #container #nav a:hover {
               font-family: Verdana, Geneva, sans-serif;
               font-size: 0.9em;
               font-weight: bold;
               text-decoration: none;
               color: #000;
               display: block;
               width: 135px;
               float: left;
               height: 25px;
               text-align: center;
               line-height: 1.8em;
               border: 1px solid #000;
               margin-right: .5em;
               background: #E4533E;
          • 2. Re: Rollover link problem
            camelbreath Level 1

            Osgood, thanks for your help. Wow, a whole style sheet.

            Joe

            • 3. Re: Rollover link problem
              osgood_ Level 8

              camelbreath wrote:

               

              Osgood, thanks for your help. Wow, a whole style sheet.

              Joe

               

              The css could have been cut down to just:

               

              #nav ul {
              margin: 0;
              padding: 0;
              width: 290px;
              }
              #nav li {
              float: left;
              list-style: none;
              width: 135px;
              margin: 0 10px 0 0;
              padding: 0;

              }

              #nav a {

              display: block;

              width: 135px;

              height: 25px;
              }
              #nav #logIn a {
              background-image: url(logIn_1.gif);
              background-repeat: no-repeat;
              }
              #nav #logIn a:hover {
              background-image: url(logIn_2.gif);
              }
              #nav #reserveUnit a {
              background-image: url(reserveUnit_1.gif);
              background-repeat: no-repeat;
              }
              #nav #reserveUnit a:hover {
              background-image: url(reserveUnit_2.gif);
              }