Topic: CSS Check!

Hi, I am new to the CSS development arena (losing them tables... / where appropriate) and would like you to take a look at a template I have setup using CSS. I am interested in your critique on overall use of CSS (including organization of CSS elements), as well if you could point out any shortcomings which I may be approaching.

There are 2 problems I see right away:
1) main_content padding is 15px; however doesn't pad well next to the left_nav "float"
2) when the main_content fills beyond the left_nav, what will keep it from wrapping below and around the left_nav -- what will allow the left nav to *strectch* (much like a table element might)

[EDIT]
It would help if I included a link ; ) http://allaboutfaces.lfchosting.com

Thats it, thanks!
Karl

[This message has been edited by Karl (edited 03-30-2004).]

Uggg... I guess there were no issues with my CSS

Unfortunately there is a couple of issues with the css...

First of all you must specify units when you're using numbers, if you don't the browser has no way of knowing what you're talking about. Only when setting something to 0 is it acceptable to skip the unit, since 0em is the same as 0px etc.

You don't need to specify display: block when using a div, the default is block for divs in all browsers. Nothing wrong with stating it though...

I think you need to change the \ in the url to /, at least no images are showing for me.

The border of the "main_content" should be: border: 1px solid black, you've switches places between 1px and solid.

The div names shouldn't say anything about where on the page the elements are or how they look, all the div names should convey is the elements function. You've managed this pretty good, but #left_nav should be changed to something like #sub_nav instead. Reason for this is that you might want to create another stylesheet for the page and on that stylesheet you might have the #left_nav on the right hand side. Since the div is called #left_nav that would look strange, but if it was called #sub_nav it wouldn't look strange since that name only conveys the function of the div and not what it looks like.

And on to your questions:
1. Padding has nothing to do with the surrounding elements, it only affects child elements. To specify how much space should be left between to elements you should use margin instead.

2. Since you have a specified width of the left_nav you can change the styles to this:

#left_nav {

    float: left;

    width: 149px;

    ....

}



#main_content{

    margin-left: 160px;

    ...

}

That will keep a 160px space free to the left of the #main_content, but since the #left_nav is floated to the left it will "float up" and will that space.


I think this post would have fitted better in the CSS forum, since it isn't a site review.

_________________________
"There are 10 kinds of people; those who know binary, those who don't and those who start counting at zero"
- the Golden Ratio -

Once again, V to the rescue.

Just a few "meta" points...

1) I think V is right and this belongs in the CSS forum

2) I have found that the easier you make it to reply to something, the more people reply. I'll 'fess up: I did see this thread the other day, and I clicked through to the site. Then I had to go into the source, find where your css file was, then type that into the address bar. For me, it defaults to Notepad, and your css came out in one big, long line (because Notepad can't read the formatting). I said to myself, "Ah, I'll take a look at this later."

Note that you did not do anything wrong per se, but you did not make it easy for people to answer the question. I would have posted this in the CSS forum and posted the contents of the CSS file directly into the thread to make it easier for everyone.

I'm not criticizing you here, I just want you to be able to get quicker answers to your questions next time. Hope this helps.


___________________________
Suho: www.liminality.org

Suh: I appreciate the advice and tips on posting! I could have provided a link straight to the CSS as well.
Thanks again, I will consider this for future.
Karl