Navigation Bars

[rande]

Hi,

I just took some courses and still having problems.

I instructor in my DW cs5 class said not to use tables. But I'm having problems. Can anyone help or direct me somewhere that will explain it.

I've been all over the web for days and can't get this.

 

thanks, if you can help.

I have other questions at the bottom.

 

This is what I have and I'll attach, what I'm getting. The "us" is having a problem. If I take out the space it works fine.

 

<div id="navbar">

<ul>

<li><a href="index.html">Home</a></li>

<li><a href="htmldocs/aboutus.html">About Us</a></li>

<li><a href="htdocs/locations.html">Locations</a></li>

<li><a href="htdocs/products.html">Services</a></li>

<li><a href="htmldocs/contactus.html">ContactUs</a></li>

</ul>

</div>

 

#navbar {

background-color: #000;

float: left;

width: 1000px;

list-style-type: none;

text-decoration:none;

font-family: Arial, Helvetica, sans-serif;

color: #0CC;

height: 20px;

margin: 0px;

border-top-width: 1px;

border-right-width: 1px;

border-bottom-width: 1px;

border-left-width: 1px;

font-size: large;

padding: 0px;

display: inline;

word-spacing: 30px;

text-align: center;

}

#navbar ul {

list-style-type:none;

text-decoration: none;

}

#navbar ul li {

list-style-type:none;

display:inline;

text-align:center;

text-decoration: none;

word-spacing: 100em;

}

#navbar ul li a:link {

color:#0CC;

text-decoration: none;

}

#contents {

float: left;

height: 10px;

width: 1000px;

padding: 5px;

background-color: #0F0;

}

 

 

And how many ways are there to make a nav bar?

What is the most popular and/or best way?

I might be missing the initial setup.

The instructor had body id's in some but not others.

What is the right structure?

I missed why we shouldn't use tables. He did use some little ones in

part of it tho.

[falkencreative]

Take a look at this section of code:

 

#navbar ul li {

list-style-type:none;

display:inline;

text-align:center;

text-decoration: none;

word-spacing: 100em;

}

 

That's a huge amount of word spacing, so it's causing the "us" to drop down to the second line.

 

It looks like you are doing things mostly right from a navigation perspective. Styled lists are how I do most navigation elements.

 

In regards to tables, it's not that they are discouraged necessarily, it's just that they should be used for what they were intended for -- displaying data that needs a table structure to be organized/easily understandable. As a general rule, they shouldn't be used for layout. I'll see if I can dig up some links on the subject.

[rande]

Thanks, that worked.

My initial problem was I wanted more space between the words.

How do you do that?

Now my problem is its shifting everything to the upper right and

I can't seem to bring up my type to be in the black box.

 

thanks

for the response

[LSW]

For spacing you can always try using things like padding to force spacing.

 

EM stands for The size of the capital "M" in the given Font and size. So 100em = 100 "M" characters basically. So it is used to define the size of text.

 

The problem with using it as you are is it is not a solid measurement. My preferences may (Should) override your commands. So what looks good on your screen, may not be what I see. Your 100 "M" spacing in Arial will look much different than my 100 "M" spacing in Verdana and your menu may break anyways.

 

Remember, you build the web site for me, the user, in the end. Your design should not force anything on me. I have the power so because I have the special needs. So my font and size on my browser will trump your "suggested" font and size. You cannot know what my preferences or disabilities are as a user, I may need a font size twice yours to read through my thick glasses. So use measurement correctly and beware using font size measurements for layout because font size is the most commonly change preference for users. The will set it for what they need.

 

One of the best places to see different ways to make navigation menus with lists is Maxdesign's Listamatic.

[rande]

Thanks, I read that.

Here's another problem and I'll stop bothering you.

I need the type to move up into the box.

[rande]

Thanks LSW,

that what I needed. thats a good site.

still haven't found how to bring my text, but I'll keep reading.

[falkencreative]

Thanks, I read that.

Here's another problem and I'll stop bothering you.

I need the type to move up into the box.

 

I believe adjusting the top margin on the

 

#navbar ul {

list-style-type:none;

text-decoration: none;

}

 

should fix that (assuming you are talking about moving the navigation links up further into the black bar?) The browser adds top/bottom margin to ul elements by default.