hey

this is my first css layout, i just converted firethrottle's old table layout intoa new css one and with new graphics. What do you think? Please compare the table based layout and css layout:

Table based original Firethrottle
CSS version new

Please also note that the css version isnt finished

Thanks a lot

I would take a close look at the HTML and strip unnecessary <br />, <img> and <div> tags.

Use <ul> for your navigation, and right column links, and assign background images for the <li>.

You are going in the right direction, but need to fix those things.

Should we be using <nl> now?

<nl> = navigational lists. should be using it instead of <ul> for menu lists, nav bars, and so on?

I've never heard of it before... is it still in working draft or something?

You can also use definition lists for your navigation lists if you really wanted although a standard unordered list is fine.

Remember, use h# tags for headings. Things like <li class="title">, <span class="title">, or <p class="header"> are semantically incorrect as they should be an h# tag.

Line breaks should be used to break lines within paragraphs if needed, not to space things out. Margins should be used for that and padding to space things out within objects.

Rid yourself of image tags unless they are used as part of the content. The little image beside your forum content should be a list-style-image, not a background or image tag.

Divisions should be used to logically group sections of your website - not holders that can be styled. At the very worst, you should use a division to add the ability to further style something.

Clear the next element in the markup, don't add things like blank divisions and such unless absolutely needed.

With that, you should be moving in the right direction.

ul { list-style-image: url("image.ext"); }

it's whatever the file extension for your image is (gif, jpg, png)...

dude, it's sample code where he used "image.ext" as a placeholder for whatever image file you want to use!

url(/path/to/your/silly/image.gif)