11 Replies Latest reply: Jan 19, 2013 12:48 PM by New flash user RSS

    the html5 tags nav in the broilerplate.css file - fluid grid

    New flash user Community Member

      Ok.  I am working with the fluid grid system in DW CS6.

       

      in the broiler plate.css file i see the below code  which seems to control the styling for the listed html 5 elements.

       

       

      HTML5 display definitions
         ========================================================================== */

      article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
      audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
      audio:not([controls]) { display: none; }
      [hidden] { display: none; }

      /* =============================================================================
         Base
         ========================================================================== */

      /*

       

       

      why did adobe set the nav id to display as a block element.

       

      this is causing me issues with using the above tags.

       

      My navigation bars name is nav.  I attempted to create another css rule with the display set to INLINE for my menu.

       

      The boiler plate code is overwriting my rule.  Why?  What is the best way to label my divs.  I was tring to go HTML 5 but fluid grid already has some rules in place.  Can i modify that without problems?  what is the best thing to do.  Not label my divs with the HTML5 labels?

       

       

      why are all html5 tags  set up to display that way.  How are you supposed to have individual control?  without breaking the fluid grids factory helper rules?

        • 1. Re: the html5 tags nav in the broilerplate.css file - fluid grid
          Jon Fritz II CommunityMVP

          You should never use spaces in an html id or a css id or class name, unless you are creating a selector that targets a class, id or element within another class, id or element.

           

          <div id="div nav">

           

          Would use the css selector  "#div nav" which would literally mean --a <nav> tag within an element with id="div"-- Which is why the css for the nav element in that element list above is affecting your id.

           

          Your code needs a slight tweek if you want to continue using a two word naming scheme...

           

          <div id="div_nav">

           

          Using the css selector "#div_nav" which would mean --an element with the id="div_nav"--

           

          You can over-ride anything in that block by writing a new element css definition later in the same file.

          • 2. Re: the html5 tags nav in the broilerplate.css file - fluid grid
            New flash user Community Member

            i just used the name <nav>

             

            i also did it this way in order to have a more specific name.

             

            </head>

            <body>

              <nav id="topnav">

                <ul>

                  <li>HOME</li>

                  <li>SITE MAP</li>

                  <li>CONTACT US</li>

                  <li></li>

                </ul>

              </nav>

            <div class="gridContainer clearfix

            • 3. Re: the html5 tags nav in the broilerplate.css file - fluid grid
              New flash user Community Member

              it seems that when I gave the nav bar a more specific name instead of just <nav>  i could then write rules that apply to that area.

               

              How do I get the main container in the Fluidgrid to position itself below my fixed nav bar which is located at the top of the page.

               

               

              can i write a top margin rule and where do i write it.  thanks

              • 4. Re: the html5 tags nav in the broilerplate.css file - fluid grid
                Jon Fritz II CommunityMVP

                Yep, that's how css works. If something is overwritten later in the css as in your case, re-writing an element's css with an id, the more specific css takes over.

                 

                Generally, you don't give single use elements an id to add css, you would just write the css rules for the element itself. If you use an id on the element, you need to make sure to rewrite any rules given to the element itself in the css within the id rules.

                 

                I'm not planning to update to DWCS6, so hopefully, someone will be along soon to help you out with the Fluid Grid specific issues.

                • 5. Re: the html5 tags nav in the broilerplate.css file - fluid grid
                  New flash user Community Member

                  The only work around I have found so far is to create a fluid grid layout tag and give width, height, and color properties and use is as a blank box to keep my next div tag that has content in it to appear below my fixed nav div that is outside  and above the grid contanier.  It works great till i resize to mobile view.  This causes my nav bar to stack vertically increasing its size.  which the blank div is smaller than so my next content is still "under" my fixed header.

                   

                  Any thoughts?  Also still wondering about my questions is my ist post.

                  • 6. Re: the html5 tags nav in the broilerplate.css file - fluid grid
                    Nancy O. CommunityMVP

                    I don't know if this answers all your questions, but below is a quick example of what you can do with Fluid Grid Layouts (FGLs).  View source to see the code.

                    http://alt-web.com/FluidGrid/Fluid.html

                     

                    I recommend using a separate style sheet for Content

                    http://alt-web.com/FluidGrid/Content.css

                     

                    FluidGrid.css is the layout code DW created, no changes made.

                    http://alt-web.com/FluidGrid/FluidGrid.css

                     

                    I advise against using position:fixed in any mobile / tablet layout because many older devices  don't support them very well.  With FGLs, less is more.  Keep things simple & uncomplicated.  You'll have fewer problems across different devices.

                     

                     

                    Nancy O.

                    • 7. Re: the html5 tags nav in the broilerplate.css file - fluid grid
                      New flash user Community Member

                      Nancy thanks for the above information.  I looked it over.   I want a nav area that stays put no matter what the user does to the page.

                       

                      The fixed div does that and it seems to adapt to page size well as long as I dont stuff to much content in it.

                       

                      I have hit a problem with fluid grid.   I am stuck now.  Everything was moving along well and My CSS has really improved.

                       

                      The current problem I have is that my layout tag is not staying and displaying on the grid.  On the design it shows that it is on the same row as the other layout divs.  But when I preview it in I expore it has moved down  a row

                       

                      It appears that the width of the gutter or the pages right margin is effecting the div layout and not allowing it to snap in to the grid correctly.  I have not be able to locate why my layouts are not spanning the full width of the page.  DW shows they do. 

                       

                      Could the margin or gutter setting on the fluid grid affect this?

                      • 8. Re: the html5 tags nav in the broilerplate.css file - fluid grid
                        Nancy O. CommunityMVP

                        I want a nav area that stays put no matter what the user does to the page.

                        Are you building this site for yourself or your site visitors? What YOU want may not be possible in all end user devices.   Position:fixed is dicey.

                        Many older mobile devices don't support it. Many newer devices have problems with zooming-in and panning around fixed elements. 

                         

                        Mobile browser compatibility charts:

                        my layout tag is not staying and displaying on the grid.  On the design it shows that it is on the same row as the other layout divs.  But when I preview it in I expore it has moved down  a row.

                         

                        Which version of IE are you testing? 

                        Does your floated Div drop in Live View?

                        How about in Chrome, Safari, Firefox & Opera?

                        Can you post the URL to your test page?

                         

                         

                        Nancy O.

                        • 9. Re: the html5 tags nav in the broilerplate.css file - fluid grid
                          New flash user Community Member

                          Thanks for those charts.  I am building the site for both myself and my visitors.  After looking at your chart I think 90% is good enough for me.  My old website that I am rebuilding used framed pages and front page to build it.   I am making my layout so that IF i find that the fixed nav box is too Dicey I will just pull it off the site.

                           

                          I am not suse which browser dreamweaver has built in.  I moved into a new windows 8 computer with CS6 at the same time.  I have not downloaded any browsers yet.  I was just building this based on the newest stuff released.  I am far from testing it out and should have gotten some done by now.  AS of right now I have 140 hours in building my new layout and learning CSS coding.  I have not uploaded yet to a URL so I will need to get back to you when I do.  The little bugs keep setting me back to zero.  The layout looked like it all snapped to the grid.  My layout divs were 12 column with 4 divs approx 200 px 400px 300px and 300px everything snapped to and looked fine.  When I started adding my PS images and content to my divs the 4th div fell back down a row in the view.  I then click the arrow to move it down a row which it did then I tried to move it back up.  It would not go.  I have boxes with borders, radius corners, and dropped shadows on the containing box.  I looked at it and starting thinking the CSS styles made it wider than the fluid grid would allow.  So i then removed the styles and it is still stuck a row below where it should be.

                           

                          Futher down my page I have 4 more rows with 4 divs in each row.  The last 4 all drop down so that it is totaly different than what I a laid out.  It is weird because my div is three colums wide.  I have the last three colums open on the lay out but it will not move up and it seems like the margins are tight or the gutter is wrong.  I am not sure.

                          • 10. Re: the html5 tags nav in the broilerplate.css file - fluid grid
                            Nancy O. CommunityMVP

                            Until you upload your test site to a public web space you control, there's not much I or anyone else here can tell you except to start over.

                             

                            I think I made 9 or 10 prototype pages with Fluid Grids before I settled on a Layout I could live with.  Make backup files in case you do something you can't Ctrl+Z (undo) out of.

                             

                            You should definitely be previewing in multiple browsers and web devices.  IE is the worst of the bunch.  DW Design View is not reliable either.  Use Live View and Preview in Firefox, Safari or Chrome

                             

                             

                            Nancy O.

                            • 11. Re: the html5 tags nav in the broilerplate.css file - fluid grid
                              New flash user Community Member

                              There is something to the column gutter width % factory preset at 25%.  I made two more fluid grid pages and loaded in the same content.   When I use a 10% width the items wrap to the next row  When I change that to 20% content stays on the main row.

                               

                              Content and photos are the same size, Whats up with that?