How to keep text items spaced out.

[susaninphoenix]

How to keep text items spaced out.

What's the best way to keep things like this separated without using spaces?

EVENTS SCHEDULE | ASSOCIATIONS | LINKS | CONTACT US

I tried a table, but every time I change one cell another one changes too...

Then I put them in one cell and tried spacer.gifs, setting the width, which works on one page, but it seems hack and it isn't working on another page... maybe the style isn't working.

Thanks much!

Susan

[Snookerman]

Try not to use tables or spacer gifs, use a list instead:

<ul>
<li><a href="#">EVENTS SCHEDULE</a></li>
<li><a href="#">ASSOCIATIONS</a></li>
<li><a href="#">LINKS</a></li>
<li><a href="#">CONTACT US</a></li>
</ul>
Then, float the list items to the left, use margins to space them and remove the bullet points:

<style type="text/css">
li {
float: left;
margin: 0 10px;
list-style: none;
}
</style>

Good luck!

[susaninphoenix]

This worked perfectly, except I can't figure out how to get the underlines off the links.

I tried adding; text-decoration: none; to the style, but it did nothing.

Snookerman, are you able to advise again? Or anybody??

Susan

[Snookerman]

Have you tried:

li a {
text-decoration: none;
}
That should work fine.

Good luck!

[susaninphoenix]

That worked, but now I'm uncertain how to get the hoover color to change.

I so appreciate your help.

Thanks,
Susan

[Snookerman]

Simple:

li a:hover {
color: red;
}

Good luck!

[susaninphoenix]

Snookerman, you are awesome! I so appreciate your tutelage, that I think I will ask for more... but I understand if it's just not really that relevant... and not something to waste time on... I'll catch on eventually!

Answer only if it won't be a silly waste of time, because the basic problem is RESOLVED.

I'm still confused when trying to learn by following how others do this... so I have used and have working these variations on unrelated style sheets... which didn't seem right in this case and wondering when and why these other methods are used?

1. (no use of thaat magical letter "A")
.navbar {
TEXT-DECORATION: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 20px;
font-weight: bold;
color: #FFCCCC;
}
.navbar:link {
color: #FFCCCC;
}

.navbar:hover {
color: #FFFFFF;
}


2. (uses the magical letter, but has it before the style name, as opposed to how you put it - after)

.nonProductNav { color: #FFFFFF; font: 11px Georgia, "Times New Roman", Times, serif; TEXT-DECORATION: none;
}
a.nonProductNav:link {
color: #FFFFFF;
}

a.nonProductNav:hover {
color: #FFCCCC;
}

[Snookerman]

I'm glad to help you Susan! If I understand you correctly, you want to know the difference between .something and a.something.

.something will target all elements that have the class value something (e.g. <h1 class="something"></h1> or <a class="something"></a> etc.)

a.something will target only anchor tags (that's what the "magic letter" stands for) with the class value something (i.e. <a class="something"></a>)

There is also something else to think about when it comes to this and that is specificity. Basically a.something is more "important" than .something because it's more specific. To learn more about this, take a look at these articles:
http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/ (http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/)
http://htmldog.com/guides/cssadvanced/specificity/ (http://htmldog.com/guides/cssadvanced/specificity/)

Hope that helps, good luck!