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

[dina]

Testing Testing

HOME

ABOUT

CHAT

FORUM

HELP

CONTACT

Testing Testing

Testing Testing

[Andrea]

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 {

[dina]

Hi Thelma,

 

Thank you very much, I changed it all and it still doesn't work, could there be any other cause perhaps.

[Andrea]

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

[virtual]

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.

[Bill]

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";
}

[dina]

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

[Andrea]

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

[dina]

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!

[falkencreative]

Either you'll need to figure out the FTP access first, or you'll need to post the complete code.

[virtual]

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

 

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

font-family: chalkboard;

}

[Andrea]

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

[virtual]

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.

[Andrea]

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)

[virtual]

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.

[lm]

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 January 13, 2009 by lm