Help a CSS newbie dive into convering a tabled site

[Mudley]

Greetings everyone, I'm a long time reader - first time contributor.

I'm relatively new to CSS, and I'd like to convert my site from tables to CSS.

I plan to do it part by part, starting with the left navigation.

<snip>
I converted the left hand nav to a list and have been working CSS to make it look like the tabled version.
I can get all of the white links to match perfectly, but i'm hung up on the blue seperators - i'd like to scrap the graphics and use text there as well.

Also, i'm confused on the different CSS methods
I've seen:
.something {}
<tag>.something{}
#another <tag> {}
#another <tag>.something {}

Is there specific rules on how these apply to ID/class?
How do i know when to use a div tag around something or a span tag? Or when to put ID or class into another tags attribute?

[edited by: SuzyUK at 10:07 pm (utc) on July 29, 2004]
[edit reason] ooops sorry no URLS see TOS #13 [webmasterworld.com] [/edit]

[Hester]

Divs are for block elements. That is, a block like a paragraph that causes a line-break. Use 'em to mark up sections of a page (eg: footer.)

Spans are for inline elements. That is, an inline section like a bit of text. Use 'em to mark up a small amount of text you might want a different colour or font size.

Also, i'm confused on the different CSS methods
I've seen:
.something {}
<tag>.something{}
#another <tag> {}
#another <tag>.something {}

Well let's see... the first line says "style a class called 'something'". (A dot refers to a class.)

The next line says only style the class if it is followed by the tag given. So 'p.something' styles '<p class="something">' but not '<span class="something">'. See?

The third line styles a tag if it's in a section defined by an ID. So '#footer b' would style any bold tags in a div with an id of "footer". (Eg: '<div id="footer">').

You should be able to work out what the last line does now.

Is there specific rules on how these apply to ID/class?

The golden rule is this: use an id for something that only ever appears once. Use a span for something that might appear more than once.

Example: a header, footer, side bar etc would use id. But bits of text in green that might appear anywhere should use a class. You can use classes as often as you like.

[Mudley]

Thats beautiful Hester, thank you!
That cleared up a lot of confusion.

So what would be the best method to convert the left nav of my site to CSS?

I have them set up in a unordered list and have the font styles and colors matched up, but i can't figure out how to handle the blue text seperators.

Here's my current work:
<style type="text/css"> .leftnavin {
border: 0px solid #000;
margin: 0em;
width: 10em;
padding: 0px 0px 0px 0px;
background-color : #003366;
font : bolder;
font-family: "Trebuchet MS", serif;
color : White;
font-size: 10pt;
text-decoration : none;
}
.leftnavout {
border: 0px solid #000;
margin: 0em 0px;
width: 7.66em;
padding: 0px 0px 0px 0px;
background-color : #003366;
font : bolder;
font-family: "Trebuchet MS", serif;
color : #99CCFF;
font-size: 13pt;
list-style-type : none;
text-decoration : underline;
}
li.leftnavin {text-decoration : none;}
</style>

<ul class="leftnavout">
<li class="leftnavout">EZAccess

<div id="leftnavin">
<ul class="leftnavin">
<li>&nbsp;Contact Us</li>
<li>Subscriptions</li>
<li>Place an Ad</li>
<li>About Us</li>
<li class="seperator">News</li>
<li>Home Page</li>
<li>Local News</li>
<li>Sports</li>
<li>Business</li>
<li>Opinion</li>
<li>Nation/World</li>
<li>Entertainment</li>
<li>Community Calendar</li>
<li>Obituaries</li>
<li>Photo Galleries</li>
</ul>
</div>
</ul>

[createErrorMsg]

If by 'blue text seperators' you mean solid blue lines that divide your nav into sections (I peeked at your url, which will probably be snipped out shortly), I would suggest some changes to your unordered list.

Instead of making it ONE <ul>, make each section a <ul>, like so...

<ul class="seperator"> EZ Access
<li>Contact Us</li>
<li>Subscriptions</li>
<li>Place an Ad</li>
<li>About Us</li>
</ul>
<ul class="seperator"> News
<li>Home Page</li>
<li>Local News</li>
<li>Sports</li>
<li>Business</li>
<li>Opinion</li>
<li>Nation/World</li>
<li>Entertainment</li>
<li>Community Calendar</li>
<li>Obituaries</li>
<li>Photo Galleries</li>
</ul>
<ul class="seperator">Market Place
<li> ETC...

Then, style the class 'seperator' to have either...

(a) a border-bottom: 2px solid blue; /*use the hex code instead of the word*/

or (b)a background-image: url(YOURIMAGE.gif) no-repeat;

where YOURIMAGE.gif is a picture of that blue line. Either would do. You can also add...
color: blue /*again, use the hex dec code for your specific shade of blue*/
font-weight: bold;

to make the text bold and blue for those section headers.