2 Replies Latest reply: Jun 12, 2013 9:30 PM by Smackdangle RSS

    Problems with coloured background in Dreamweaver CS6

    Smackdangle

      Hi,

       

      Probably best if I attach images rather than describe the problem, so that's what I'll do.

       

      As you can see there is a grey bar to the side of the page and it is the same at the bottom when I zoom out. I'm making this website as part of my Uni course and I have to follow a specific template so, please, don't judge me on what it looks like... lol.

       

      Untitled.jpg

      2.jpg

       

      The code for the background section looks like this:

       

      }

      body {

                background-color: #CC9966;

                background-repeat: repeat-y;

      }

       

      I have also coloured the footer.

       


      #footer {




      /*


      colours for text within the


      footer division, ie <p id="footer">


      */





      color: #2D2D2D;


      background-color: #CC9966;

      }

       

      So what do I have to change to make the colour fill the background entirely? I'm an amateur so please don't use too much technical language. I'm sure it's a simple fix, anyway.

       

      Thanks a lot.

        • 1. Re: Problems with coloured background in Dreamweaver CS6
          Preran Adobe Employee

          Hi Smackdangle,

           

          Can you post a link to your site or post your CSS file for us to better understand what could be going wrong?

           

          Thanks,

          Preran

          • 2. Re: Problems with coloured background in Dreamweaver CS6
            Smackdangle Community Member

                      /*

                      WHAT IS THIS FILE?

             

                      This file contains all the simple style properties, such as colours, fonts

                      and backgrounds. Edit this file to customise the look of your content.

                      If you want to change the layout styles (widths, heights, positions)

                      see layout.css.

                      */

             

             

             

             

             

             

             

             

             

             

                      /*

                      |--------------------------------------------------------------------------

                      | General Text Formatting

                      |--------------------------------------------------------------------------

                      */

             

                      html, body {

                                /* setting the default styles all text, inputs and textareas will have (unless specified otherwise) */

                                font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

                                font-size: .85em;

                                background: #E8EBEB url(../images/body-bg.jpg) repeat-x top left;

                                color: #3a3a3a;

                      }

             

             

                      h1 {

                                font-size: 1.5em;

                                font-weight: bold;

                                color: #78AB46;

                                background: #fff;

                                margin: 0 0 .5em 0;

                      }

             

                      h2 {

                                font-weight: bold;

                                padding: 1em 0 1em 0;

                      }

             

                      p {

                                line-height: 150%;

                                padding: 0 0 1em 0;

                      }

             

                      ul {

                                padding: 0 0 0 2em;

                                list-style: disc;

                      }

             

                      ol {

                                padding: 0 0 0 2em;

                                list-style: decimal;

                      }

             

                      li {

                                padding: 0 0 1em 0;

                      }

             

                      strong {

                                font-weight: bold;

                      }

             

                      em {

                                font-style: italic;

                      }

             

                      blockquote {

                                color: #000000;

                                background: #C0D9AF;

                                padding: 1em 1em 0 1em;

                                margin-bottom: 1em;

                                font-style: italic;

                                font-size: 1.2em;

                      }

             

                      #footer {

             

                                /*

                                colours for text within the

                                footer division, ie <p id="footer">

                                */

             

                                color: #2D2D2D;

                                background-color: #CC9966;

                      }

             

                      .screen-reader-only {

             

                                /*

                                This is a special class used to prevent text from

                                being displayed on screen, while still making it visible to

                                screen readers. Use this class if you want to add extra

                                descriptive text for visually impaired users, but don't want

                                that description to be visible for other users.

             

                                For example:

                                <p class="screen-reader-only">Special text for screen readers</p>

                                */

             

                                text-indent: 100%;

                                white-space: nowrap;

                                overflow: hidden;

                                position: absolute;

                                top: 0;

                                left: 0;

                      }

             

             

             

             

             

                      /*

                      |--------------------------------------------------------------------------

                      | Page Links

                      |--------------------------------------------------------------------------

                      */

             

             

                      a:link {

                                color: #07087a;

                                text-decoration: none;

                                background-color: #fff;

                      }

             

                      a:visited {

                                color: #07087a2;

                                background-color: #fff;

                                text-decoration: none;

                      }

             

                      a:hover {

                                text-decoration: underline;

                      }

             

                      a:active {

                                color: #07087a;

                                background-color: #fff;

                      }

             

             

             

             

             

             

             

             

             

             

                      /*

                      |--------------------------------------------------------------------------

                      | Top Navigatin Links

                      |--------------------------------------------------------------------------

             

             

                      TOP NAVIGATION LINKS

                      The following styles control the appearence

                      of the top navigation links, eg.

                      <a class="top-link" href="default.htm">Home</a>

             

             

                      */

             

             

                      a.top-link {

                                /*

                                these styles will apply to ALL links (:link, :visited, :hover and :active) unless overridden

                                */

                                display: block;

                                padding: .7em 0 .7em 0;

                                margin: 0 1.5em 0 0;

                                background: #EEEFEE url(../images/nav-bg.gif) repeat-x top left;

                                color: #07087a;

                                border-bottom: solid .3em #EEEFEE;

                                padding: 0;

                                line-height: 2.5em;

                      }

             

             

                      .top-link:link {

                                /* styles for normal, unvisited links can be set here */

                                /* these styles will override the defaults set for .top-link above */

                                text-decoration: none;

                      }

             

                      .top-link:visited { 

                                /* styles for links once visited can be changed here */

                                /* these styles will override the defaults set for .top-link above */

                                text-decoration: none;

                      }

             

                      .top-link:hover {

                                /* styles for top links when a user hovers over it can be changed here */

                                text-decoration: none;

                                border-bottom: solid .3em #c2c2c2;

                      }

             

                      .top-link:active { 

                                /* Styles for when the link is being clicked can be changed here */

                      }

             

                      .top-link.selected:link, .top-link.selected:visited {

             

                                /* Sets the style of a link that has been selected (ie. has a class of selected)

                                   for example (note the additional class "selected"):

                                          <a class="top-link selected" href="content.htm">Content Page</a>

                                */

             

                                border-bottom: solid .3em #aed637;

                                cursor: default;

                      }

             

             

             

             

             

                      /*

                      |--------------------------------------------------------------------------

                      | Footer Links

                      |--------------------------------------------------------------------------

             

             

                      Change these if you want your footer links to have a

                      different style to other links

             

             

                      */

             

                      #footer a:link {

                                background: #CC9966;

                                color: #E7C6A5;

                      }

             

                      #footer a:visited {

                                background: #CC9966;

                                color: #E7C6A5;

                      }

             

                      #footer a:hover {

                                background: #CC9966;

                                color: #E7C6A5

                      }

             

                      #footer a:active {

                                background: #CC9966;

                                color: #E7C6A5;

                      }

             

             

             

             

             

             

             

             

                      /*

                      |--------------------------------------------------------------------------

                      | Header Colours

                      |--------------------------------------------------------------------------

                      */

             

             

                      #header {

             

                                          /* 

                                          Colours for <div id="header">

                                          See layout.css for layout and size properties

                                          */

             

                                background: #D1EEEE url(../images/header-bg.gif) repeat-x top left;

                                color: #fff;

                      }

             

             

             

                      #nav {

             

                                          /* 

                                          Colours for <ul id="nav">

                                          See layout.css for layout and size properties

                                          */

             

                                background: #EAEAEA url(../images/nav-bg.gif) repeat-x top left;

                                color: #07087a;

                      }

             

             

             

             

             

                      /*

                      |--------------------------------------------------------------------------

                      | Wrapper

                      |--------------------------------------------------------------------------

             

                      This controls the styles for the wrapper div that

                      contains all page elements, ie:

                      <div id="wrapper">

             

                      */

             

                      #wrapper {

                                background: #fff;

                                color: #3a3a3a;

                      }

             

             

             

             

             

             

             

             

             

                      /*

                      |--------------------------------------------------------------------------

                      | Widget Box Colours

                      |--------------------------------------------------------------------------

             

                      Colour styles for widget boxes, ie <li class="widget">

                      See layout.css for layout and size properties

             

                      */

             

                      .widget {

                                background: #C0D9AF;

                                color: #000;

                      }

             

                      .widget-heading {

                                color: #000;

                                background: #C0D9AF;

                                border-top: solid .3em #375852;

                      }

             

             


            /*

            WHAT IS THIS FILE?



            This file contains all the more advanced layout style properties, such as

            widths, heights, spacing and positioning. If you want to change colours,

            backgrounds and fonts, see simple.css.

            */

             

             

             

             

             

             

             

             




            /*

            |--------------------------------------------------------------------------

            | Wrapper

            |--------------------------------------------------------------------------



            This controls the styles for the wrapper div that

            contains all page elements, ie:

            <div id="wrapper">



            */



            #wrapper {


            margin:0 auto;


            min-width: 460px;


            width: 800px;

            }

             

             

             

             

             

             

             

             

             

             


            /*

            |--------------------------------------------------------------------------

            | Header

            |--------------------------------------------------------------------------

            */

             

             


            #header {

            /* 



            This controls the layout of <div id="header">



            If you change the image inside the header,



            make sure you set the "height" property below



            to match the height of the new image







            See simple.css for colour properties



            */




            position: relative;

            margin: 0 0 0 0;

            overflow: hidden;

            width: 800px;

            }


             

             


            #nav {





            /* 



            Layout properties for <ul id="nav">



            See simple.css for colour properties



            */




            display: block;


            padding: 0 0 0 20px;


            list-style: none;


            clear: both;


            font-size: 1.3em;


            height: 2.8em;

            }



            #nav li {


            display: block;


            float: left;


            list-style: none;


            padding: 0;

            }









            /*

            |--------------------------------------------------------------------------

            | Main

            |--------------------------------------------------------------------------

            |

            */



            #main {

            margin: 0 auto;

            position: relative;

            overflow: hidden;

            width: 800px;

            background-color: #FFFFFF;

            }



            #content {


            /*


            Styles for the div thay wraps the main content, eg:



            <div id="content">


            */


            padding: 1.5em 20em 20px 20px;

            }



            #content.full-width {


            /*


            Adding a class of "full-width" to the #content div


            will use these styles, eg.


            <div id="content" class="full-width">


            */


            padding-right: 20px;

            }











            /*

            |--------------------------------------------------------------------------

            | Sidebar

            |--------------------------------------------------------------------------

            */



            #sidebar {




            /*


            Styles for the sidebar wrapper, eg.


            <ul id="sidebar">


            You can probably leave this as is


            */




            width: 15em;


            padding: 6em 20px 0 0;


            float: right;

            }











            /*

            |--------------------------------------------------------------------------

            | Image Alignment Classes

            |--------------------------------------------------------------------------

             

             


            These are used to align images (see the content page example)

            You shouldn't need to change these.

             

             


            */




            .align-right {


            float: right;


            margin: 0 0 1.5em 1em;

            }




            .align-left {


            float: left;


            margin: 0 1em 1em 0;

            }




            .align-centre {


            margin: 0 0 1.5em 0;


            text-align: center;

            }




            .caption {


            font-style: italic;


            text-align: center;

            }
















            /*

            |--------------------------------------------------------------------------

            | Widget Boxes

            |--------------------------------------------------------------------------




            Layout styles for widget boxes, ie <li class="widget">

            See simple.css for colour properties




            */




            .widget {


            margin: 0 0 1em 0;


            list-style: none;


            padding: 0;

            }




            .widget-heading {


            padding: 15px 10px;


            font-size: 1em;


            margin: 0;

            }




            .widget-content {


            padding: 0px 10px 0 10px;

            }




            .photo-gallery {


            list-style: none;


            padding: 0;


            margin: 0;

            }




            .photo-gallery li {


            float: none;


            display: inline;


            padding: 0;

            }




            .photo-gallery li img {


            padding: 0 1em 1em 0;

            }
















            /*

            |--------------------------------------------------------------------------

            | Footer

            |--------------------------------------------------------------------------




            Styles for <p id="footer">




            */




            #footer {


            margin:0 auto;

            }