9 Replies Latest reply on Mar 1, 2014 9:40 AM by David_Powers

    make sure main.css is selected?

    KevinB9 Level 1

      Hi. When David Powers says, "Make sure main.css is selected", I laugh a little. It's a bit like saying, "Make sure your seat belt is fastened" when the plane is about to crash.

       

      What I'm getting at is that it is very confusing for the beginner trying to understand what Dreamweaver CC (13.2) is trying to tell you at various times - through selections, bold vs regular, and linethrough. I have not seen this covered at all in the literature. I'm hoping you can help me.

       

      Let's take a very simple test case. I set up a blank web page with layout:none and an external style sheet called "teststyle.css". Then I inserted a small div with ID "container" and gave it a few simple properties. Like this:

       

      container.jpg

      It has a background color and I set the margins to "auto" so it shows up at the top middle of my page. Fine.

       

      Now, if I click below the container, in the blank body area, in Design view, the CSS Designer goes blank and the "teststyle.css" shows as regular type. I understand that this is because I have clicked in an area of the document window that has not been styled. Then if I click inside the container div, the "teststyle.css" goes bold and the rules appear in the properties pane. Again, fine.

       

      But - if I click in an area of the body next to and outside the container div I also get the bold teststyle.css

       

      First question - why is this?  What is the difference between clicking below the container and next to it - on the left or the right?

       

      My second (and last) question has to do with the linethrough. In the above scenario when I click in the container div I get a line through the properties: width, height, auto, background color. What is dreamweaver trying to tell me? Why do I get a linethrough insome situations and not in others?

       

      Thanks for your time.

       

      Kevin Burke

      Cambridge, Massachusetts

        • 1. Re: make sure main.css is selected?
          David_Powers Adobe Community Professional (Moderator)

          When the style sheet is displayed in bold type in the Sources pane of the CSS Designer, it means that the style sheet is active. The reason you need to select it to create a new selector is because the Selectors pane automatically switches between a COMPUTED state and an editing state. When you see COMPUTED at the top of the Selectors pane, it's listing the selectors that apply to whatever is currently selected in the Document window.

           

          When you see a property with a strikethrough line, hover your mouse pointer over the property name. Dreamweaver then displays a tooltip explaining why the property is struck out. It's usually because the value of that property is being overridden by another style rule.

           

          The COMPUTED list in the Selectors pane displays all the style rules that affect the currently selected element in order of priority, with the most important rule at the top. For example, if you click inside one of the navigation menu items in the Bayside Beat case study, COMPUTED shows a list of all style rules that affect the navigation button. If you select the third selector (a:hover, a:active, a:focus), the color property is struck through. Hover over that struck-through property, and the tooltip tells you that the color property (#7F3300 - burnt orange) is being overridden by the color property in #mainnav a (#FFFFFF - white).

          • 2. Re: make sure main.css is selected?
            KevinB9 Level 1

            David - thanks very much for your help

             

            I am trying to learn HTML and Dreamweaver all by myself by looking at tutorials and reading the official Adobe workbook. Not so easy . . . .

             

            Part of my problem is that I really only need to know about 10% of Dreamweaver, so how do I know which 10% and where to find it . . . ?

             

            I have found your Bayside Beat tutorial (the print version) to be my best resource.

             

            Also, I take this discussion forum very seriously.

             

            Kevin Burke

            Cambridge, Massachusetts

            • 3. Re: make sure main.css is selected?
              David_Powers Adobe Community Professional (Moderator)

              Thanks, Kevin. Are you aware of the main Dreamweaver support forum? It's much more frequently accessed than this one, and you'll find a lot of people willing to help there.

               

              This forum was set up to answer questions about my tutorial, so it's not very active. I try to keep an eye on it, but I can't get here every day.

              • 4. Re: make sure main.css is selected?
                KevinB9 Level 1

                Hi, David. Thanks for staying in touch.

                 

                Yes, I am aware of the main support forum but most of that discussion is over my head.

                 

                A big part of my problem is that I was relying too heavily on the official Adobe training workbook. I find that the book is as much of a hindrance as a help, although I know the authors meant well. The "Greenstart" dummy website featured in the book is much too fussy - your Bayside Beat would have been more helpful for the beginner.

                 

                To give you an example about the shortcomings of the book - the early descriptions of descendancy and specificity do not include the CSS designer which contributed to my difficulties later on when I had to create my own selectors within CSS Designer.

                 

                Also, I tried to float an image inside a div of my first site which caused the div to collapse. Finally I read on page 300 of the Elizabeth Castro book about "overflow:hidden". That set me back a couple of weeks. Later I saw one of your earlier tutorials which mentioned something about that, but it was a tutorial for Dreamweaver CS5.5 if I remember correctly. That brings up another question for the beginner - should you look at tutorials for the older versions of Dreamweaver?

                 

                Anyway I'm hoping that i can pass on some of what I have learned to someone else. I could save them a lot of time.

                 

                Best wishes, Kevin Burke Cambridge, Massachusetts

                • 5. Re: make sure main.css is selected?
                  David_Powers Adobe Community Professional (Moderator)

                  KevinB9 wrote:

                   

                  That brings up another question for the beginner - should you look at tutorials for the older versions of Dreamweaver?

                  Yes, and no.

                   

                  The key to working successfully with Dreamweaver is a solid understanding of HTML and CSS. Once you have that under your belt, Dreamweaver becomes just a tool to get the job done. If you know what HTML elements and CSS selectors are for, the differences between versions of Dreamweaver fade into insignificance.

                   

                  Having said that, I realize that it's difficult when you're trying to learn several things at once. One of the difficulties presented by the Creative Cloud is that new features are added to Dreamweaver and other programs several times a year. Books have very little time to catch up. If you find working with video training courses helpful, you might like to know that my Dreamweaver CC: Learn by Video is Peachpit's video deal of the week. Until March 1, it's $22.99 instead of the regular $79.99. It was created using Dreamweaver 13.1, so it's pretty well up to date (the changes in version 13.2 don't affect the contents of the course).

                  • 6. Re: make sure main.css is selected?
                    KevinB9 Level 1

                    OK. Thanks for the heads up. I bought it (the video) and I will give you feedback as time permits.

                     

                    I'm glad to see that you have moved away from San Francisco. I was getting tired of those cable cars.

                     

                    I live in Massachusetts but I know the California coast well.

                     

                    Best wishes,

                    Kevin

                    • 7. Re: make sure main.css is selected?
                      David_Powers Adobe Community Professional (Moderator)

                      I hope you're finding the DVD useful. As you might have gathered from my accent, I'm British. I live in London.

                       

                      The photos of the cable cars come from a visit I made to Adobe in San Francisco a few years ago. The Pacific Highway photos and video come from a journey I made after the Adobe MAX conference in LA last May. I rented a car and took the scenic route to San Francisco before flying home.

                      • 8. Re: make sure main.css is selected?
                        KevinB9 Level 1

                        Yes, I gathered that you were a Brit.

                         

                        So far so good with the tutorial. Thanks for not making humor part of the instruction - I hate that. Irony is fine.

                         

                        Paying money for the tutorial definitely adds to the motivation - to get something out of it. I know people always say that about visiting a psychiatrist.

                         

                        About the DVD - I didn't get a DVD. Should I have gotten one? I have to log in to my account at Peachpit and click on "Watch Now". I would prefer to have a DVD because sometimes I am not connect to the iternet. Please advise. Thanks.

                         

                        Kevin

                        • 9. Re: make sure main.css is selected?
                          David_Powers Adobe Community Professional (Moderator)

                          It's possible that the special price was for a download version only. You would need to contact Peachpit/Adobe Press to check.