29 Replies Latest reply on Sep 3, 2008 4:15 AM by Newsgroup_User

    CSS LAYOUTS = ????:S????

    cripaustin Level 1
      Hi. I'm a newbie when it comes to CSS layouts. I know my CSS styles to an extent..but I have only just been reading about layouts. When reading DW Help, they suggested that I use one of their own CSS layouts as it can be hard to get a successful, good looking, cross-browser CSS Layout of your own design.
      Trusting this tip, I went ahead and chose a DW CSS layout. This was my first real go with div tags and it made me think.

      Every one says CSS layouts are much better than tables...
      If so. Why is it that CSS layouts are so much harder to work..and can often lead to messy pages in other browsers?

      When using CSS layouts, i found that what i saw in Design view was nothing like what i saw in IE on preview.

      Am I right in saying that if you use tables, and you want to have a white central colum as your page, you just centre the table and its no problem. With CSS layouts, is there even a way to have a central column, or will it just change its horizontal position as soon as someone comes along with a different browser or different screen resolution?

      Is there an easy way to put backgrounds to a layer?

      From what DW Help says...it implies that anything I do (like drawing in my own Div tags) will result in some sort of screw up in cross-browser viewing and different screen resolutions.

      I have read people saying not to use tables but to use CSS layouts. Im trying to believe this but so far the journey hasnt been fun.

      Can anybody give me a simple "down low" of what Im doing wrong...or what i'm missing.?
      Thanks
        • 1. Re: CSS LAYOUTS = ????:S????
          Level 7
          > Every one says CSS layouts are much better than tables...
          > If so. Why is it that CSS layouts are so much harder to work..and can
          > often
          > lead to messy pages in other browsers?

          Much harder to work with? I don't think that's the case, but they are
          *different* to work with for sure. In fact, in the long run, they are MUCH
          MUCH easier to work with.

          Why do they lead to messy pages in other browsers? They do that when the
          person who built the page forgot to do something important, oir overlooked a
          known excentricity of a particular browser.

          > When using CSS layouts, i found that what i saw in Design view was nothing
          > like what i saw in IE on preview.

          That's why it is so important to preview your pages. Which DW are you
          using?

          > Am I right in saying that if you use tables, and you want to have a white
          > central colum as your page, you just centre the table and its no problem.
          > With
          > CSS layouts, is there even a way to have a central column, or will it just
          > change its horizontal position as soon as someone comes along with a
          > different
          > browser or different screen resolution?

          This is not a screen resolution problem, but to answer your question, yes,
          certainly it's possible to have a white central column as your page that is
          centered in the browser. Just go to my site to see this -

          http://www.great-web-sights.com

          and this site is no paragon of best practice usages, being quite long in the
          tooth. Nevertheless, there are no tables there. If you really want to see
          some sites that are stunning, go to http://www.csszengarden.com. No tables
          there, either. And the most amazing thing is - all of those pages use
          EXACTLY the same HTML.

          > Is there an easy way to put backgrounds to a layer?

          Uhh - well, sure. Why would this be hard anyhow?

          > Can anybody give me a simple "down low" of what Im doing wrong...or what
          > i'm
          > missing.?

          http://apptools.com/examples/pagelayout101.php

          --
          Murray --- ICQ 71997575
          Adobe Community Expert
          (If you *MUST* email me, don't LAUGH when you do so!)
          ==================
          http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
          http://www.dwfaq.com - DW FAQs, Tutorials & Resources
          ==================


          "cripaustin" <webforumsuser@macromedia.com> wrote in message
          news:g99909$5pn$1@forums.macromedia.com...
          > Hi. I'm a newbie when it comes to CSS layouts. I know my CSS styles to an
          > extent..but I have only just been reading about layouts. When reading DW
          > Help,
          > they suggested that I use one of their own CSS layouts as it can be hard
          > to get
          > a successful, good looking, cross-browser CSS Layout of your own design.
          > Trusting this tip, I went ahead and chose a DW CSS layout. This was my
          > first
          > real go with div tags and it made me think.
          >
          > Every one says CSS layouts are much better than tables...
          > If so. Why is it that CSS layouts are so much harder to work..and can
          > often
          > lead to messy pages in other browsers?
          >
          > When using CSS layouts, i found that what i saw in Design view was nothing
          > like what i saw in IE on preview.
          >
          > Am I right in saying that if you use tables, and you want to have a white
          > central colum as your page, you just centre the table and its no problem.
          > With
          > CSS layouts, is there even a way to have a central column, or will it just
          > change its horizontal position as soon as someone comes along with a
          > different
          > browser or different screen resolution?
          >
          > Is there an easy way to put backgrounds to a layer?
          >
          > From what DW Help says...it implies that anything I do (like drawing in my
          > own
          > Div tags) will result in some sort of screw up in cross-browser viewing
          > and
          > different screen resolutions.
          >
          > I have read people saying not to use tables but to use CSS layouts. Im
          > trying
          > to believe this but so far the journey hasnt been fun.
          >
          > Can anybody give me a simple "down low" of what Im doing wrong...or what
          > i'm
          > missing.?
          > Thanks
          >

          • 2. Re: CSS LAYOUTS = ????:S????
            Level 7
            My guess is that you're using a less than optimal CSS template for your
            first CSS-P (positioned) project. Remember that DW design view isn't perfect
            wysiwyg. If you find your page is broken when you preview it in browser,
            check for code validation errors. A missing, misplaced or duplicated </div>
            tag can make a page useless. This is why valid code is so important.

            Have a look at this 2 column, fixed-width, layout. Look at the source code
            to see how it was done.
            http://alt-web.com/2-column-fixed-width-template.html

            --Nancy O.
            Alt-Web Design & Publishing
            www.alt-web.com


            "cripaustin" <webforumsuser@macromedia.com> wrote in message
            news:g99909$5pn$1@forums.macromedia.com...
            > Hi. I'm a newbie when it comes to CSS layouts. I know my CSS styles to an
            > extent..but I have only just been reading about layouts. When reading DW
            Help,
            > they suggested that I use one of their own CSS layouts as it can be hard
            to get
            > a successful, good looking, cross-browser CSS Layout of your own design.
            > Trusting this tip, I went ahead and chose a DW CSS layout. This was my
            first
            > real go with div tags and it made me think.
            >
            > Every one says CSS layouts are much better than tables...
            > If so. Why is it that CSS layouts are so much harder to work..and can
            often
            > lead to messy pages in other browsers?
            >
            > When using CSS layouts, i found that what i saw in Design view was
            nothing
            > like what i saw in IE on preview.
            >
            > Am I right in saying that if you use tables, and you want to have a white
            > central colum as your page, you just centre the table and its no problem.
            With
            > CSS layouts, is there even a way to have a central column, or will it just
            > change its horizontal position as soon as someone comes along with a
            different
            > browser or different screen resolution?
            >
            > Is there an easy way to put backgrounds to a layer?
            >
            > From what DW Help says...it implies that anything I do (like drawing in
            my own
            > Div tags) will result in some sort of screw up in cross-browser viewing
            and
            > different screen resolutions.
            >
            > I have read people saying not to use tables but to use CSS layouts. Im
            trying
            > to believe this but so far the journey hasnt been fun.
            >
            > Can anybody give me a simple "down low" of what Im doing wrong...or what
            i'm
            > missing.?
            > Thanks
            >


            • 3. Re: CSS LAYOUTS = ????:S????
              cripaustin Level 1
              Firstly. Thank You. Zen Garden..Wow. It has inspired me. One day I will build pages as good as that.
              I guess I need to slow down and read more...I dived in CSS layouts expecting it very easy from the start. From what I see now, I assume its one of those things that the more you learn, the better you get at it and the easier it becomes.

              To answer which DW i am using. That would be CS3.

              So is it common to use a combination of both tables and CSS layouts..or do people just use one of the other...?

              I want to build my first CSS layout. For a simple page...is there anything wrong with just going on and drawing in AP Div tags to get a side column, body space, footer, horizontal menu and banner space (for example) and then perfecting the measurements...
              Is that a get started straight away approach...or is it completely wrong?

              Thanks.
              • 4. Re: CSS LAYOUTS = ????:S????
                Level 7
                > completely wrong?

                You might have guessed it. Yeah - that's completely wrong.

                As posted before, read this -

                http://apptools.com/examples/pagelayout101.php


                --
                Murray --- ICQ 71997575
                Adobe Community Expert
                (If you *MUST* email me, don't LAUGH when you do so!)
                ==================
                http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                ==================


                "cripaustin" <webforumsuser@macromedia.com> wrote in message
                news:g99ebf$bg2$1@forums.macromedia.com...
                > Firstly. Thank You. Zen Garden..Wow. It has inspired me. One day I will
                > build
                > pages as good as that.
                > I guess I need to slow down and read more...I dived in CSS layouts
                > expecting
                > it very easy from the start. From what I see now, I assume its one of
                > those
                > things that the more you learn, the better you get at it and the easier it
                > becomes.
                >
                > To answer which DW i am using. That would be CS3.
                >
                > So is it common to use a combination of both tables and CSS layouts..or do
                > people just use one of the other...?
                >
                > I want to build my first CSS layout. For a simple page...is there anything
                > wrong with just going on and drawing in AP Div tags to get a side column,
                > body
                > space, footer, horizontal menu and banner space (for example) and then
                > perfecting the measurements...
                > Is that a get started straight away approach...or is it completely wrong?
                >
                > Thanks.
                >

                • 5. Re: CSS LAYOUTS = ????:S????
                  cripaustin Level 1
                  thank you. The author is very clear and I am learning so much more than DW help.
                  • 6. Re: CSS LAYOUTS = ????:S????
                    cripaustin Level 1
                    So. Dont layout using tables. And don't layout using Absolute Positioning....I layout using distance from margins...(or the centering effect)...

                    Soooo ...why in DW CS3 have they even bothered with AP tags. And why do they mislead and lure you into thinking that they are so useful?
                    • 7. Re: CSS LAYOUTS = ????:S????
                      Level 7
                      *They* don't mislead you into thinking anything.

                      Absolute positioning is useful, as are all HTML tags and CSS styles. But
                      they have a proper usage, and as a primary layout tool, they do not pass the
                      test. Where in DW do you see anything that would lead you to believe
                      differently?

                      > I layout using distance from margins...(or the centering effect)...

                      Or floats. The first and last are the MOST useful effects in page layout.
                      To understand why, you have to first understand the difference between block
                      and inline tags, and then you have to understand what the normal flow of the
                      page is. Then you will have it all.

                      --
                      Murray --- ICQ 71997575
                      Adobe Community Expert
                      (If you *MUST* email me, don't LAUGH when you do so!)
                      ==================
                      http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                      http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                      ==================


                      "cripaustin" <webforumsuser@macromedia.com> wrote in message
                      news:g99vq1$t7l$1@forums.macromedia.com...
                      > So. Dont layout using tables. And don't layout using Absolute
                      > Positioning....I
                      > layout using distance from margins...(or the centering effect)...
                      >
                      > Soooo ...why in DW CS3 have they even bothered with AP tags. And why do
                      > they
                      > mislead and lure you into thinking that they are so useful?
                      >

                      • 8. Re: CSS LAYOUTS = ????:S????
                        cripaustin Level 1
                        Also. Can somebody please confirm/correct this approach to creating my first CSS layout:

                        Insert Div tag
                        Give it an ID.
                        Create a class in my style sheet which says how this Div tag should be positioned.
                        Assign that particular class to the Div tag.
                        And there we have it. A "layer" positioned from the margins (not AP)

                        ????
                        • 9. Re: CSS LAYOUTS = ????:S????
                          Level 7
                          > Create a class in my style sheet which says how this Div tag should be
                          > positioned.

                          Actually you would create a rule for this using an ID selector. This rule
                          would then automatically be applied to that div.

                          > Assign that particular class to the Div tag.

                          This is what you would avoid by using an ID selector.

                          > And there we have it. A "layer" positioned from the margins (not AP)

                          It's not a layer UNLESS it's absolutely positioned.

                          <html>
                          <head>
                          <title>No layers here</title>
                          <style type="text/css">
                          #wrapper { width:760px; margin:0 auto; background-color:green;color:white; }
                          </style>
                          </head>
                          <body>
                          <div id="wrapper">This text will be placed on a green background within
                          a 760px wide container that centers on the page</div>
                          </body>
                          </html>


                          --
                          Murray --- ICQ 71997575
                          Adobe Community Expert
                          (If you *MUST* email me, don't LAUGH when you do so!)
                          ==================
                          http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                          http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                          ==================


                          "cripaustin" <webforumsuser@macromedia.com> wrote in message
                          news:g9a0ed$ic$1@forums.macromedia.com...
                          > Also. Can somebody please confirm/correct this approach to creating my
                          > first
                          > CSS layout:
                          >
                          > Insert Div tag
                          > Give it an ID.
                          > Create a class in my style sheet which says how this Div tag should be
                          > positioned.
                          > Assign that particular class to the Div tag.
                          > And there we have it. A "layer" positioned from the margins (not AP)
                          >
                          > ????
                          >

                          • 10. Re: CSS LAYOUTS = ????:S????
                            Ruby7829 Level 1
                            I completely understand where you are coming from. I too was ready to cry the other day just thinking about CSS. My advice (and advice I got from others on this forum) is to use tables in the beginning for your layout and then use CSS to style the tables. I found this very useful because it allowed me to layout my page, without feeling like I needed to know everything about CSS, yet I could use my beginner knowledge of CSS to style the table cells. As much as people (the hard-core users) say to not use tables I find it a great resource if you are just starting out like I am. I tried to learn CSS and build a site relying on it entirely and I was ready to quit. Tables are not taboo - especially if you are building a smaller site and nothing too complex.

                            Good luck. This forum really helped me so keep on posting!
                            • 11. Re: CSS LAYOUTS = ????:S????
                              Level 7
                              Let me say this very clearly. NOBODY HERE SAYS "DON'T USE TABLES". Most
                              often, the advice you get here about tables is DON'T USE LAYOUT MODE. But
                              that's not DON'T USE TABLES.

                              Also, you will hear that there is a benefit in learning how to migrate from
                              tables to table-less, and this is definitely true.

                              Do what you are comfortable with, but always keep stretching your
                              understanding and your ability.

                              --
                              Murray --- ICQ 71997575
                              Adobe Community Expert
                              (If you *MUST* email me, don't LAUGH when you do so!)
                              ==================
                              http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                              http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                              ==================


                              "Ruby7829" <webforumsuser@macromedia.com> wrote in message
                              news:g9a45p$490$1@forums.macromedia.com...
                              >I completely understand where you are coming from. I too was ready to cry
                              >the
                              > other day just thinking about CSS. My advice (and advice I got from
                              > others on
                              > this forum) is to use tables in the beginning for your layout and then use
                              > CSS
                              > to style the tables. I found this very useful because it allowed me to
                              > layout
                              > my page, without feeling like I needed to know everything about CSS, yet I
                              > could use my beginner knowledge of CSS to style the table cells. As much
                              > as
                              > people (the hard-core users) say to not use tables I find it a great
                              > resource
                              > if you are just starting out like I am. I tried to learn CSS and build a
                              > site
                              > relying on it entirely and I was ready to quit. Tables are not taboo -
                              > especially if you are building a smaller site and nothing too complex.
                              >
                              > Good luck. This forum really helped me so keep on posting!
                              >

                              • 12. Re: CSS LAYOUTS = ????:S????
                                cripaustin Level 1
                                Firstly. Thank you for your replies.

                                Ruby, I am very familiar with tables and have built sites using them. I have seen the problems with getting desired results and that is the reasons I would like to migrate over to using CSS layouts as I personally believe it will be a whole lot easier and CSS layouts are, should I say, "recommended". But I see where everyone is coming from...Neither tables nor CSS are wrong nor right...used for different purposes and used well or not well. I'm sure a well accomplished table user can create a much neater site than perhaps a CSS user.

                                The answer is: for me, forget tables. I'v learnt alot over the last couple days and I'm almost ready to do my first CSS layout. The only thing I don't understand is about the ID/CSS styles thing that Murray answered. So do I go about making an ID selector for each DIV? If so, does the ID selector thing go in the style sheet or just on the html page (if you see what I'm getting at)?

                                So I practiced yesterday and my code from the CSS sheet which I applied to a DIV (even as I write this I realise how wrong I was with creating styles) goes like this:

                                .test1 {border: 1px solid;
                                width: 190px;
                                border-color: red;
                                margin-left: auto;
                                margin-right:auto;
                                margin-top: 100px;
                                padding: 5px;

                                If I want to make this into an ID selector..how do I go about this? Thanks
                                • 13. Re: CSS LAYOUTS = ????:S????
                                  cripaustin Level 1
                                  wait. so. As a guess.

                                  Putting #_____ keeps it as an ID you assign to DIVs when you create them and don't annoyingly show up in your styles?

                                  Putting .______ keeps it as a style which is meant for text, etc but not for DIVs other wise you will end up with a whole lot of pointless styles which get in your way when formatting text.

                                  If this is true...any other reasons? Thanks
                                  • 14. Re: CSS LAYOUTS = ????:S????
                                    Level 7
                                    There is a 'Specificity' consideration in CSS that you have not yet grasped.

                                    It is not unusual for any given page element to find itself influenced by
                                    multiple CSS rules, e.g.,

                                    #bar { color:blue; }
                                    .foo { color:green; }
                                    p { color:red; }
                                    ...
                                    <p id="bar" class="foo">What color am I?</p>

                                    So, how do you decide what color that text will be? One way is based on the
                                    cascade of the rules, which says that when there is a conflict between
                                    multiple rules, the one closest to the element being styled wins. That's
                                    why using inline styles is not a good general practice -

                                    <p style="color:fucsia;">

                                    since nothing you do in your stylesheet will trump this ugly color.

                                    In addition to the cascade, there is also the Rule of Greater Specificity.
                                    That overriding rule requires that if there are two conflicting styles, the
                                    one that is specified by a selector with a greater specificity will carry a
                                    higher weight than the other one. This is interesting. What does
                                    specificity mean?

                                    Let's look at selectors - there are three basic kinds of selectors: type,
                                    class, and ID.

                                    A type selector is just a specific tag, e.g., p, h1, img, a, table, etc.
                                    These selectors are used like this -
                                    p { color:red; }
                                    This 'type' selector will apply to ALL elements on the page of that type.
                                    All of them. It has NO specificity, really.

                                    A class selector is a custom name, made up by you, that must be applied to
                                    the desired tag, e.g., .ignoreMe, .getOuttaHere, etc. Such selectors are
                                    used like this -
                                    .imDownWithThatDawg { color:green; }
                                    and they will (or can) affect any tags on the page, e.g., <p
                                    class="imDownWithThatDawg">Word</p>. In other words, this kind of selector
                                    is a bit more specific than a type selector since it only applies to the
                                    tags that you have explicitly chosen.

                                    An ID selector is also a custom name, made up by you, that is given to a
                                    particular tag, and only ONE particular tag on the page, e.g., #wrapper,
                                    #sideBar, #footer, etc. Such selectors are used like this -
                                    #wrapper { width:760px; }
                                    and they will affect a SINGLE tag on the page, e.g., <div id="wrapper">. In
                                    other words, the ID selector is the MOST SPECIFIC of them all, since it can
                                    only apply to a single page element.

                                    Thus, in the first example, the text in the paragraph will be blue, since
                                    even though "foo" is closer to the text, it doesn't have the specificity
                                    oomph to outweigh the influence of "bar". In DW, selecting an element on
                                    the page, and looking at the CASCADE display in the CSS panel, you can see
                                    all of the rules that cascade into that element, AND the specificity of each
                                    rule (in the tooltip when you hover over the rule name).

                                    Now - that was longwinded, but important, because it raises another subtle
                                    concept. In 7 months, when you come back to this (fictitious) page, and you
                                    see a selector called ".imDownWithThatDawg", or more likely, ".largeText",
                                    how will you know where that rule is applied on the page? It's a very good
                                    idea to name your selectors so that they immediately convey a sense of how
                                    they might be used. This is why you often see selectors such as "wrapper",
                                    "sidebar", "topNav", "topNav .topLevel", etc., so that your maintenance task
                                    is simplified.

                                    There is no rule that says you cannot apply a custom class to a div, or any
                                    other tag on the page, though.

                                    Make sense? Does that answer your questions?

                                    --
                                    Murray --- ICQ 71997575
                                    Adobe Community Expert
                                    (If you *MUST* email me, don't LAUGH when you do so!)
                                    ==================
                                    http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                                    http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                                    ==================


                                    "cripaustin" <webforumsuser@macromedia.com> wrote in message
                                    news:g9b8ml$bpl$1@forums.macromedia.com...
                                    > wait. so. As a guess.
                                    >
                                    > Putting #_____ keeps it as an ID you assign to DIVs when you create them
                                    > and
                                    > don't annoyingly show up in your styles?
                                    >
                                    > Putting .______ keeps it as a style which is meant for text, etc but not
                                    > for
                                    > DIVs other wise you will end up with a whole lot of pointless styles which
                                    > get
                                    > in your way when formatting text.
                                    >
                                    > If this is true...any other reasons? Thanks
                                    >

                                    • 15. Re: CSS LAYOUTS = ????:S????
                                      cripaustin Level 1
                                      lol. Yes. Thank You for that explanation. I am grateful.
                                      So do you think I am ready to make my first CSS layout...anything else I should know?

                                      If you havn't already responded by the time i finish this reply, do you think you could help me in my "A Quick Question" topic. Thanks
                                      • 16. Re: CSS LAYOUTS = ????:S????
                                        Level 7
                                        > So do you think I am ready to make my first CSS layout...

                                        Everyone is ready to make their first CSS layout!

                                        > anything else I should know?

                                        Quite a bit, as there is for all of us, but go for it. You'll learn so much
                                        more from trying and failing the first few times than from me telling you
                                        what to do.

                                        --
                                        Murray --- ICQ 71997575
                                        Adobe Community Expert
                                        (If you *MUST* email me, don't LAUGH when you do so!)
                                        ==================
                                        http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                                        http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                                        ==================


                                        "cripaustin" <webforumsuser@macromedia.com> wrote in message
                                        news:g9bjsi$mhh$1@forums.macromedia.com...
                                        > lol. Yes. Thank You for that explanation. I am grateful.
                                        > So do you think I am ready to make my first CSS layout...anything else I
                                        > should know?
                                        >
                                        > If you havn't already responded by the time i finish this reply, do you
                                        > think
                                        > you could help me in my "A Quick Question" topic. Thanks
                                        >

                                        • 17. Re: CSS LAYOUTS = ????:S????
                                          Level 7
                                          .oO(cripaustin)

                                          >wait. so. As a guess.
                                          >
                                          > Putting #_____ keeps it as an ID you assign to DIVs when you create them and
                                          >don't annoyingly show up in your styles?
                                          >
                                          > Putting .______ keeps it as a style which is meant for text, etc but not for
                                          >DIVs other wise you will end up with a whole lot of pointless styles which get
                                          >in your way when formatting text.
                                          >
                                          > If this is true...

                                          Not exactly. Whether to use IDs or classes (or both) depends on the
                                          purpose of the element and what kind of functionality you need. An ID
                                          for example can also be used as a named anchor and easily be accessed
                                          with JavaScript, because it's unique. A class OTOH can be applied to
                                          multiple elements on the same page and even multiple classes can be
                                          applied at the same time.

                                          It also has absolutely nothing to do with divs. A div is just another
                                          HTML element, it's nothing special. You can apply IDs and classes to
                                          almost all and everything if necessary.

                                          You could search through this group's archive to find many threads which
                                          will explain the differences between IDs and classes in more detail.

                                          Micha
                                          • 18. Re: CSS LAYOUTS = ????:S????
                                            Level 7
                                            "Murray *ACE*" <forums@HAHAgreat-web-sights.com> wrote in message
                                            news:g9bfog$ii0$1@forums.macromedia.com...
                                            > There is a 'Specificity' consideration in CSS that you have not yet
                                            > grasped.
                                            >
                                            > It is not unusual for any given page element to find itself influenced by
                                            > multiple CSS rules, e.g.,
                                            >
                                            > #bar { color:blue; }
                                            > .foo { color:green; }
                                            > p { color:red; }
                                            > ...
                                            > <p id="bar" class="foo">What color am I?</p>
                                            >
                                            > So, how do you decide what color that text will be? One way is based on
                                            > the cascade of the rules, which says that when there is a conflict between
                                            > multiple rules, the one closest to the element being styled wins. That's
                                            > why using inline styles is not a good general practice -
                                            >
                                            > <p style="color:fucsia;">
                                            >
                                            > since nothing you do in your stylesheet will trump this ugly color.
                                            >
                                            > In addition to the cascade, there is also the Rule of Greater Specificity.

                                            Hi Murray,

                                            I don't think it is an "addition", specificity *is* part of the cascade.


                                            --
                                            Thierry
                                            Articles and Tutorials: http://www.TJKDesign.com/go/?0
                                            --
                                            http://developer.yahoo.com/ helps you build applications and mashups

                                            • 19. Re: CSS LAYOUTS = ????:S????
                                              Level 7
                                              Maybe I should have said that Specificity is the cascade. Is there really
                                              more?

                                              --
                                              Murray --- ICQ 71997575
                                              Adobe Community Expert
                                              (If you *MUST* email me, don't LAUGH when you do so!)
                                              ==================
                                              http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                                              http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                                              ==================


                                              "Thierry" <thierry@invalid.com> wrote in message
                                              news:g9bu7b$3aa$1@forums.macromedia.com...
                                              > "Murray *ACE*" <forums@HAHAgreat-web-sights.com> wrote in message
                                              > news:g9bfog$ii0$1@forums.macromedia.com...
                                              >> There is a 'Specificity' consideration in CSS that you have not yet
                                              >> grasped.
                                              >>
                                              >> It is not unusual for any given page element to find itself influenced by
                                              >> multiple CSS rules, e.g.,
                                              >>
                                              >> #bar { color:blue; }
                                              >> .foo { color:green; }
                                              >> p { color:red; }
                                              >> ...
                                              >> <p id="bar" class="foo">What color am I?</p>
                                              >>
                                              >> So, how do you decide what color that text will be? One way is based on
                                              >> the cascade of the rules, which says that when there is a conflict
                                              >> between multiple rules, the one closest to the element being styled wins.
                                              >> That's why using inline styles is not a good general practice -
                                              >>
                                              >> <p style="color:fucsia;">
                                              >>
                                              >> since nothing you do in your stylesheet will trump this ugly color.
                                              >>
                                              >> In addition to the cascade, there is also the Rule of Greater
                                              >> Specificity.
                                              >
                                              > Hi Murray,
                                              >
                                              > I don't think it is an "addition", specificity *is* part of the cascade.
                                              >
                                              >
                                              > --
                                              > Thierry
                                              > Articles and Tutorials: http://www.TJKDesign.com/go/?0
                                              > --
                                              > http://developer.yahoo.com/ helps you build applications and mashups

                                              • 20. Re: CSS LAYOUTS = ????:S????
                                                Level 7
                                                "Murray *ACE*" <forums@HAHAgreat-web-sights.com> wrote in message
                                                news:g9buc5$3ee$1@forums.macromedia.com...
                                                > Maybe I should have said that Specificity is the cascade. Is there really
                                                > more?

                                                p { color:red; }
                                                p { color:blue; }

                                                The cascade will make the text in Ps appear blue, but specificity is not
                                                involved here.
                                                The cascade is a mechanism that allows UAs to "fork" between styles. That
                                                forking relies on weight, specificity and order.


                                                --
                                                Thierry
                                                Articles and Tutorials: http://www.TJKDesign.com/go/?0
                                                --
                                                http://developer.yahoo.com/ helps you build applications and mashups

                                                • 21. Re: CSS LAYOUTS = ????:S????
                                                  Level 7
                                                  Yeah - thanks for that clarification.

                                                  --
                                                  Murray --- ICQ 71997575
                                                  Adobe Community Expert
                                                  (If you *MUST* email me, don't LAUGH when you do so!)
                                                  ==================
                                                  http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                                                  http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                                                  ==================


                                                  "Thierry" <thierry@invalid.com> wrote in message
                                                  news:g9bvol$4ne$1@forums.macromedia.com...
                                                  > "Murray *ACE*" <forums@HAHAgreat-web-sights.com> wrote in message
                                                  > news:g9buc5$3ee$1@forums.macromedia.com...
                                                  >> Maybe I should have said that Specificity is the cascade. Is there
                                                  >> really more?
                                                  >
                                                  > p { color:red; }
                                                  > p { color:blue; }
                                                  >
                                                  > The cascade will make the text in Ps appear blue, but specificity is not
                                                  > involved here.
                                                  > The cascade is a mechanism that allows UAs to "fork" between styles. That
                                                  > forking relies on weight, specificity and order.
                                                  >
                                                  >
                                                  > --
                                                  > Thierry
                                                  > Articles and Tutorials: http://www.TJKDesign.com/go/?0
                                                  > --
                                                  > http://developer.yahoo.com/ helps you build applications and mashups

                                                  • 22. Re: CSS LAYOUTS = ????:S????
                                                    Level 7
                                                    .oO(Thierry)

                                                    >"Murray *ACE*" <forums@HAHAgreat-web-sights.com> wrote in message
                                                    >news:g9buc5$3ee$1@forums.macromedia.com...
                                                    >> Maybe I should have said that Specificity is the cascade. Is there really
                                                    >> more?
                                                    >
                                                    >p { color:red; }
                                                    >p { color:blue; }
                                                    >
                                                    >The cascade will make the text in Ps appear blue, but specificity is not
                                                    >involved here.
                                                    >The cascade is a mechanism that allows UAs to "fork" between styles. That
                                                    >forking relies on weight, specificity and order.

                                                    And origin.

                                                    http://www.w3.org/TR/CSS21/cascade.html#cascading-order

                                                    Micha
                                                    • 23. Re: CSS LAYOUTS = ????:S????
                                                      Level 7
                                                      "Michael Fesser" <netizen@gmx.de> wrote in message
                                                      news:ue1jb4l0hhqpve4f3v3b8hvtthbhsmff37@4ax.com...
                                                      > .oO(Thierry)
                                                      >
                                                      >>"Murray *ACE*" <forums@HAHAgreat-web-sights.com> wrote in message
                                                      >>news:g9buc5$3ee$1@forums.macromedia.com...
                                                      >>> Maybe I should have said that Specificity is the cascade. Is there
                                                      >>> really
                                                      >>> more?
                                                      >>
                                                      >>p { color:red; }
                                                      >>p { color:blue; }
                                                      >>
                                                      >>The cascade will make the text in Ps appear blue, but specificity is not
                                                      >>involved here.
                                                      >>The cascade is a mechanism that allows UAs to "fork" between styles. That
                                                      >>forking relies on weight, specificity and order.
                                                      >
                                                      > And origin.
                                                      >
                                                      > http://www.w3.org/TR/CSS21/cascade.html#cascading-order

                                                      Yes, origin is part of the cascade, I was only refering to rules in a styles
                                                      sheet.

                                                      --
                                                      Thierry
                                                      Articles and Tutorials: http://www.TJKDesign.com/go/?0
                                                      --
                                                      http://developer.yahoo.com/ helps you build applications and mashups

                                                      • 24. Re: CSS LAYOUTS = ????:S????
                                                        Level 7
                                                        .oO(Thierry)

                                                        >"Michael Fesser" <netizen@gmx.de> wrote in message
                                                        >news:ue1jb4l0hhqpve4f3v3b8hvtthbhsmff37@4ax.com...
                                                        >> .oO(Thierry)
                                                        >>
                                                        >>>"Murray *ACE*" <forums@HAHAgreat-web-sights.com> wrote in message
                                                        >>>news:g9buc5$3ee$1@forums.macromedia.com...
                                                        >>>> Maybe I should have said that Specificity is the cascade. Is there
                                                        >>>> really
                                                        >>>> more?
                                                        >>>
                                                        >>>p { color:red; }
                                                        >>>p { color:blue; }
                                                        >>>
                                                        >>>The cascade will make the text in Ps appear blue, but specificity is not
                                                        >>>involved here.
                                                        >>>The cascade is a mechanism that allows UAs to "fork" between styles. That
                                                        >>>forking relies on weight, specificity and order.
                                                        >>
                                                        >> And origin.
                                                        >>
                                                        >> http://www.w3.org/TR/CSS21/cascade.html#cascading-order
                                                        >
                                                        >Yes, origin is part of the cascade, I was only refering to rules in a styles
                                                        >sheet.

                                                        OK. But now we have the complete list. ;)

                                                        Micha
                                                        • 25. Re: CSS LAYOUTS = ????:S????
                                                          brainfillet Level 1
                                                          I ran into the same thing, namely, have built sites using tables when tables were in vogue, then finally took the plunge and got DW and decided to learn what CSS is all about. I found it mind boggling, very frustrating. I very much wanted to go back to using tables.

                                                          Take my advice, which was originally Murray's and I listened to him (our future President): learn CSS! I went to Amazon and bought CSS, the Missing Manual. It's an awesome book, very clearly written. I read each chapter carefully, and if I didn't understand a section, I read it over until I understood it, but that didn't happen all the time. CSS is really the way go, and ultimately easier than tables. Tables are unruly beasts in comparison.

                                                          Believe me, everything about CSS is ultimately very simple, yet also has a beautifully elegant structure behind it, like all natural laws. Seeing the beauty behind it might seem weird and nerdy, but it's there and helped a lot in actually making it fun and intriguing to study and learn it.

                                                          Good luck!
                                                          • 26. Re: CSS LAYOUTS = ????:S????
                                                            Level 7
                                                            On Sat, 30 Aug 2008 14:01:54 +0000 (UTC), "cripaustin"
                                                            <webforumsuser@macromedia.com> wrote:

                                                            >lol. Yes. Thank You for that explanation. I am grateful.
                                                            > So do you think I am ready to make my first CSS layout...anything else I
                                                            >should know?
                                                            >

                                                            A good book or two on CSS perhaps :-))
                                                            --

                                                            ~Malcolm~*...
                                                            ~*
                                                            • 27. Re: CSS LAYOUTS = ????:S????
                                                              New2CSS
                                                              I had / have a log of question with CSS layouts; what to use when.
                                                              If you really want to lean CSS design you should check out http://www.lynda. com.
                                                              I have been playing with DW CS3 for about two month and have bought 4 books on DW and CSS but yet I have a better understanding and appreciation for the power of CSS after only two week of watching the Videos on Lynda.com.
                                                              It's only $25 for a month with no contract (you will need to cancel or they will automatically charge for another month). I believe Adobe gives you a free month with the purchase of DW CS3.
                                                              At times they can be frustation because they don't go from A to Z; opening a page; laying it out, and coding CSS, however the best one is "Dreamweaver CS3 with CSS Essential Training with: James Williamson".
                                                              I had to jump around to several different videos but still it's worth it.

                                                              Hope this helps.
                                                              • 28. Re: CSS LAYOUTS = ????:S????
                                                                Ruby7829 Level 1
                                                                I just wanted to thank everyone on this post for giving me the "umph" to try using CSS layout. I created a site using tables and divs and then took everyone's advice and tried creating one solely with CSS. It actually looks okay!

                                                                My only question is about templates. My site is very basic and it will be much faster for me to create templates for my five pages and only change the text in the middle. Are templates okay to use? Also, when I preview my site in Firefox it looks stellar. When I preview it in IE it looks more fuzzy and a few things didn't line up right. Will it be different when I upload it?
                                                                • 29. Re: CSS LAYOUTS = ????:S????
                                                                  Level 7
                                                                  > Are templates okay to use?

                                                                  Sure.

                                                                  > When I preview it in IE it looks more fuzzy and a
                                                                  > few things didn't line up right. Will it be different when I upload it?

                                                                  It would be hard to say without actually seeing your site. Can you post a
                                                                  link?

                                                                  --
                                                                  Murray --- ICQ 71997575
                                                                  Adobe Community Expert
                                                                  (If you *MUST* email me, don't LAUGH when you do so!)
                                                                  ==================
                                                                  http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                                                                  http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                                                                  ==================


                                                                  "Ruby7829" <webforumsuser@macromedia.com> wrote in message
                                                                  news:g9kqur$o5a$1@forums.macromedia.com...
                                                                  >I just wanted to thank everyone on this post for giving me the "umph" to
                                                                  >try
                                                                  > using CSS layout. I created a site using tables and divs and then took
                                                                  > everyone's advice and tried creating one solely with CSS. It actually
                                                                  > looks
                                                                  > okay!
                                                                  >
                                                                  > My only question is about templates. My site is very basic and it will be
                                                                  > much faster for me to create templates for my five pages and only change
                                                                  > the
                                                                  > text in the middle. Are templates okay to use? Also, when I preview my
                                                                  > site
                                                                  > in Firefox it looks stellar. When I preview it in IE it looks more fuzzy
                                                                  > and a
                                                                  > few things didn't line up right. Will it be different when I upload it?
                                                                  >
                                                                  >