Skip navigation
ScatterToo
Currently Being Moderated

More insight on divs with fluid grids please!

Jun 7, 2013 12:01 PM

Tags: #div #formatting #two #layout #cs6 #grid #column #fluid

Help me come further up the CS6 fluid grid learning curve, please!

I'm adapting an exiting site to fluid grids. After creating the template for the primary pages, I have two major issues at this point(yeah, only two, SO FAR).

 

1- I have a vertically expanding menu in the first layout div. For tablets, I want to preserve the left grid column space for the menu, regardless of its length, and all other content would use just the right gid columns. But when the menu happens to be short, the "excess" content floats left under the menu grid columns. How can I force main page content to only occupy the right grid columns, regardless of the length of the menu?

 

As a side point to the menu, what happens when I try to put this (or the footer) all back in an SSI, as it originally was?

 

2 - I've seen the note about no support for nested layout divs. Thru trial and error, I'm still trying to figure out just what this means. Pragmatically, what is the greater implication of this?  Can format be controlled only on fluid grid layout divs? Can't I have divs inside of a grid layout div to control image palcement around the text for instance? I've had hit=n-miss experience with this so far.

Can anybody point me to a more in-depth discussion on this topic?

 

Sorry if this ol' dog seems like he's learning div layout all over again. But hey! That IS how it feels!

 

Thanks for any education, or pointers to such, that you can provide.

 
Replies
  • Currently Being Moderated
    Jun 7, 2013 1:06 PM   in reply to ScatterToo

    Can you post a URL to your test page so we can see exactly what you're talking about?

     

    In general, any navigation you use in Fluid Grid Layouts must also adapt to different devices. And with more  people using Laptops with Touch Screens, you must consider not only the width of the menu, but the size of the buttons and their proximity to the user's thumbs which more often than not are going to be positioned at the bottom right/left sides of the device.   So some creative planning needs to go into your responsive menus.

     

    I have come to the recent conclusion that menus really belong on the bottom of the screen; not the top.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 17, 2013 12:49 PM   in reply to ScatterToo

    Not sure I completely understand what you want. But in this example, I have set nav and LayoutDivs 5, 6, 7 to display:none  in smaller devices.

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

     

    I did this inside a media query within my Content.css file:

     

    /* Special Rules for Mobiles. */

    @media only screen and (max-width: 480px) {

         /**hide some divs**/

         nav, #LayoutDiv5, #LayoutDiv6, #LayoutDiv7 { display: none }

         /**show jQuery buttons**/    

         #togglenav { display: block }

         #showDivs { display: block }

    }

     

    Then I used a simple jQuery toggle to show/hide divs.

    http://jsfiddle.net/NancyO/AP9Hm/

     

     

    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