Skip navigation
Currently Being Moderated

What class should I use for a Fluid Div Tage

Jun 14, 2013 11:22 AM

Tags: #dreamweaver #css #cs6 #fluid_grid

Hi!

 

Forgive me if this question has been asked.  When I want to insert a fluid Div (from the Insert panel), it asks which "class" to use.  (Attached image for clarity.)  So, I chose 'fluid.'  Is that correct? 

 

Furthermore, when I do choose 'fluid', my CSS shows up like this: <div class="fluid fluid"> Is it supposed to repeat like that. 

 

Thanks (and I can't wait for CC!)

 

Jon

 

Screen Shot 2013-06-14 at 2.15.10 PM.png

 
Replies
  • Currently Being Moderated
    Jun 14, 2013 12:14 PM   in reply to jonfreed77

    It really depends on what you're planning to do with the inserted div.

     

    Ideally, everything should go inside the .gridContainer div. 

    <div class="gridContainer clearfix">

         <div id="LayoutDiv1">  </div>

         <div id="LayoutDiv2">  </div>

         <div id="LayoutDiv3">  </div>

         <div id="LayoutDiv4">  </div>

    </div>

     

    It doesn't matter much what you call your Divs.  The pre-defined classes are there to help you if you choose to use them. 

     

    Creative Cloud 12.2 Enhancement to Fluid Grid Layouts

    http://blogs.adobe.com/dreamweaver/2013/02/updated-fluid-grids-in-drea mweaver.html

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 15, 2013 2:26 PM   in reply to jonfreed77

    FGL comes with several pre-defined and re-usable classes in the CSS file. 

     

    Go to insert > Div.  Type "foo" into the class field.  DW generates the following code.

     

    <div class="fluid foo">

    This is the content for Layout Div Tag "foo"

    </div>

     

    Go to insert > Div again and look inside the drop list.  Now you'll see "foo" has been added to the list of class names.

     

    If you type "foofoo" in the div ID field, DW generates this code:

     

    <div id="foofoo" class="fluid">

    This is the content for Layout Div Tag "foofoo"

    </div>

     

    IDs are unique and can be used only one time per page.  But classes are re-usable as many times as you need one.

     

    I agree the documentation leaves a lot to be desired.  That may be changing after Monday when the new CC becomes available.

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 15, 2013 8:23 PM   in reply to jonfreed77

    Hi Jon,

     

    I wouldn't rely on Adobe for responsive design - or much of anything in

    terms of client side stuff. They typically just grab free stuff off the

    Web - whatever is trendy - and turn it into a feature. CS6 uses

    Boilerplate and CC will be using the mote robustly bloated Bootstrap.

    The last time Adobe wrote something itself they gave the world Spry,

    which met an untimely end.

     

    Responsive design is extremely easy to master and the time it takes

    understanding a bloated framework would be much more productively spent

    learning how to do it yourself - with a fraction of the code.

     

    Dreamweaver is a first-class web authoring tool as long as you restrict

    your use to actual authoring

     

    --

    Al Sparber - PVII

    http://www.projectseven.com

    The Finest Dreamweaver Menus | Galleries | Widgets

    Since 1998

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 15, 2013 9:49 PM   in reply to jonfreed77

    If I were privy to a beta I would not be able to tell you. The details

    were discussed at MAX and in some Adobe videos.

     

    From what I see, the CSS version will be a valuable upgrade based on

    new CSS editing features and a claimed improvement in speed and stability.

     

    As for learning responsive design, the key is to study the basics and

    ignore the tutorials or articles that include any reference to a

    particular CSS framework.

     

    The key components are:

     

    Include a viewport meta tag. This tells a mobile device to render your

    page in its viewport full-size, without shrinking it.

     

    Write a simple media query with no more than 1 or 2 breakpoints.

     

    Do not use JavaScript detection. Responsive design is for all mobile

    devices and is to be considered a progressive enhancement for modern

    browsers that support media queries.

     

    We produce responsive tools and templates. Feel free to examine the code.

     

    --

    Al Sparber - PVII

    http://www.projectseven.com

    The Finest Dreamweaver Menus | Galleries | Widgets

    Since 1998

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 30, 2013 3:57 AM   in reply to Al Sparber

    I like your style, Al.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 30, 2013 5:10 AM   in reply to Al Sparber

    @Al Sparber:  +1000, I couldn't agree more.

     
    |
    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