Skip navigation
Currently Being Moderated

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

Jan 18, 2013 7:24 AM

Tags: #html #grid #5 #nav #fluid #dream #weaver

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; }

/* ===================================================================== ========
   ===================================================================== ===== */




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?

  • Currently Being Moderated
    Jan 18, 2013 7:38 AM   in reply to New flash user

    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.

    Mark as:
  • Currently Being Moderated
    Jan 18, 2013 8:31 AM   in reply to New flash user

    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.

    Mark as:
  • Currently Being Moderated
    Jan 18, 2013 3:41 PM   in reply to New flash user

    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.


    I recommend using a separate style sheet for Content


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


    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.

    Mark as:
  • Currently Being Moderated
    Jan 19, 2013 11:21 AM   in reply to New flash user

    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.

    Mark as:
  • Currently Being Moderated
    Jan 19, 2013 12:01 PM   in reply to New flash user

    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.

    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points