Text moves with a Horizontal UL Menu Link

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • stevedude
    #1

    Text moves with a Horizontal UL Menu Link

    A CSS newbie here:
    I've been learning CSS as I go along developing a web page. I am
    trying to make a horizontal menu link for a footer. On 'hover', I want
    the linked text to have a 'bold' font for easier readability. With my
    current code, the linked text moves on the hover state. If I remove
    the CSS code so that the hover state text is normal and not bold, the
    text does not move.

    I've searched the Web and cannot find a solution, only advice not to
    create bold text upon hover. That is not what I want. My CSS code is
    as follows:

    ..footer{
    float: left;
    background-color: #483303;
    height: 20px;
    width: 731px;
    }

    ..footer ul {
    margin: 0px;
    padding: 2px 0px;
    list-style-type: none;
    text-align: center;
    }

    ..footer ul li {
    display: inline;
    }

    ..footer ul li a {
    text-decoration: none;
    padding: .05em 4em;
    color: #FFFFFF;
    background-color: #483303;
    font-size: .75em;
    }

    ..footer ul li a:hover {
    background-color: #D79F1A;
    color: #483303;
    font-weight: bold;
    }

    HTML Code is very simple:

    <div class="footer">
    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Menu</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Contac t Us</a></li>
    <li><a href="#">Site Map</a></li>
    </ul>
    </div>

    Thanks in advance for any tips.
    Tags: None
    • Bergamot
      #2
      Re: Text moves with a Horizontal UL Menu Link


      stevedude wrote:
      >
      On 'hover', I want
      the linked text to have a 'bold' font for easier readability. With my
      current code, the linked text moves on the hover state. If I remove
      the CSS code so that the hover state text is normal and not bold, the
      text does not move.
      >
      I've searched the Web and cannot find a solution,
      Because there is none.
      only advice not to
      create bold text upon hover.
      That is the best way to handle it.
      That is not what I want.
      It's not about you, but your visitors and what *they* want. I bet they
      don't want jumping text. ;)

      --
      Berg

        Comment

        • stevedude
          #3
          Re: Text moves with a Horizontal UL Menu Link

          On May 2, 5:49 pm, Bergamot <berga...@visi. comwrote:
          stevedude wrote:
          >
          On 'hover', I want
          the linked text to have a 'bold' font for easier readability. With my
          current code, the linked text moves on the hover state. If I remove
          the CSS code so that the hover state text is normal and not bold, the
          text does not move.
          >
          I've searched the Web and cannot find a solution,
          >
          Because there is none.
          >
          only advice not to
          create bold text upon hover.
          >
          That is the best way to handle it.
          >
          That is not what I want.
          >
          It's not about you, but your visitors and what *they* want. I bet they
          don't want jumping text. ;)
          >
          --
          Berg
          Thanks Berg. With the coloring theme for the site, I was hoping to
          make the hover effect stand-out better. I appreciate you taking the
          time to help.

          Stevedude

            Comment

            • David Stone
              #4
              Re: Text moves with a Horizontal UL Menu Link

              In article
              <15cd6489-4b13-44ab-951b-1f6eb8e85f1f@y3 8g2000hsy.googl egroups.com>,
              stevedude <stevedude01@gm ail.comwrote:
              On May 2, 5:49 pm, Bergamot <berga...@visi. comwrote:
              stevedude wrote:
              On 'hover', I want
              the linked text to have a 'bold' font for easier readability. With my
              current code, the linked text moves on the hover state. If I remove
              the CSS code so that the hover state text is normal and not bold, the
              text does not move.
              I've searched the Web and cannot find a solution,
              Because there is none.
              only advice not to
              create bold text upon hover.
              That is the best way to handle it.
              That is not what I want.
              It's not about you, but your visitors and what *they* want. I bet they
              don't want jumping text. ;)

              --
              Berg
              >
              Thanks Berg. With the coloring theme for the site, I was hoping to
              make the hover effect stand-out better. I appreciate you taking the
              time to help.
              The best way to do that is with careful choice of colours. The
              scheme I use (adapted from Ruthsarian Menus) is to have dark text
              on a light background switch to white text on a dark background.

              The important thing is to have a clear contrast between the text
              and the background, and then invert the sense of that on hover.

              >
              Stevedude

                Comment

                Previous template Next
                Working...