The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

dreamweaver MX, css vs insert layer

Considering CSS & insert a Layer seperately in Dreamweaver MX.

Generally why would anyone want to do this (insert a layer with a bg image) instead of just using another external style sheet with a large background image, inside a large table. This isn't to mention the possible problems avoided with Netscape seeing the layer! (seen enough on other forums)

Although at first I thought the creation of a layer would eliminate "stacking tables" on top of one another, but the insert > layer is meant to be converted to a table, right?

I realize that having tables on top of each other isn't exactly ideal, but what is the best solution?

Dreamweaver layers are just absolutely placed elements (divs) that are placed in inline styles and in my opinion are little better than tables.

They are ok for beginners but are totally inflexible and produce unsightly code. You should use external styles (either in an external stylesheet) or in the head if only a small style sheet is required.

You should learn CSS thoroughly and understand the correct way to place elements in a fluid and flexible way. Absolutely placed elements have their place in any page but should not be the main construct.

Elements should flow logically where possible and absolute elements placed only when needed and even then they can be placed relative (not relatively positioned) to a parent and not just the body as in DW.

I use DW quite a bit but I never use their insert layers and do not find a need to use it.

As for converting layers to tables, I think that should be resigned to the dustbin. (If you read the documentation I think DW mentions that this is to support older browsers but times have moved on and css support isn't too bad these days.) I think converting layers to tables is a feature for beginners (or those in a rush) and as you should know tables, these days should only be used for tabular data.

(While I'm not against tables and some layouts are easier with tables that doesn't mean every layout should be tables.)

So my advice would be to leave the layers alone and create your own and move up to DW2004 where CSS support is much better.

css .v layer

Hi Paul,
And thanks for the assist, it has helped.

Originally Posted by Paul O'B

You should use external styles (either in an external stylesheet) or in the head if only a small style sheet is required.

I am using external styles, but with a large continuous bg image that runs entirely left vertical/top horizontal (behind left sidebar/top nav buttons), I've found the best way to get the image on the page is to start the page with this, inside the largest table. Inserting the bg in the external sheet.

The thing is I'm ending up with this biggest table, then with a second table stacked on top of this for the left sidebar and top nav buttons, then a third table center for body content.

Any problems with spidering stacked tables, one on top the other like this -- this is probably my main concern.

Originally Posted by Paul O'B

I use DW quite a bit but I never use their insert layers and do not find a need

I've heard Netscape has their own way of viewing layers sometimes, of designers using javascipt to accomodate different versions of layers. I'd rather avoid this altogether. I've seen what Netscape can do to even hyperlinks sometimes.

Originally Posted by Paul O'B

So my advice would be to leave the layers alone and create your own and move up to DW2004 where CSS support is much better.

Any problems with spidering stacked tables, one on top the other like this -- this is probably my main concern.

Yes nested tables will slow your page down and are not the best thing for accessibility. Therefore I would advise against using tables and use css instead . However, I realise that this is easier said that done

If you have a link to your site (or some code) I could suggest alternative to tables. You could for instance put the large image in the background of the body using CSS and save yourself an element altogether.

I've heard Netscape has their own way of viewing layers sometimes, of designers using javascipt to accomodate different versions of layers. I'd rather avoid this altogether. I've seen what Netscape can do to even hyperlinks sometimes.

Strictly speaking there is no such thing as a layer. They are just elements that are created and put on the page. (Netscape 4 did have a proprietary layer tag but that's consigned to the dustbin). Most of the problems with Netscape are with Netscape 4 and the only concession I would make towards supporting that browser would be to import the stylesheets so NN4 can't see them. Netscape 4 does have a problem with absolutely positioned elements when the window is resized and DW automatically inserts a javascript fix for this. However most designers don't bother.

(I still find it hard to understand that people want to support a browser that has about a 1% share of the market by inserting javascript code that 10-12% of users have turned off or can't use )

I'm sorry, create you own what? CSS? I have to use DW 2003 for now.

Create your own elements in CSS. Basically create your own layers (if that's what you want to call them).

More importantly you can convert the elements from absolutely postioned elements into elements that can be in the flow and are not rigid and fixed as with the DW code. Obviously some knowledge of CSS positioning is required but it will be worth it in the end.

css/nested tables

Yes nested tables will slow your page down and are not the best thing for accessibility.

Not to refute what you say about slowing down, I was wondering how search engine spiders treat this for indexing. Do slower pages rank differently, I don't know. Though I do see some high ranking pages with nested tables, this of course could be outweighed by other factors in their favor.

You could for instance put the large image in the background of the body using CSS and save yourself an element altogether.

I've tried placing image in other tables but it seems this image (covering most of page dimension) requires an open table for it to display in full.

Are you saying insert it within the body tag?

Netscape 4 does have a problem with absolutely positioned elements when the window is resized and DW automatically inserts a javascript fix for this.

Seeing the Javascript in the head to reload (Netscape) for some reason makes me want to turn away. Too much extra code in my opinion.

Not to refute what you say about slowing down, I was wondering how search engine spiders treat this for indexing. Do slower pages rank differently, I don't know. Though I do see some high ranking pages with nested tables, this of course could be outweighed by other factors in their favor.

CSS layouts have been proved to obtain better rankings because the content is higher in the html and not buried in miles of table tags. A CSS design of a similar table design should fare better. (The speed of loading the page will have nothing to do with the ranking as far as I can see.)

Are you saying insert it within the body tag?

You can insert an image into the background of the body with CSS saving you having any code at all in the html.
e.g.

Seeing the Javascript in the head to reload (Netscape) for some reason makes me want to turn away. Too much extra code in my opinion

As I said I wouldn't support netscape 4 so I wouldn't use the javascript. I'd use the import rule that NN4 doesn't understand to import the stylesheet and hide all the styles. (A simple stylesheet could then be added just for Netscape if you wish.)

Originally Posted by Paul

Most of the problems with Netscape are with Netscape 4 and the only concession I would make towards supporting that browser would be to import the stylesheets so NN4 can't see them.

What would you call this .#Layer1 ? I'm not sure what the # is for, this an anchor? Is there really any reason to call it a layer or are you saying this to help identify it.

Sorry I assumed you knew about classes and ID's. The # defines the style as an ID (#layer1). If you define a class you use define it as .layer1.

The difference between a class and an ID is that an ID must be unique on the page e.g. there can only be one element that has an ID of #layer1. This is to uniquely identify the element. However most browsers will let you get away with using it more than once per element but it's not the correct usage.

If you need to re-use a style over and over again then you use a class (.layer1).

You can name it anything you want (#layer1 or #contentSection etc) I was just showing you how to turn the DW code from inline styles to external styles that could go in the head of the document or in an external stylesheet.

You could use the page as a template with a linked stylesheet if you want. Theres nothing different about it you're just using external styles.

The main point I was making originally was that DW creates inline absolutely positioned elements that are ok for certain things but generally will cause you more grief in the end because they are absolutely placed in relation to the body.

Try putting a DW layer on your page and then have it center for all resolutions. You can't do it because it is placed exactly at x,y and that's where it stays. As for converting the layers to tables you will end up with highly nested tables and hundreds of spacer gifs. If that's what you want then go ahead

I think you need to learn a bit more about CSS then once you get the hang of it you can make your own mind up. As for supporting Netscape4, I think you should think more about supporting browsers made in this century rather than the last century

This presents the background image on the page as intended (& so I can edit background images simultanesouly of course across many pages for an update) . But since the left side column of the image is fixed, the left sidebar has to be shortened for pages accomodating less content.
The "repeat" definition does repeat the entire image when I have tried.
I thought the "clip" could be used for this, evidently not.

Is there any way to adjust left side column height with the external css other than:

Sizing giff images, for those most common page heights, and adding css sheets for ea.

Splitting the image to a left-table component off the vertical in order to use the table height for adjusting the left column height of the image. Which would mean placing the css inside the table which I really don't want to do (besides; other css goes with this left part of image and I've gotten rid of a table, which is nice when's theres too many in the nest)

If your left side background image only needs to be as long as the left side content then the best way is to put a backround image in that element itself. In this way the background image will always be the same size as the content. (assuming of course its a repeating background image.)

You can still do this with css the same way that you put a background image in the body etc. Just set up a class and apply it to that element.

If your using tables as you mentioned then you would just set up a class for the column that you are interested in.

As for using tables all I can say is "Ditch Them" and move on to css

If you have a link to a live site it would be easier for me to see what you are trying to do and offer more constructive advice and offer real solutions rather than offer vague comments etc

Could you recommend an actual pro CSS manual?
(went out to look at Eric Meyers two manuals today as someone else in the forum recommended. Though helpful, I'd rather concentrate more on declarations, applying CSS on the page, overall mechanics, etc )

Last and final question; how to apply css to a table column?
(I find myself applying to every hyperlink individually). Don't want to span.

i have Eric Meyers book, have not read much of it yet, its a very hands on and practical book. I also own Designing With Web Standards by Jeffrey Zeldman, great insight into why you should use css among much more.