CSS navigation menu

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts
  • jcaywood
    Major

    • Dec 2007
    • 421

    CSS navigation menu

    I'm playing around with changing my Navigation menu to CSS. But I know very little about CSS.

    Here are my pages:
    LINK to original Updates page
    LINK to CSS Updates page

    LINK to original Roster page
    LINK to CSS Roster page

    I think the CSS menus look so much better than the original menus.
    I've just adapted the CSS coding used on the Roster page. However I would like to reduce the size of the Menu a bit but this also reduces the Roster columns which creates text wrapping which I want to avoid.
    Is there any way to change one CSS style on a page without changing another?
    I"ve also been unable to change the font size. Here's my code:

    <style type="text/css">
    #menu a, #menu a:visited {
    font-family:comic sans ms;
    text-decoration:none;
    text-align:center;
    background-color:#7ED0F2;
    color:black;
    display:block;
    width:10em;
    padding:0.1em;
    margin:0.2em auto;
    border-right:3px solid #7ED0F2;
    border-left:3px solid #7ED0F2;
    }
    #menu a:hover {
    border-right:3px solid #F6Bc1C;
    border-left:3px solid #F6Bc1C;
    background-color:gold;
    }
    </style></style>

    I tried adding to the above code:
    font-size: 8
    and font-size:80%
    and font-size-adjust:0.80
    but nothing changes. What code would I add to adjust the font size and the height of the boxes?

    Will this change create any problems I am overlooking?

    Thanks for your help and comments.
    Jerry

    Great Adult Gag Gifts
    Rockdale, TX - Class of 1965
    Milam County Historical Commission

  • Collectors-info
    General

    • Feb 2006
    • 8703

    #2
    Re: CSS navigation menu

    Hi is your css got all the punctuations?. IE:

    <style type="text/css">
    #menu a, #menu a:visited {
    font-size:10px;
    font-family:comic sans ms;
    text-decoration:none;
    text-align:center;
    background-color:#7ED0F2;
    color:black;
    display:block;
    width:10em;
    padding:0.1em;
    margin:0.2em auto;
    border-right:3px solid #7ED0F2;
    border-left:3px solid #7ED0F2;
    }
    #menu a:hover {
    font-size:10px;
    border-right:3px solid #F6Bc1C;
    border-left:3px solid #F6Bc1C;
    background-color:gold;
    }
    </style>
    Regards Chris.

    Collectables, Collecting, collectors-info.com

    www.chrismorris.co.uk

    House build project

    Comment

    • jcaywood
      Major

      • Dec 2007
      • 421

      #3
      Re: CSS navigation menu

      No, it does not have font size. I tried adding it but wasn't putting the 'px'.
      I'll do that now. Thanks
      Jerry

      Great Adult Gag Gifts
      Rockdale, TX - Class of 1965
      Milam County Historical Commission

      Comment

      • jcaywood
        Major

        • Dec 2007
        • 421

        #4
        Re: CSS navigation menu

        I added font-size:6px to both locations, saved and published and didn't see any change. I then changed the value to 16px, saved and published and no change either.
        I'm guess I'm missing something. Thanks

        PS: Yes, I F5 several times and even cleared cache in IE and FF.
        Last edited by jcaywood; 09-27-2008, 03:32 PM. Reason: add info
        Jerry

        Great Adult Gag Gifts
        Rockdale, TX - Class of 1965
        Milam County Historical Commission

        Comment

        • jcaywood
          Major

          • Dec 2007
          • 421

          #5
          Re: CSS navigation menu

          I got the font size added - I used only 13 instead of 13px. Seems this also automatically adjusts the height. It didn't work at first because I left off the ';' at the end of the line.
          I suspect changing the style between two CSS apps on a page has to do with the ' #menu a, #menu a:visited {' and possibly using a 'menu b' - but I'm lost from there.

          One other question also: Is there some easy way to measure the result of CSS on a page to allow me to size the HTML box the same size as the result? For example, if my CSS menu is 150x400 it would help me to keep the HTML box 150x400. I can get close by moving an image on the page until I get it touching the menu and then get coordinates. There may be a quicker way?
          Thanks
          Jerry

          Great Adult Gag Gifts
          Rockdale, TX - Class of 1965
          Milam County Historical Commission

          Comment

          • jcaywood
            Major

            • Dec 2007
            • 421

            #6
            Re: CSS navigation menu

            I think I just solved the problem of changing styles on a single page:
            By using a &#37; instead of a font size, it prevents the text-wrapping on the roster page.
            I am still lost on determining the size for the HTML box.
            Thanks

            Have you ever heard that old saying? You can buy 'em books and send 'em to school, but all they do is eat the covers off.
            Asking questions and then answering them makes me think that applies to me!
            Jerry

            Great Adult Gag Gifts
            Rockdale, TX - Class of 1965
            Milam County Historical Commission

            Comment

            • Karen Mac
              General

              • Apr 2006
              • 8332

              #7
              Re: CSS navigation menu

              hk.. those are not vodahosted sites in your signature. Im removing them again..do not put them back.

              karen

              VodaHost

              Your Website People!
              1-302-283-3777 North America / International
              02036089024 / United Kingdom
              291916438 / Australia

              ------------------------

              Top 3 Best Sellers

              Web Hosting - Unlimited disk space & bandwidth.

              Reseller Hosting - Start your own web hosting business.

              Search Engine & Directory Submission - 300 directories + (Google,Yahoo,Bing)


              Comment

              Working...
              X