8 Replies Latest reply: Dec 7, 2012 11:27 AM by mhollis55 RSS

    HTML5 predefined CSS layout incomplete

    JimmyGG Community Member

      I have Dreamweaver CS6 installed on Windows 7 x64.

       

      Both HTML5 predefined layouts appear to be incomplete. For example they use <ul class="nav"> instead of <nav>

       

      Anyone know if there are updated versions available?

        • 1. Re: HTML5 predefined CSS layout incomplete
          Jon Fritz II MVP

          <nav> isn't a required tag in html5.

           

          <nav> simply replaces <div id="nav"> for more semantically helpful code.

           

          It is just a container tag used to lump in your navigation elements and can be used or not as you see fit.

           

          The .nav class on a ul tag <ul class="nav"> has a totally different purpose than the <nav> container tag.

          • 2. Re: HTML5 predefined CSS layout incomplete
            JimmyGG Community Member

            Thank you for your response.

             

            I understand what you're saying. However, the Adobe predefined CSS

            layouts for HTML5 should reflect the "best coding practices" for HTML pages.

             

            I own Dreamweaver CS5.5 and CS6.

            The HTML5: 2 column fixed, right sidebar, header and footer Layout is

            different in both versions. For example:

             

            CS5.5:

             

                

             

            It seems to me, Adobe has good (semantically) code in CS5.5 but changed

            their mind in CS6.0. I would like to know why.

             

            Jim

            • 3. Re: HTML5 predefined CSS layout incomplete
              mhollis55 Community Member

              Jimmy, there is just no way that Adobe can anticipate how you want to do things.

               

              Yes, <nav> is a new thing under HTML5 and it is more semantic than <div id="nav"> And what happens when you have navigation on both the top of the website and the bottom within a footer, each styled differently?

               

              With CSS3 and HTML5, you can style nav thusly:

               

              nav {

                   display: block;

                   text-transform: uppercase;

              }

               

              Then do your navigation in HTML

               

              And have a class for nav thusly:

               

              nav .top {

                   color: #fff;

              }

               

              footer nav {

                   color: #000

              }

               

              There, you have black navigation text in the footer, white (where it is presumably going to stand out) on a top navigation. Both are display: block and both transform the text to uppercase.

               

              And Dreamweaver ought not to assume that is what you are going to do—or not. So they're laying out div containers that work with HTML5 and also HTML4. It's not like you can't use anything you used to use in HTML4.

               

              Here's another fun thing you can to in HTML5:

               

              You can style sections and articles. Articles can fit into sections and vice-versa. You can also style aside tags—I'm doing that now. Or, you can just do the stuff you were doing in HTML4 and XHTML in an HTML5 document. And, by the way, it's perfectly legitimate to put Flash into an HTML5 document (gasp!!). One should have a good way for mobile devices to degenerate if one is using Flash in HTML5, though.

              • 4. Re: HTML5 predefined CSS layout incomplete
                JimmyGG Community Member

                Thank you for your response. Below is how I replied to member. I am

                still confused about Adobe's change from CS5.5 to CS6

                 

                 

                I own Dreamweaver CS5.5 and CS6.

                The HTML5: 2 column fixed, right sidebar, header and footer Layout is

                different in both versions. For example:

                 

                CS5.5:

                 

                    

                 

                It seems to me, Adobe has good (semantically) code in CS5.5 but changed

                their mind in CS6.0. I would like to know why.

                 

                Jim

                • 5. Re: HTML5 predefined CSS layout incomplete
                  Jon Fritz II MVP

                  You can't post code via email. You'll need to come to the forum to post the code you want us to see.

                  • 6. Re: HTML5 predefined CSS layout incomplete
                    Nancy O. MVP

                    Flash is a dead web technology.  It is not supported by the most popular mobile devices (iPhone, iTouch,  iPad, new Androids, etc...)

                     

                    Best advice, replace your Flash content with jQuery, Adobe Edge Animate or HTML5 video.

                     

                     

                     

                    Nancy O.

                    • 7. Re: HTML5 predefined CSS layout incomplete
                      JimmyGG Community Member

                      I own Dreamweaver CS5.5 and CS6.

                      The HTML5: 2 column fixed, right sidebar, header and footer Layout is different in both versions. For example:

                       

                      CS5.5:

                       

                        <header>

                          <a href="#"><img src="" alt="Insert Logo Here" width="180" height="90" id="Insert_logo" style="background: #C6D580; display:block;" /></a>

                        </header>

                        <div class="sidebar1">

                          <nav>

                            <ul>

                              <li><a href="#">Link one</a></li>

                              <li><a href="#">Link two</a></li>

                              <li><a href="#">Link three</a></li>

                              <li><a href="#">Link four</a></li>

                            </ul>

                          </nav>

                          <aside>

                       

                      CS6.0:

                        <header>

                          <a href="#"><img src="" alt="Insert Logo Here" width="180" height="90" id="Insert_logo" style="background-color: #C6D580; display:block;" /></a>

                        </header>

                        <div class="sidebar1">

                          <ul class="nav">

                            <li><a href="#">Link one</a></li>

                            <li><a href="#">Link two</a></li>

                            <li><a href="#">Link three</a></li>

                            <li><a href="#">Link four</a></li>

                          </ul>

                          <aside>

                       

                      It seems to me, Adobe has good (semantically) code in CS5.5 but changed their mind in CS6.0. I would like to know why.

                       

                      Jim

                      • 8. Re: HTML5 predefined CSS layout incomplete
                        mhollis55 Community Member

                        I was pointing out that, even though the earliest HTML5 devices (mobile) do not do Flash (especially iOS), you can still put it into the website. I did that as an alternative (in one website) to support older browsers.

                         

                        I agree, Flash is dead. But it is perfectly plausable to put it into an HTML5 document to support old stuff.