Stretched Navigation Bar

Trouble designing Navigation Bar

[kaymeis]

I'm trying to design as strecthed Navigation Bar. Instead all I get are bulleted links. Below is the CSS code:

#nav {
width: 100%;
float: left;
margin: 0 0 1em 0;
padding: 0;
background-color: #f2f2f2;

#nav ul {
list-style: none;
width: 800px;
margin: 0 auto;
padding: 0; }
#nav li {
float: left; }
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc; }
#nav li:first-child a {

#nav li a:hover {
color: #c00;
background-color: #fff; }


Please help!

[lucy24]

Where does it say {display: inline;} or {display: inline-block;}? The only thing I can find is {display: block;} applied specifically to the <a> element. This shouldn't have any particular effect if the list items themselves are set to "inline-block", as one would expect to see in a navigation bar.

<tangent>

#nav li a

Does your "id='nav'" element contain any links that are not inside a list? If not, you can proceed directly to

#nav a

</tangent>

#nav li:first-child a {

I hope something got lost in the cut-and-paste.

What about the HTML that uses these styles? We don't need a full code dump, but some selected lines might help.

[kaymeis]

here are a few lines:Hope it helps<div id="nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="aboutus.html">About Us</a></li>
<li>a href="index.html"><img src"F&D/Images/F&D1.jpg" width="250" height="229" alt="F&D">Home</a>
<li><a href="sign-up.html">Sign Up</a></li>
<li><a href="contact-us.html">Contact Us</a></li>
</ul>
</div>

[not2easy]

One question - unrelated to your html/css: Do you have canonical redirects in your .htaccess file? I ask because there should not be a link to

href="index.html"

for your home page if you do. It would be a link to a 301 redirect. If you do not have canonical handling in your .htaccess file, you should see about adding that - but back to the topic of your question.

About the link to index.html, There is a missing

<

bracket to enclose the link and a missing

</li>

to close the item.

The "

&

" should be entity encoded to

&

but it is the actual name of an image. I would suggest that you change the name of the image to something without

&

like

FandD.jpg

Since the image has no closing slash "

 />

" I am guessing this is html5 where

width="x" and height="x"

would not be used. The <img src is also missing

=

so that won't work at all.

Is this pasted direct from your document or might it include a few typos? This would be important before really trying to look for causes for the problem.

[lucy24]

Since the image has no closing slash " />" I am guessing this is html5 where width="x" and height="x" would not be used.

The lack of a closing slash means HTML vs. XHTML; version number doesn't matter. The width and height attributes should always be used, if known, because they help the page render faster.

Is someone going around saying that HTML5 has deprecated "width" and "height"? They should tell w3.org:

The IDL attributes width and height must return the rendered width and height of the image, in CSS pixels, if the image is being rendered, and is being rendered to a visual medium; or else the intrinsic width and height of the image, in CSS pixels, if the image is available but not being rendered to a visual medium; or else 0, if the image is not available.

There's some further business about "naturalWidth" and "naturalHeight", but that's in-addition-to, not instead-of.

[kaymeis]

This was posted direct from the document

[not2easy]

No matter what your css is, it won't "work" as expected if the html has errors. I suggest to repair the html, then get back to the css.
Some suggestions to fix the html have already been mentioned:
use

<img src="

in place of

<img src"

encode any use of & to &amp;
and if you can change the image name, that makes it a lot easier.
The

a href

needs an opening bracket in every case to make it

<a href

.
The css would need some changes to display as an inline block. The notes lucy24 added are also important, there is no need to use the

li

for the

a

selector and if this is the whole menu, there is no

first-child

within the #nav. Some of the properties you have for <ul> belong to other selectors. You might want to read up on which selectors can have which properties.