Renegade — Thu, 12 Dec 2002 07:56:28 +0000

http://www.w3schools.com is a good place to start, that's where i learnt most of the CSS that i know now, the others parts i got form TWF or from misc oher places

Suzanne — Thu, 12 Dec 2002 01:30:53 +0000

That would work quicker, yes, and probably use less bandwidth, but...

<style type="text/css">
table#nav td {
	vertical-align : top;
	background-color : gray;
	width : 200px;
	text-align : center;
}
</style>
.........
<table id="nav">
    <tr>
        <td>link</td>
    </tr>
    <tr>
        <td>Link</td>
    </tr>
</table>

Would be faster still. And if you want to get away from using tables (and this is a prime example of a place that would work better as a list and look the same):

<style type="text/css">
ul#nav li {
    background-color : gray;
    width : 200px;
    text-align : center;
    margin-left: 0;
    padding-left: 0;
}

ul#nav { /* this removes the indent */
    margin-left: 0;
    padding-left: 0;
}    
</style>
.........
<ul id="nav">
    <li>link</li>
    <li>link</li>
</ul>

nike_guy_man — Thu, 12 Dec 2002 00:34:11 +0000

I'm consolidating some old HTML I am using now... it was created in some WYSIWYG program about 3 years ago... not the greatest HTML
It is a nav bar... and it is written like this:

<tr valign="top">
<td align="center" width="200" bgcolor="gray" >link</td>
</tr>
<tr valign="top">
<td align="center" width="200" bgcolor="gray">link</td>
</tr>

'
That is the basic code for quite a while for all of my nav... would it be better to use CSS and do it this way:

<style type="text/css">
TR.main {
	vertical-align : top;
}
TD.menu {
	background : gray;
	width : 200px;
	text-align : center;
}
</style>
.........
<tr class="main">
<td class="menu">link</td>
</tr>
<tr class="main">
<td class="menu">Link</td>
</tr>

'
Would that work quicker? Use less bandwidth? Make it more customizable (it is part of a PHP program)??

Suzanne — Wed, 11 Dec 2002 23:49:11 +0000

alistapart.com has excellent articles (some very cutting edge, but take the good parts and learn learn learn!)

css-discuss.org is the repository of a vibrant discussion list about CSS and has a lovely WIKI as well. Many questions have already been asked and answered. The wiki has a great number of resources on various CSS topics.

ericmeyeroncss.com is about the book, which from all reports is an excellent book.

As for DIV and SPAN -- DIV is a box that you put around discrete amounts of content on your page, such as a blog entry, or an article, or a navigation section. You can roughly compare them to table cells that you can move around out of the grid.

SPAN is an inline element, and as such isn't a box (necessarily), but something that sits on the same line as the text or an image, or whathaveyou.

There are no rules for DIV and SPAN outside of these distinctions, however good practice is to use as few as possible and it takes some thinking to change from a tables-based coding practice to a div-based coding practice.

There are a number of good threads here on the topic of CSS and some issues involved.

For table sites that you want to use CSS with, I'd recommend consolidating your font tags into a set of styles and then applying them (analysis first, then application). Then you can slowly remove HTML attributes and replace them with CSS declarations.

The fewer classes you use (contextual CSS means you can set an ID for your DIV or containing element and control all content within that), the less the content will have to be revised for future redesign or future feeding of the information into other formats.

hth!