Skip navigation
cSegno
Currently Being Moderated

Fluid grid layout: cannot make it work

Mar 30, 2013 10:04 AM

Tags: #dreamweaver #layout #cs6 #fluid

Hello,

I'm quite new to html5 css and Dreamweaver, though I have some programming backgroung.

Could you please give any hint on how to solve the problem I'm encountering when trying to build my very first web site?

I have found similar problems described in Adobe Community, but none of the solutions seemed to solve my case.

If this has actually already been addressed, please point me to the proper article (I'm willing to learn rather than simply get the ready made fix).

Well, this is my problem:

I need to create a web site that displays pics and text in three separate areas of the screen, three columns.

I have followed the tutorial at http://tv.adobe.com/watch/learn-dreamweaver-cs6/using-fluid-grid-layou ts/  (very well done btw), and tried to repeat it myself.

No way to make it works for me :-(

All the divs appear each in a new row when opening on a browser, not aligned as I expected (tried all of them: ie, firefox, chrome and safari on ipad).

If I do multiscreen prevew in Dreamweaver it looks good instead.

I would really appreciate any suggestion or explanation why this is happening.

 

Thanks a lot!

Cristiano P.

 

All files I can provide are at:

www.csegno.com.ar/Post_Debug/debug_data.html

 

 

  1. index.html file created by dreamweaver (www.csegno.com.ar/Post_Debug/index.html)
  2. boilerplate.css file created by dreamweaver
  3. cSegno.css file created by dreamweaver
  4. respond.min.js file created by dreamweaver
  5. DW_GUI.png screenshot of what it looks like in Design view
  6. DW_multiscreen.png screen shot of multiscreen preview
 
Replies
  • Currently Being Moderated
    Mar 30, 2013 10:27 AM   in reply to cSegno

    I cannot connect to your server.  It just keeps timing out.   I'll attempt  to answer your questions without seeing your code. 

     

    #1 FluidGrid Layouts are challenging even for experienced web designers.  If you've never built a site before, maybe this is not an ideal first project to learn from. 

     

    #2 FGL requires that you design the mobile layout first as this is what everything else is based on.  Then build tablet layout followed by desktop.  This example page was built with FGL. View source to the see the code.   http://alt-web.com/FluidGrid/Fluid2.html

        

    #3 Use a separate external style sheet for your content styles.  Keep FluidGrid.css for layout only.  Don't tamper with FluidGrid.css or boilerplate.css code unless you're very experienced with CSS code.

     

    #4  Media queries contain an extra set of curly brackets { }   If you remove them, your layout will break.

        

         /* Special Rules for Mobiles. */

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

             body { font-size: 75% }

         }

     

    #5  Validate your code with this online tool and fix any reported errors.

              HTML - http://validator.w3.org/

     

    Hope this helps.

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 30, 2013 4:56 PM   in reply to cSegno

    Are you working within a Defined Local Site folder?  Site > Manage Sites > New...  This is a critical 1st step so DW can manage your project files correctly.

     

    Happy Easter!

     

    ()__()

    (='.'=)

    (")_(")

     

    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