Jump to content
Stef's Coding Community
Sign in to follow this  
dina

why doesn't my code for my menu bar......

Recommended Posts

It should be a colon instead of a period:

 

#menu a.link { ---- and all the other a's (a:hover, a:visited, etc.) ---- should be #menu a:link {

Share this post


Link to post
Share on other sites

Your link selectors also are in the wrong order - didn't pay attention to that last time. It has to be:

 

link

visited

focus (if you use it)

hover

active

 

You can remember that by:

 

Lord Vadors Former Handle Annakin

Share this post


Link to post
Share on other sites

You have not given a colour to your hover and visited states, and you need to put # between the quotation marks in the link to make them work, as follows:

 

  • HOME
  •  

    It is also a good idea to comment your closing div tags so that you can see at a glance if you have closed them propertly.

    Share this post


    Link to post
    Share on other sites

    Other than what Thelma already mentioned (changing the period to a colon, changing the order of the anchor states) remove @charset "utf-8"; from the top of your CSS.

     

    You can remove #menu a:link entirely and declare the styles for every anchor state just using #menu a. Then you only need to declare what changes in other states. Based on your existing CSS the only style change in any state other than the default is the font family. A font family that is more than one word must be enclosed in quotes in order to work.

     

    An anchor is an inline element. Applying width and height to an inline element has no effect. So you can remove the width and height declarations. (Unless you are planning on adding a background to make the links appear more as buttons, in which case you will need to add display: block; to #menu a and keep the width and height.)

     

    Focus should always be included along with hover, its not a matter of 'if you use it'. Hover only applieswhen using a mouse, focus will also include keyboard navigation. IE 6 treats :active as :focus so include that also to ensure your navigation is equally accessible to all users.

     

    #menu a {
    color: #fff;
    text-decoration: none;
    }
    #menu a:visited {
    /* add styles for visited links */
    }
    #menu a:focus, #menu a:hover, #menu a:active {
    font-family: "bradley hand itc";
    }

    Share this post


    Link to post
    Share on other sites

    thanx to every one above for the help.

     

    I went and change every thing but still a few things Bill suggested didn't work like:

     

    1) my color for visited added didn't take effect

     

    2) my change of font-family didn't take effect either

     

    here is my new code:

     

    css

     

    #menu {

    width: 787;

    height: 50px;

    background: url(images/title.gif) repeat-x;

    }

    #menu li {

    float: left;

    width: 131px;

    padding-top: 0.7em;

    list-style-type: none;

    text-align: center;

    }

    #menu ul {

    display: inline;

    }

    #menu a {

    text-decoration: none;

    color: #FFF;

    }

    #menu a:visited {

    color: #22FF00;

    }

    #menu a:focus, #menu a:hover, #menu a:active {

    font-family: "bradley hand itc";

    }

     

    thank you in advance for the support

    Share this post


    Link to post
    Share on other sites

    It really would make helping so much easier if you could upload your page(s) somewhere.....

    Share this post


    Link to post
    Share on other sites

    Hi Thelma,

     

    Yes I know exactly what your saying, it is a big schlep at the moment, but there is a problem that needs to be sorted out between my firewall, auto update and filezilla (which my server provider recommend for uploading). So until that is sorted I'm guna have to go this route, sorry!

    Share this post


    Link to post
    Share on other sites

    I changed your font family and the new font now shows up.

     

    #menu a:focus, #menu a:hover, #menu a:active {

    font-family: chalkboard;

    }

    Share this post


    Link to post
    Share on other sites

    Chalkboard will only actually appear if people have that font installed on their machines.

    Share this post


    Link to post
    Share on other sites

    Absolutely, the Bradley Hand ITC wasn't showing for me which is why I changed it to see if it was a problem with the font. I just chose Chalkboard at random because it is quite distinctive.

    Share this post


    Link to post
    Share on other sites

    Makes sense to go with that for testing - about the Bradley Hand, could it have been the quotes that were missing in Dina's code?

    font-family: bradley hand itc;

    ??

     

    (Also not sure that Bradley is a good choice due to above mentioned reason)

    Share this post


    Link to post
    Share on other sites

    She did put in the quotes, and funnily enough I do have it installed. I just looked at it and the full name is Bradley Hand ITC TT, so it does show up if I put the full name in.

     

    Dina, you are best to stick to basic fonts to avoid this issue, or use a selection of fonts

    e.g.

    font-family: "Bradley Hand ITC TT", Tahoma, serif;

    so that if they don't have the first font, or the second the browser will choose the default serif font in this case.

    Share this post


    Link to post
    Share on other sites

    it is better not to mess up with hover state much in your menu bar - just give it some other color or underline it.

    May be for some fancy layout you can use in CSS:

    font-style: italic; 

    or, if you go for extreme look - you can use images for menu bar as it is described in here

    Edited by lm

    Share this post


    Link to post
    Share on other sites

    Join the conversation

    You can post now and register later. If you have an account, sign in now to post with your account.
    Note: Your post will require moderator approval before it will be visible.

    Guest
    Reply to this topic...

    ×   Pasted as rich text.   Paste as plain text instead

      Only 75 emoji are allowed.

    ×   Your link has been automatically embedded.   Display as a link instead

    ×   Your previous content has been restored.   Clear editor

    ×   You cannot paste images directly. Upload or insert images from URL.

    Loading...
    Sign in to follow this  

    ×
    ×
    • Create New...