• dina
  • Member
  • Offline
  • Registered: December 23, 2008
  • Posts: 46

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

could someone please look at my code and tell me why doesn't my code for my menu bar not working. There is no color on link, no font change on hover, etc.

@charset "utf-8";
/* CSS Document */

/*      AUTHOR: Dina Richards
        DATE: 2007.11.30
*/
* {
    margin: 0px;
    padding: 0px;
}
body {
  margin: 0,auto;
  background: #000 url(images/) repeat-x fixed;
}
/*                             Link                        */
#wrapper {
    margin-left:auto;
    margin-right:auto;
    width:787px;
    height:auto;
    color: #FFF;
}
#header {
    height: 315px;
    width: 787px;
    float:left;
}
#logo {
    background: url(images/dark_pixel.jpg) no-repeat;
    height: 315px;
    width: 787px;
    float:left;
    }
#one {
    float:left;
    height:250px;
    width:350px;
    background:url(images/) 0 0 no-repeat;
}
#one a {
    display:block;
    height:250px;
    background:url(images/) top right no-repeat;
}
#one a:focus, #one a:hover, #one a:active {
    background:transparent; /* or background:none; */
}
#container {
    float:left;
    background-color: #333;
    margin-top: 10px;
    height: auto;
    width: 787px;
    text-align: left;
  }
#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 {
    width: 131px;
    height: 48px;
    text-decoration: none;
}
#menu a.link {
    color: #FFF;
}
#menu a.hover {
    width: 131px;
    height: 48px;
    font-family: bradley hand itc;
}
#menu a.visited {
   
}
#main_content {
    margin-top: 60px;
    margin-left: 70px;
}
#footer1 {
    height: 40px;
    width: 100%;
    background-color: #4CBB17;
    border: 1px solid #BFFF00;
}
#footer2 {
    width: 100%;
    height: 40px;
}

..................................................................................................................................

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>bipolarDotCom</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<link href="default.css" rel="stylesheet" type="text/css" media="screen, print"/>
<link rel="shortcut icon" href="images/favicon.gif" type="image/x-icon">
</head>
<body>
<div id="wrapper">
<div id="header">
    <div id="logo">
<p>Testing Testing</p>
        <div id="one"><a href=""></a></div>
    </div>
</div>
<div id="container">
<div id="menu">
    <ul>
<li><a href="" title="">HOME</a></li>
<li><a href="" title="">ABOUT</a></li>
<li><a href="" title="">CHAT</a></li>
<li><a href="" title="">FORUM</a></li>
<li><a href="" title="">HELP</a></li>
<li><a href="" title="">CONTACT</a></li>
    </ul>
    </div>
    <div id="main_content">
<p>Testing Testing</p>
</div>
<div id="footer1">
</div>
<div id="footer2">
<p>Testing Testing</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Vote up Vote down

  • Gender: Female
  • From: San Antonio, TX
  • Registered: December 19, 2008
  • Posts: 3,893
  • Reputation: 5

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

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 {

Just because my computer is online does not mean that I am.
a&b WebDesign

Vote up Vote down

  • dina
  • Member
  • Offline
  • Registered: December 23, 2008
  • Posts: 46

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

Hi Thelma,

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

Vote up Vote down

  • Gender: Female
  • From: San Antonio, TX
  • Registered: December 19, 2008
  • Posts: 3,893
  • Reputation: 5

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

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

Just because my computer is online does not mean that I am.
a&b WebDesign

Vote up Vote down

  • From: Tenerife, Spain
  • Registered: December 29, 2008
  • Posts: 579
  • Reputation: 1

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

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:

<li><a href="#" title="">HOME</a></li>

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.

Lynne
180virtual

Vote up Vote down

  • Bill
  • Moderator
  • Offline
  • Registered: December 20, 2008
  • Posts: 2,229

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

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

Vote up Vote down

  • dina
  • Member
  • Offline
  • Registered: December 23, 2008
  • Posts: 46

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

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

Vote up Vote down

  • Gender: Female
  • From: San Antonio, TX
  • Registered: December 19, 2008
  • Posts: 3,893
  • Reputation: 5

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

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

Just because my computer is online does not mean that I am.
a&b WebDesign

Vote up Vote down

  • dina
  • Member
  • Offline
  • Registered: December 23, 2008
  • Posts: 46

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

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!

Vote up Vote down

  • Gender: Male
  • From: Chico/Sacramento, CA
  • Registered: December 19, 2008
  • Posts: 2,810
  • Reputation: 14

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

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

Benjamin Falk | Falken Creative : Twitter
Skills: Photoshop, Illustrator, HTML, CSS, jQuery, PHP and CodeIgniter

Vote up Vote down

  • From: Tenerife, Spain
  • Registered: December 29, 2008
  • Posts: 579
  • Reputation: 1

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

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

#menu a:focus, #menu a:hover, #menu a:active {
    font-family: chalkboard;
    }

Lynne
180virtual

Vote up Vote down

  • Gender: Female
  • From: San Antonio, TX
  • Registered: December 19, 2008
  • Posts: 3,893
  • Reputation: 5

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

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

Just because my computer is online does not mean that I am.
a&b WebDesign

Vote up Vote down

  • From: Tenerife, Spain
  • Registered: December 29, 2008
  • Posts: 579
  • Reputation: 1

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

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.

Lynne
180virtual

Vote up Vote down

  • Gender: Female
  • From: San Antonio, TX
  • Registered: December 19, 2008
  • Posts: 3,893
  • Reputation: 5

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

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)

Just because my computer is online does not mean that I am.
a&b WebDesign

Vote up Vote down

  • From: Tenerife, Spain
  • Registered: December 29, 2008
  • Posts: 579
  • Reputation: 1

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

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.

Lynne
180virtual

Vote up Vote down

  • lm
  • Advanced Member
  • Offline
  • From: The Netherlands
  • Registered: December 20, 2008
  • Posts: 2,806

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

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

Last edited by lm (January 13, 2009 11:07 am)

lm On Twitter

Vote up Vote down