SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Wizard
    Join Date
    May 2002
    Posts
    1,370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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?

    Does the layer by itself have to be converted to a table?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    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.

    Hope that help.

    Paul

  3. #3
    SitePoint Wizard
    Join Date
    May 2002
    Posts
    1,370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    css .v layer

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

    Quote 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.

    Quote 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.

    Quote 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.
    I'm sorry, create you own what? CSS? I have to use DW 2003 for now.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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).

    This is the inline code that DW creates:
    Code:
    <div id="Layer1" style="position:absolute; left:82px; top:57px; width:149px; height:122px; z-index:1"></div>
    You can convert this from inline to external CSS.
    Code:
    #Layer1 {
     position:absolute; 
     left:82px; 
     top:57px; 
     width:149px; 
     height:122px; 
     z-index:1;
    }
    Now the html will simply look like this:
    Code:
    <div id="Layer1"></div>
    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.

    Hope that all makes sense.

    Paul

  5. #5
    SitePoint Wizard
    Join Date
    May 2002
    Posts
    1,370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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.

    Code:
    #Layer1 {
    position:absolute;
    left:82px;
    top:57px;
    width:149px;
    height:122px;
    z-index:1;
    }
    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.


    Code:
    <div id="Layer1"></div>
    Linking to this as you would an ordinary style sheet, with absolute positioning? We're basically treating this as a style sheet?

    Would all this work as a template?

    -In the interest of your helpful initiative,

    Obrigado Muito!


  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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.
    Code:
    body {
    margin:0;
    padding:0;
    background-image: url(img.gif);
    background-repeat: repeat-y;
    background-position: center center;
    }
    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.)

    Quote 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

    I hope that all makes sense.

    Paul

  7. #7
    SitePoint Wizard
    Join Date
    May 2002
    Posts
    1,370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Inline to external conversoin is nice, which allows the left column height to be adjusted.

    But I like the body CSS. Here's how I tried to clip the bottom to bring the image up (otherwise is working nicely from single CSS link, using without the "position" and "clip" style definitions).

    body {
    background-image: url(image.gif);
    background-repeat: no-repeat;
    background-position: left top;
    background-attachment: scroll;
    position: absolute;
    clip: rect(0px 0px 300px 0px);
    }

    Is there a better way to clip this or should I adjust
    seperate graphics for ea. different left column height beforehand? (content varies greatly on all pages, down to a few lines)

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I'm not quite sure what you are trying to do. Have you got a link so we could see exactly what you mean? Or some code and an explanation that might help me get the idea

    I don't think you can use clip in the way you have it above. I try and avoid using it anyway as there always seems to be better methods available.

    Paul

  9. #9
    SitePoint Wizard
    Join Date
    May 2002
    Posts
    1,370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Using a background graphic, (eliminating the extra table by linking to css)

    In, head:

    <link href="my.css" rel="stylesheet" type="text/css">

    Css def's for my.css (has the body only):

    body {
    background-image: url(image.gif);
    background-repeat: no-repeat;
    background-position: left top;
    background-attachment: scroll;
    }

    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:

    1. Sizing giff images, for those most common page heights, and adding css sheets for ea.
    2. 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)
    Any suggestions?


  10. #10
    SitePoint Wizard
    Join Date
    May 2002
    Posts
    1,370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry for the ommission.
    This is for a contiuous left horoizontal and top vertical background image.

  11. #11
    SitePoint Wizard
    Join Date
    May 2002
    Posts
    1,370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'll try AGAIN -- A continous left vertical and top horizontal background image. (couldn't edit last post, this is correct)

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    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

    Hope thats of some help.

    Paul

  13. #13
    SitePoint Wizard
    Join Date
    May 2002
    Posts
    1,370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    Thank you so much for your help.

    The manuals I have for Dreamweaver don't go much into CSS.

    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.

  14. #14
    SitePoint Wizard Dangermouse's Avatar
    Join Date
    Oct 2003
    Posts
    1,024
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    To answer your second question, just use the tag as the selector, eg

    tr { color: #FFF; }
    td { color: #000; }
    tr, td { color: #FFF; } /* Both tr and td will be white */

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Could you recommend an actual pro CSS manual?
    Cascading Style Sheets 2.0 Programmers reference by Eric Meyer. Its not a "how to" book but an organised list of all the properties and how they should work.

    Although it doen't tell you how to create anything I find it useful for reference on how something should work.

    Other than that, Sitepoints Designing without tables is fairly good and worth being in your collection.

    Paul


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •