15 Replies Latest reply on Oct 21, 2015 3:02 AM by bob.gee

    Right way to create a fluid page

    bob.gee

      Ok... I am new to Dw and its my intention to create a fluid page website. During the creation of the index page, I have got the following below

       

      <div class="gridContainer clearfix">

        <div id="LayoutDiv1">

       

      I am not sure if I should be modifying these containers, or even if they are necessary.

      The first object I want to add is a header to hold a navigation bar.

      Can someone please explain to me how to achieve this.

       

      Thanks in advance

      BOB.G

        • 1. Re: Right way to create a fluid page
          Nancy OShea Adobe Community Professional & MVP

          I assume you're using the legacy Fluid Grid layouts feature.  Not my first choice, but OK.

          .gridContainer is the parent container for your Fluid layout.  You must use it or it won't work.  What you put inside it is up to you.  Below is an example using semantic  HTML5 tags.

           

          <div class="gridContainer clearfix">

               <header> Your header</header>

               <nav>Your navigation</nav>

               <section>Some content</section>

               <article>Main content</article>

               <aside>Secondary main content</aside>

              <section>Some content</section>

             <footer>Your footer</footer>

          <!--end gridContainer--></div>

          • 2. Re: Right way to create a fluid page
            bob.gee Level 1

            Nancy.... thanks for the rapid response. I tried constructing a header but it did not start at the left end of the screen. instead It started somewhere like 400 pix from the left plus it did not go all the way across to the other end. Any idea what am I doing wrong?

            also in your reply, you mention that legacy Fluid Grid layouts feature is Not your first choice. Could you tell me why, and is there a better and easier way to create responsive page. At the moment I am maintaining a Serif Webplus site which I need to make responsive.

             

            Thanks again

            BOB.G

            • 3. Re: Right way to create a fluid page
              Nancy OShea Adobe Community Professional & MVP

              By default, the gridContainer has margins & is centered on larger viewports.

              If you want a 100% width <header>, you must insert it above the gridContainer <div>.  See example:

              Alt-Web :: Fluid Grid Test #4

               

              I use Bootstrap's responsive framework now.  You can do so much more with it.  And Bootstrap is integrated into CC 2015. There is a slight learning curve to using it.  I recommend reading the documentation for it so you understand how to use the various Bootstrap classes for xs, sm, md & lg devices.

               

              Bootstrap in Adobe Dreamweaver CC 2015 - Overview

              https://helpx.adobe.com/dreamweaver/using/bootstrap.html

               

              Bootstrap CC tutorials - how to make & style your web page.

              https://helpx.adobe.com/dreamweaver/how-to/make-style-web-page.html

               

              Bootstrap Tutorials

              http://www.w3schools.com/bootstrap/

               

              Grid Overview

              http://getbootstrap.com/examples/grid/

               

              CSS Overview

              http://getbootstrap.com/css/

               

              Nancy O.

              • 4. Re: Right way to create a fluid page
                bob.gee Level 1

                Nancy.... the Fluid Grid Test example black header is exactly what I am trying to replicate. Please forgive me for being a nuisance but, two question? 1. how do I see the code that produced it (Fluid Grid Test example) and 2. How do you code it so that the header does not scroll when the page is scroll. In Serif Webplus, one can create a panel and configure it to stay fixed when you scroll. I am not sure if Dw have the same thing ?

                 

                Thank for your assistant

                BOB.G

                • 5. Re: Right way to create a fluid page
                  Nancy OShea Adobe Community Professional & MVP

                  I don't know anything about using Serif Webplus.

                  1) To view code, use your browser's View Source feature.

                  2) Fixed headers are the product of CSS position:fixed with an expressed width in %.

                   

                  header {

                       position:fixed;

                       width: 100%;

                       background: #000;

                       color: #FFF;

                  }

                  • 6. Re: Right way to create a fluid page
                    bob.gee Level 1

                    Hi Nancy... thanks for the help so far. I had a look at the various links on bootstrap's responsive framework, but decided to stick with DW until I become more proficient.

                    So... I created a banner above the <header>, tag.... this look good so far, however I want to place a nav tag on the banner so it behave in a responsive manner.

                    Is it possible you could advise/show me how to accomplish this?

                     

                    as usual thanks

                    BOB.G

                    • 7. Re: Right way to create a fluid page
                      Nancy OShea Adobe Community Professional & MVP

                      I think Bootstrap in DW CC 2015 is much better than the (legacy) Fluid Grids for this.

                       

                      Bootstrap has built-in classes & components for responsive navbars, etc....

                      Bootstrap Case Navigation Bar

                       

                      FGLayouts do not have components for responsive navbars.  So you're going to have to manually code or find a 3rd party menu system that will work for you.

                       

                      If you want a menu to overlay your Banner, you should put banner image into the <div> background with CSS.

                       

                      Nancy O.

                      • 8. Re: Right way to create a fluid page
                        bob.gee Level 1

                        Ok.... I like what I see!!!! I think I will use bootstrap's responsive framework instead ..... when I was younger, I was once  told, "don't re-invent the wheels, use it" so YES! you have converted me.

                        I am now going to look around the web to see how to get started using bootstrap's responsive framework, so please, stay tuned...

                         

                         

                         

                        THANKS..

                        bob.g

                        • 9. Re: Right way to create a fluid page
                          bob.gee Level 1

                          I had a look at the following link, but could no see any examples/templates involving sliders. Does that mean the framework doesn't support them?  http://getbootstrap.com/getting-started/#template

                          • 10. Re: Right way to create a fluid page
                            osgood_ Level 8

                            bob.gee wrote:

                             

                            I had a look at the following link, but could no see any examples/templates involving sliders. Does that mean the framework doesn't support them?  http://getbootstrap.com/getting-started/#template

                             

                            Bootstrap has a carousel slider. Google it or see the example at w3c schools which you can also find by googling

                            • 12. Re: Right way to create a fluid page
                              bob.gee Level 1
                              
                              

                              Hi Nancy... I managed to create/copy a navigation bar... did some textual modification/added some options, but not sure how to change the background colour. From my google investigation, it seems as if I need to write some form of css file. couple of questions if you don't mind..

                               

                              1 I suppose the file should be place with all the accompanying files but how do I start it?

                              2 how do you attach a text file in this forum, as you can see I have to copy all the code?

                              3 how do I acknowledge your assistant ie what's the procedure?

                              4 this  <style type="text/css">

                                  body{

                                      padding-top: 70px;

                                  }

                              </style> in the code, can you sorta tell me what its doing?

                               

                               

                              <!DOCTYPE html>
                              <html lang="en">
                              <head>
                              <meta charset="UTF-8">
                              <title>Newman Catholic College</title>
                              <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
                              <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
                              <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
                              <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

                               

                              <style type="text/css">
                                  body{
                                      padding-top: 70px;
                                  }
                              </style>

                               

                              /head>
                              <body>
                              <div class="container">
                                  <nav role="navigation" class="navbar navbar-inverse navbar-fixed-top">
                                      <!-- Brand and toggle get grouped for better mobile display -->
                                      <div class="navbar-header">
                                          <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
                                              <span class="sr-only">Toggle navigation</span>
                                              <span class="icon-bar"></span>
                                              <span class="icon-bar"></span>
                                              <span class="icon-bar"></span>
                                          </button>
                                      </div>
                                      <!-- Collection of nav links, forms, and other content for toggling -->
                                      <div id="navbarCollapse" class="collapse navbar-collapse">
                                          <ul class="nav navbar-nav">
                                              <li class="active"><a href="#">HOME</a></li>
                                              <li><a href="#">INFORMATION</a></li>
                                              <li><a href="#">LATEST NEWS</a></li>
                                              <li><a href="#">SCHOOL ETHOS</a></li>
                                              <li><a href="#">CURRICULUM</a></li>
                                              <li><a href="#">SIXTH FORM</a></li>
                                              <li><a href="#">WORK READY</a></li>
                                              <li><a href="#">EXTENDED ACTIVITIES</a></li>
                                              <li class="dropdown">
                                                  <a data-toggle="dropdown" class="dropdown-toggle" href="#">MORE <b class="caret"></b></a>
                                                  <ul role="menu" class="dropdown-menu">
                                                      <li><a href="#">Inbox</a></li>
                                                      <li><a href="#">Drafts</a></li>
                                                      <li><a href="#">Sent Items</a></li>
                                                      <li class="divider"></li>
                                                      <li><a href="#">Trash</a></li>
                                                  </ul>
                                              </li>
                                          </ul>
                                          <form role="search" class="navbar-form navbar-left">
                                              <div class="form-group">
                                                  <input type="text" placeholder="Search" class="form-control">
                                              </div>
                                          </form>
                                      </div>
                                  </nav>
                              </div>
                              </body>
                              </html>                                    

                               

                              ThanK BOB.G

                              • 13. Re: Right way to create a fluid page
                                Nancy OShea Adobe Community Professional & MVP

                                1. I find it's best to create a new CSS file and paste all overriding Bootstrap styles into it.  File > New > Blank > CSS.  Name it something useful like custom.css.  Add a link to it below the Bootstrap.min.css files.

                                 

                                <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

                                <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

                                <link rel="stylesheet" href="CUSTOM.CSS">

                                • 14. Re: Right way to create a fluid page
                                  Nancy OShea Adobe Community Professional & MVP

                                  2. This forum doesn't accept attached files.  Pasting code or a link to your online page is the best procedure.

                                  3. Use the Forum Like button to acknowledge a helpful reply.  Only one correct answer is possible per thread.  Or start a new discussion.

                                   

                                  4 this  <style type="text/css">

                                      body{

                                          padding-top: 70px;

                                      }

                                  </style> in the code, can you sorta tell me what its doing?

                                   

                                  Yes.  Your navbar is fixed to the top of the screen.  That style adds 70px of top padding to your page to offset the navbar.  Without it, your page content would appear behind the fixed navbar.

                                   

                                  Nancy O.

                                  • 15. Re: Right way to create a fluid page
                                    bob.gee Level 1

                                    Nancy... Thanks for this! I'll try it today..