|CSS newbie questions|
I'm just learning CSS and am trying to sort out a few layout issues I'm having. Right now I'm trying to layout a simple site that has a logo on top, a vertical navigation bar on the left side and some text in the middle. The way I'm set up right now is as follows: each section (logo,navbar, and text) is contained within separate <div> tags, and each has been given a corrosponding ID. I have a CCS file linked to the HTML document that positions each ID section using the position:absolute property. Is this the best way to layout a page using CSS? Also how should I layout elements within each section, for example I want to space my navigation buttons apart a certain distance. Is this what the position:inherit property is for?
The "inherit" value is new in CSS2. Its purpose is to override any other mechanisms that may be in effect and force a child element to inherit its parent's value. I don't know how well supported "inherit" is at present in general, CSS2 is not dependable in most browsers.
The CSS plan you've explained should work well. If your divs have widths, you should just be able to layout the nav buttons, for instance, the way you would in a table cell use breaks between the button imagess, or use transparent gifs to add padding all that good stuff. You can just let the layout flow in most cases, with no need to fix the positions of every element via CSS.
You can probably achieve the layout you're looking for with floats as well. The details depend a bit on how you want to control the widths of the columns.
As for elements within the divs, you usually don't have to do anything differently from what you'd do if the containing div wasn't absolutely positioned.
Do pay attention to what 3.x and earlier browsers will do when they try to display your page. For example, browsers that don't support CSS also usually don't support divs. If you break your nav bar into sections with a header for each, you can wrap each section in a paragraph element, place each line in a div element and bold the header. This causes NN 3.x, for example, to display each section has a horizontal list just under your page header, while CSS-compliant browsers will arrange them vertically (since div is a block element by default).
Be very, very careful with CSS-based layouts on NN4. My advice is generally to use tables for columns and CSS for everything else. NN4 and IE can both do some really weird things and it's hard to produce a columnar layout in CSS that doesn't run into the bugs in one or the other.
To save you a little time: NN4 crashes or misrenders (depending on the version) with tables inside positioned divs, and seems totally incapable of a positioned div. IE 5.x just starts ignoring style when you try to apply certain combinations.
>>NN4 crashes or misrenders (depending on the version) with tables inside positioned divs, and seems totally incapable of a positioned div.
Not true at all, i have used positioned DIV tags with tables inside on a few sites and they all display perfectly in NN4.X and all the other browsers cross platform.
>>IE 5.x just starts ignoring style when you try to apply certain combinations.
Really? IE5 seems the most favourable to layers.
>> i have used positioned DIV tags with tables inside on a few sites and they all display perfectly in NN4.X and all the other browsers cross platform
I have done the same, but it's definitley not a sure thing -- even 4.77 tends to forget ALL styles within a div if the div's content continues after a table is closed. For this reason, I design with my default font set to something squirrely, like a script or symbols. It's a good way to catch Netscape when it starts to get forgetful. If my default font is the same as the page's font, I don't see the rendering errors. The workarounds for this problem vary, but they usually involve multiple style declarations as little reminders to the forgetful browser.
Depending on the combinations, Netscape 4 can also show MAJOR errors when tables are inside positioned divs -- like refusing to render the other divs on the page, or not drawing the scrollbars. I've seen the strangest things; suometimes everything straightens out if I remove just one row from the table. It's as if there's a critical level of information, and at a certain point that browser just goes TILT !
Almost anything other than "straight" HTML in NN requires tinkering with :(
Layers are no different and as long as you dont got crazy like nesting 50 layers etc. you should'ne have TOO much of a problem ;)
the main tips when nesting layers is put the nested DIVs in the CSS - not body and set the cell dimensions to equal the table dimensions.
I have closable, minimise, maximise scrolling windows all of which work in NN in fact the only probs I've has is with Opera as it doenst fully support CSS2.
knighty: actually, the irony is that the crashing you reported on one of my sites a while back on NN4 was caused by tables inside divs :)
They seem to have fixed the crashing in later 4.x builds (in fact, I don't recall ever seeing a crash in 4.74 or higher), but it still misrenders in cases that used to crash. I suspect some state becomes invalid on complex pages and they worked around it by checking for validity and ignoring the style data if it's screwed. That sort of quick-fix workaround tends to appear a lot in software development when the real problem can't be identified and solved before a release deadline or when the developer doesn't want to devote significant resources to maintenance (which was the situation here).
I've only been using 4.74+ so maybe thats why i've not noticed a problem.
Too scared to use anything less - ignorance is bliss ;)