Results 1 to 7 of 7

Thread: CSS navigation menu
      
   

  1. #1
    Join Date
    Dec 2007
    Location
    Bastrop, TX USA
    Posts
    421

    Default 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.

  2. #2
    Join Date
    Feb 2006
    Location
    Earth
    Posts
    8,695

    Default 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>

  3. #3
    Join Date
    Dec 2007
    Location
    Bastrop, TX USA
    Posts
    421

    Default 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

  4. #4
    Join Date
    Dec 2007
    Location
    Bastrop, TX USA
    Posts
    421

    Default 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 at 04:32 PM. Reason: add info

  5. #5
    Join Date
    Dec 2007
    Location
    Bastrop, TX USA
    Posts
    421

    Default 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

  6. #6
    Join Date
    Dec 2007
    Location
    Bastrop, TX USA
    Posts
    421

    Default 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!

  7. #7
    Join Date
    Apr 2006
    Location
    X marks the spot
    Posts
    8,333

    Default 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)



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
  •