Skip navigation
Currently Being Moderated

How do I prevent website from scrolling horizontally in Dreamweaver?

Jun 14, 2013 4:03 PM

I have created a website that (although I'm not seeing scrolling on my computer and 2 others across multiple browsers) has a horizontal scroll bar when my client views on her computer. I am having problems troubleshooting since I can't see the problem so clearly. I am a little behind the curve on creating fully responsive sites and am convinced that something I did to make these responsive created the problem. If possible, can anyone take a look at the code for the links and tell me if you see any obvious corrections that I can make in Dreamweaver or to the code to make the pages horizontally stationary with no horizontal scroll bar? Please let me know if you require more information and what that is.

 

Link 1: http://www.impressionsofbeauty.com/

Link 2: http://impressionsofbeauty.com/corporate_indexb.html

 

Any assistance would be greatly appreciated.

 
Replies
  • Currently Being Moderated
    Jun 14, 2013 4:14 PM   in reply to XonoBoom

    Link 1 is most definitely not responsive.  The background image is 1,608px × 900px which is too huge wide to fit on average desktop displays.

     

    Ditto for Link 2.  Your image is 1,440px × 321px.  Again way too huge to fit average displays.

     

    What's your goal with this site?  Do you want a responsive layout that's works in smartphones, tablets and desktops like this?

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

     

    Or do you just want something to fit in average desktops like this:

    http://alt-web.com/TEMPLATES/Basic-1-col-fixed.html

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 14, 2013 4:53 PM   in reply to XonoBoom

    Why did I get THIS when I opened the second link?

    6-14-2013 4-52-01 PM.png

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 15, 2013 10:02 AM   in reply to XonoBoom

    I simply right clicked on images to see their properties. Obviously, you need to crop and optimize images for the web in your graphics editor.  

     

    You have not developed a CSS layout yet so that's where you must begin.

     

    If you have CS6, use the built-in Fluid Grid Layouts feature.  Build Mobile first because that's what everything else is built on.  Then create your Tablet layout and finally your Desktop layout.

     

    CS6 Fluid Grid layouts (17 min video)

    http://tv.adobe.com/watch/learn-dreamweaver-cs6/using-fluid-grid-layou ts/

     

    Creative Cloud 12.2 Fluid Grid Enhancements

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

     

    Step-by-Step tutorial -- Building Fluid Grid Layouts in DW CS6

    http://www.adobe.com/inspire/2012/08/fluid-grid-layouts-dreamweaver-cs 6.html

     

    If you don't have CS6, download and install this free Bootstrap extension from DMX Zone.

    http://www.dmxzone.com/go/21759/dmxzone-bootstrap/

     

    Good luck!

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 16, 2013 9:32 AM   in reply to XonoBoom

    Background-image goes into the body selector of your CSS code.

    http://www.w3schools.com/css/css_background.asp

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 16, 2013 9:39 AM   in reply to XonoBoom

    CSS margins & padding.

    http://www.w3schools.com/css/css_margin.asp

     

    body {

         width: 90%;

         margin: 0 auto

         padding: 0;

         }

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 16, 2013 3:54 PM   in reply to XonoBoom

    Copy & paste this.

     

    body {

         background: #13131 url(IMAGES/fluidbackground.jpg) no-repeat top;

         color: #2F2F2F;

         width: 90%; 

         margin: 0 auto;  /**this is centered**/

         padding: 0;

    }

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 16, 2013 5:07 PM   in reply to XonoBoom

    Your code is messed up.  And you neglected to upload the Bootstrap folder with supporting scripts and CSS code.  You also didn't upload your BG image because it's nowhere to be found.  This is where it should be:

    http://impressionsofbeauty.com/IMAGES/fluidbackground.jpg

     

    Copy & paste this code into a new, blank document.  Save as test.html and try again.

     

    <!doctype html>

    <html>

    <head>

    <meta charset="utf-8">

    <title>HTML5 TEST PAGE</title>

     

    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css" />

     

    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-responsive.css" />

     

    <script src="bootstrap/js/jquery.js"></script>

     

    <script src="bootstrap/js/bootstrap.min.js"></script>

     

    <!--custom web fonts-->

    <link href="bootstrap/css/bootstrap-responsive.css?family=Titillium+Web:400 ,200,200italic|Raleway:400,200|Oswald:400,700.css" rel="stylesheet" type="text/css" />

     

    <link href="css/fluid.css?family=Titillium+Web|400,200,200italic|Raleway|40 0,200|Oswald|400,700.css" rel="stylesheet" type="text/css" />

     

    <style>

    body {

    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;

    font-size: 1em;

    color: #CCC;

    margin: 0;

    padding: 0;

    /**scalable background image**/

    background: #131313 url(IMAGES/fluidbackground.jpg) no-repeat center center fixed;

    /**for Safari,Chrome**/

    -webkit-background-size: cover;

    /**for Firefox**/

    -moz-background-size: cover;

    /**for Opera**/

    -o-background-size: cover;

    /**for other browsers**/

    background-size: cover;

    }

    </style>

     

    </head>

     

    <body>

    <div class="container-fluid">

    <div class="row-fluid">

    <div class="span12">

    <h1>Site Name</h1>

    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>

     

    <h2>Heading 2</h2>

    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>

     

    <h3>Heading 3</h3>

    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>

    <!--end span12--></div>

    <!--end row-fluid--></div>

    <!--end container-fluid--></div>

    </body>

    </html>

     

     

     

    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