7 Replies Latest reply on Jul 19, 2015 7:49 PM by marcia_vct

    Page layout issues

    catz803

      Hi

      I am having a few problems with page layout for our family history website. I use page width of 1004 px.

      Issues are:

      1.  Title & image banner are not centred on page e.g. not displaying in line with body of page

      2.  Cemetery page - images are not staying put with text flowing around them

      3.  Newsletter page - image not staying centred

      4.  Contact page - not displaying with text level with image

       

      http://home.vicnet.net.au/~kerangfh/

       

      I would like the site to adjust to be viewed on computer, laptop or tablet but don't know how to do this.

       

      I have probably used incorrect coding for CS6 as I first used a much older version of Dreamweaver. So any help to correct the above issues and improve coding would be appreciated.

      Bev

        • 1. Re: Page layout issues
          marcia_vct Level 1

          Hey there,

           

          You need to use responsive CSS techniques. Here is an introduction: HTML Responsive Web

           

          To each CSS class you can apply an @media rule. Here you can find the documentation: CSS3 @media Rule

           

          Why don't you choose a responsive template to work based on its code? Could be very much easier. There are loads of templates that you can download, for example, here you can find plenty of beautifully free templates: Free HTML5 CSS Website Templates just choose a responsive one. And then you can apply your own fonts using, for example, Google Fonts and/or Font Awesome Icons to make your site look as you wish.

           

          Hope it helps.

          • 2. Re: Page layout issues
            BenPleysier Adobe Community Professional & MVP

            There are too many questions, hence I'll only tackle the cemetery page.

             

            1. Add the units to line 13 of kfhg.css as in 984px

            2. Remove the id's for the images , i.e. #plaque and #mem-gates

            3. Change the style rules for #right-column img to read. If you are redoning the original style rules (i.e. are not overriding the original) then you can omit the first three rules so that you are left with display and margin.

            #right-column img {

                position: static;

                top: 0;

                right:0;

                display: block;

                margin: auto;

            }

            Change the markup so that the images are place where they are supposed to be within the flow of the document. Make sure it reads as

             

            <h2><strong>Cemetery  Gates</strong></h2>
            <p><img src="http://home.vicnet.net.au/~kerangfh/images/cemetery-gate.jpg" alt="cemetery memorial gates" ></p>
            <p>Official opening of the new was held on Sunday 28th May 1967  at 2.15 pm. Officially opened and dedicated by The Hon. Mr Harold V.  STIRLING, M. L. A., in the presence of Chairman of the Cemetery Trust, Mr J. B.  MESSER, members of Trust, Cr K. W. DICKSON (representing the Kerang Borough  Council), Scouts and Guides, and the Kerang Returned Serviceman&rsquo;s &amp;  Citizens Band played Hymns before the ceremony, attended by a large gathering  of residents. In dedicating the gates to the Memory of our Pioneers, Mr  Stirling said, &ldquo;People passing through these gates will pause and realise just  how much the pioneers did for us.&rdquo;</p>
            <p><img src="http://home.vicnet.net.au/~kerangfh/images/gate-dedication.jpg" alt="dedication plaque on cemetery gates"></p>
            <p>Prior to this Kerang had no fitting Memorial to its  pioneers, the Cemetery Trust wanted to construct a new fence and gateway at the  main entrance to the cemetery. The money was raised for the project by public  subscription, the improvements costing $1,250.00 for gates ordered through  Dunstan Engineering $400, the fence $700, and labour $150, the wire was donated  by the Kerang Borough Council.</p>
            
            1 person found this helpful
            • 3. Re: Page layout issues
              Nancy OShea Adobe Community Professional & MVP
              I would like the site to adjust to be viewed on computer, laptop or tablet but don't know how to do this.

              Hi Bev,

              Use Bootstrap's Responsive Framework.  Copy & paste code below into a new, blank document.  Preview in browsers and resize your viewport.

               

              <!doctype html>

              <html>

              <head>

              <meta charset="utf-8">

              <title>Bootstrap Demo</title>

              <meta name="viewport" content="width=device-width, initial-scale=1">

              <meta http-equiv="X-UA-Compatible" content="IE=edge">

              <!--[if lt IE 9]>

              <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

              <![endif]-->

               

              <!--Bootstrap-->

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

               

              <!--Font-Awesome icons-->

              <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

               

               

              <style>

              body {padding-top: 51px }

               

              footer {

                  background: #222;

                  color: #FFF

              }

               

              i {color:red}

               

              </style>

              </head>

              <body>

              <!--begin top nav bar-->

              <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">

              <div class="container-fluid">

              <div class="navbar-header">

              <a class="navbar-brand" href="#"> BRAND NAME or LOGO </a>

              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>

              </div>

              <div class="collapse navbar-collapse" id="myNavbar">

              <ul class="nav navbar-nav navbar-right">

              <li><a href="#"><span class="glyphicon glyphicon-comment"></span> MENU 1</a></li>

              <li><a href="#"><span class="glyphicon glyphicon-list-alt"></span> MENU 2</a></li>

              <li><a href="#"><span class="glyphicon glyphicon-envelope"></span> MENU 3</a> </li>

              <li><a href="#">MENU 4</a> </li>

              <li><a href="#">MENU 5</a></li>

               

              <!--Site Search -->

              <li class="hidden-sm" style="padding-top:10px">

              <form action="#" method="get" accept-charset="utf-8">

              <div id="custom-search-input">

              <div class="input-group">

              <input name="query" type="text" class="search-query  form-control" placeholder="Site search" required />

              <span class="input-group-btn">

              <button class="btn btn-default" type="submit">

              <span class=" glyphicon glyphicon-search"></span></button></span>

              </div>

              </div>

              </form>

              <!--End Search -->

              </li>

              </ul>

              </div>

              </div>

              <!--end top nav-->

              </nav>

               

              <div class="container">

              <div class="jumbotron">

              <h1>Bootstrap 2 column layout</h1>

              <p>div class col-sm-6</p>

              </div>

               

               

              <div class="row">

              <!--basic 2 col layout-->

              <div class="col-sm-6">

              <h3>Heading 3</h3>

              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Mauris vitae libero lacus, vel hendrerit nisi!  Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus.  Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus.  Aenean tristique enim ut ante dignissim.</p>

              <button class="btn btn-info" role="button" data-toggle="collapse" data-target="#details1">CLICK ME! <span class="glyphicon glyphicon-plus"></span></button>

               

              <div id="details1" class="collapse">

              Some more text goes here...

              Some more text goes here...

              Some more text goes here...

              Some more text goes here...

              </div>

              </div>

              <div class="col-sm-6">

              <h3>Heading 3</h3>

              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Mauris vitae libero lacus, vel hendrerit nisi!  Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus.  Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus.  Aenean tristique enim ut ante dignissim.</p>

              <a href="#" class="btn btn-primary" role="button">MORE<span class="glyphicon glyphicon-chevron-right"></span></a>

              </div>

              <div class="col-sm-6">

              <h3>Heading 3</h3>

              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Mauris vitae libero lacus, vel hendrerit nisi!  Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus.  Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus.  Aenean tristique enim ut ante dignissim.</p>

              <a href="#" class="btn btn-primary" role="button">MORE<span class="glyphicon glyphicon-chevron-right"></span></a>

              </div>

               

              <div class="col-sm-6">

              <h3>Heading 3</h3>

              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Mauris vitae libero lacus, vel hendrerit nisi!  Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus.  Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus.  Aenean tristique enim ut ante dignissim.</p>

              <a href="#" class="btn btn-default" role="button">DOWNLOAD PDF <i class="fa fa-file-pdf-o"></i>

              </a>

              <p> </p>

               

              </div>

              </div>

              </div>

              <div class="clearfix"></div>

               

              <footer class="row">

              <div class="well-lg">

              <div class="col-sm-6 col-md-3">

              <p>Your footer blah, blah, blah...</p>

              </div>

              <div class="col-sm-6 col-md-3">

              <p>Your footer blah, blah, blah...</p>

              <p>More text.</p>

              </div>

              <div class="col-sm-6 col-md-3">

              <p>Your footer blah, blah, blah...</p>

              <p>More text.</p>

              </div>

              <div class="col-sm-6 col-md-3">

              <p>Your footer blah, blah, blah...</p>

              <p>More text.</p>

              </div>

              </div>

              </footer>

               

              <!--Latest jQuery Core Library-->

              <script src="http://code.jquery.com/jquery-latest.min.js">

              </script>

              <!--Bootstrap-->

              <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

              </body>

              </html>

               

               

              Nancy O.

              1 person found this helpful
              • 4. Re: Page layout issues
                catz803 Level 1

                Hi Nancy

                Thank you for your reply. At the moment I need to learn a bit more about using Bootstrap and experiment.

                Bev

                • 5. Re: Page layout issues
                  catz803 Level 1

                  Hi Marcia & Ben

                  Thank you for your replies. At the moment I need to learn a bit more about using responsive CSS and experiment with Ben's suggestion too.

                  Bev

                  • 6. Re: Page layout issues
                    BenPleysier Adobe Community Professional & MVP

                    @Bev,

                     

                    If you follow the steps that I gave you, you will get what you wanted without having to learn.

                     

                    However, the example that Nancy gave will give a a responsive solution. This is well worth having a look at Bootstrap 3 Tutorial

                    • 7. Re: Page layout issues
                      marcia_vct Level 1

                      You're welcome!

                       

                      Bootstrap is definitely very handy, just it seems a little confusing when you begin to work with it, but you'll get used to it with a little practice.

                       

                      Anyway, I just suggested that you use a template to learn what does what and then you'll feel comfortable about modifying, deleting and adding new styles into your CSS sheets. Having a template it's easier, as the codes are already written, so you just play with them to see how they work.

                       

                      Good luck!