14 Replies Latest reply on Feb 24, 2016 12:29 PM by kalpage

    DW CC 2015 layout

    kalpage Level 1

      Can't get a "content" div to move back up beside a left sidebar even though their collective widths are less than 100% of the wrapper. What does it take to align the divs? Thanks!

        • 2. Re: DW CC 2015 layout
          Jon Fritz II Adobe Community Professional & MVP

          Can you share your code, and what you'd like to see happen?

           

          My guess is you're using floats in the standard box model and have padding and/or borders on your floated elements.

           

          When you use floats in the standard box model, you need to make room for padding and border, those are added to the width setting. So if your widths were 50%, they'd actually be 50% + padding + border, so when added together, they're over 100% and will drop below each other.

          • 3. Re: DW CC 2015 layout
            kalpage Level 1

            I searched the code and did not find floats, padding or borders added to the divs I created. I placed 3 divs inside an article div: (1) a left aside column, (2) a content column, and (3) a right aside. It all looks fine on 1694 x 998 screen but when I slid to the next smaller screen size to where only the left aside and the middle content divs no longer appear side by side by side. At that point, the middle column (content) drops to a new level. When I try to create a media query with reduced the widths to 16 and 80 percent respectively, they stay right where they are, i.e., on two separate levels.

             

            Guess I need to find a good book, tutorial, or document to teach me how to to handle media queries.

            • 4. Re: DW CC 2015 layout
              Jon Fritz II Adobe Community Professional & MVP

              There are many reasons to see what you're seeing, but without seeing the code you're using, all we can do is guess.

               

              Could you post a link to your page in progress?

              • 5. Re: DW CC 2015 layout
                kalpage Level 1

                Happy to have you look at the code but there's lots of it. I am not sure which you need - the html for the left aside and content, and also the css? The website is not online.

                • 6. Re: DW CC 2015 layout
                  Jon Fritz II Adobe Community Professional & MVP

                  The absolute best way to find out where your code has gone off from where you expected it to be, would be to see it in its entirety, in our browsers.

                   

                  Any chance you could upload to a test folder on your server and supply a link?

                   

                  Once the problem is found, you just delete the test folder and all of its contents.

                  • 7. Re: DW CC 2015 layout
                    kalpage Level 1

                    Just saw your reply. Thanks Jon. I will try to get it set up tomorrow and get back when ready for you to take a look at the code.

                    • 8. Re: DW CC 2015 layout
                      kalpage Level 1

                      Jon, I made some changes so that I don't have to struggle with that particular problem for the moment.

                       

                      But I was finally able to load the page. You can find it at " gregpagebooks.com "

                       

                      Now I am faced with a new issue. I added links to the Ezine, Facebook, LinkedIn and Twitter icons. They don't always work. And although I selected" _blank" as the target for each, when they do not open a new tab when they go to the site. I wonder if you could take a look and let me know how to get the links to work properly. Thanks for your kind attention.

                      • 9. Re: DW CC 2015 layout
                        Jon Fritz II Adobe Community Professional & MVP

                        The first thing you should do is run the validator under File > Validate > Validate Current Document (W3C) to clean up your html errors. Code errors are one of the biggest causes of display problems and functionality issues.

                         

                        If the problem persists after cleaning up your code, post back and we can take a closer look.

                        • 10. Re: DW CC 2015 layout
                          kalpage Level 1

                          Thanks. This is what came back: "108"No element in scope but a p end tag seen." Below that: "117 Bad value image/Graphic Palette Logo Small.gif for attribute src on element img : illegal character in path segment: space is not allowed. [html5]"

                           

                          But these errors are not showing on the web page. Not sure what to do. Have to leave for an appointment now but will check this thread as soon as I return.

                          • 11. Re: DW CC 2015 layout
                            Jon Fritz II Adobe Community Professional & MVP

                            The bad value errors are because you're using spaces in your image names. Use underscores or hyphens instead (change it in your Files window within DW and the program will update the links for you). Also stay away from special characters ($%^&*) and stick with lowercase alpha-numerics. On a server, INDEX.html is a separate file from index.html. On your local OS, a link to either will go to the same file so staying with all lowercase greatly reduces the chance that you'll accidentally link to an incorrect case structure and have your user's browser throw a 404 File Not Found error.

                             

                            Don't forget the semi-colon at the end of your non-breaking space codes. They should all look like (without spaces) & nbsp ;

                             

                            Line 108 "No element in scope means you have a stray ending </p> that should either be deleted or have a missing opening <p> at some point before it.

                            • 12. Re: DW CC 2015 layout
                              kalpage Level 1

                              Thanks again! I made the corrections you recommended but am left with a few confusing issues. Renaming the images worked fine but now when I validate, I get the message that both my "article" and "section" divs are missing a heading. It suggests identifying them using h2-h6 headings. I don't know what that means.

                               

                              Second, when I try to address the "No element in scope" issue by either adding a <p> or  by deleting the </p>, in either case, I create a new "red" error message in the properties panel. The messages claim I am missing a </p> to complement the <p> I just added, or that I need to remove a <p> to complement the </p> I just removed. Either I accept the validate error to eliminate the properties error, or eliminate the properties error and keep the validate error. I can't seem to get rid of the error messages. It's all a bit confusing

                               

                              Any more ideas would be greatly appreciated.

                              • 13. Re: DW CC 2015 layout
                                Jon Fritz II Adobe Community Professional & MVP

                                In html, you have several "heading" tags you can use that impart a certain amount of importance by search engine algorithms: <h1> through <h6> with 1 being the most important (only 1 per page) and 6 being the least (while still more important than a simple <p> tag).

                                 

                                What that error is saying is that, under html5 best practices, there should be a heading within your <section> and <article> tags, so something like...

                                 

                                <section>
                                     <h2>Something Important<h2>
                                     <p>everything else</p>
                                </section>

                                 

                                or

                                 

                                <article>

                                     <h3>Something Important<h3>

                                     <p>everything else</p>

                                </article>

                                 

                                The new <p> error likely means you are "splitting" your paragraph tags with something that can't be placed between them, like another element's ending tag when that element's starting tag is outside the <p> set. You can't have something like this...

                                 

                                <div>

                                     <p>Some info here

                                </div>

                                </p>

                                 

                                You have to close the <p> set before you can close its parent element...

                                 

                                <div>

                                     <p>Some info here</p>

                                </div>

                                 

                                Your stray ending tag likely belongs somewhere higher up in the html, you may have to do some searching in your new code to verify everything is closed properly.

                                • 14. Re: DW CC 2015 layout
                                  kalpage Level 1

                                  Jon, I am impressed! Your observations and comments have been a huge help. I have removed all errors except for two. Both are yellow warnings that my article and section are missing headings. My guess is that I can live without if I do not want any text to appear. I only used them for layout purposes to contain other divs.

                                   

                                  So far, everything seems to be working the way I wanted thanks to you!