5 Replies Latest reply: Jul 25, 2012 5:35 PM by Nancy O. RSS

    How do I get my background colours to bleed off the edge?

    Hoshi-Y

      I have a website I'm working on here:

       

      http://alex.denipastoraltimes.net.au/

       

      I'm still wokring on the content and I want the colours in the header, navigation, main background and footer to bleed off the edge without the window needing to scroll across like it is now.

      I'm using Dreamweaver CS5 on Mac OSX Leopard.

       

      Thanks for you help!

        • 1. Re: How do I get my background colours to bleed off the edge?
          osgood_ MVP

          First you need to get rid of width: 9999px; from the selector below. Persoanlly I don't know what :before and :after is or does, never seen it before.

           

          h2:before, h2:after {

             content: "";

             position: absolute;

             background: #72AC24;

             top: 0;

             bottom: 0;

             width: 9999px;

          }

           

          As the construction currently stands you'll never get the 'header' or 'navigation' <divs> to bleed to the edge of the browser window because they are contained within the 'container' <div> which you have set at a specific width - 980px. You need to move the 'header' and 'navigation' out of the 'container' <div>

           

          The 'footer' is outside of the container <div> but you have set its width to 980px. Therefore it stops when it reaches that width. You need to put the 'footer' <div> inside  a 'footerWrapper' <div> and then set the 'footer' css to have auto left/right margins - margin: 0 auto;

           

          So your html code looks like:

           

           

          <div id="footerWrapper">

          <!--/ start footer /-->

           

            <div id="footer">

           

              <!--/ start left footer /-->

              <div id="left_footer">Content for  id "left_footer" Goes Here</div>

              <!--/ end left footer /-->

           

              <!--/ start center footer /-->

              <div id="center_footer">Content for  id "center_footer" Goes Here</div>

              <!--/ end center footer /-->

           

              <!--/ start right footer /-->

              <div id="right_footer">Content for  id "right_footer" Goes Here</div>

              <!--/ end right footer /-->

           

            </div>

            <!--/ end footer /-->

            </div><!-- end footerWrapper -->

           

           

          and your css looks like:

           

           

          #footerWrapper {

              background-color: #72AC24

          }

           

          #footer {

              width: 980px;

              display: block;

          padding 20px 13px 0px 19px;

          background-color: #72AC24;

          color: #FFF;

          margin: 0 auto;

          }

           

           

          Repeat the same process for your 'header' and 'navigtion' - wrap them in a parent <divs> or <div> and set thei margin to - margin: 0 auto;

           

          Your closing 'container' tag is in the html as shown below: (I've commeted it as it is currently uncommented)

           

          </div>

            <!--/ end articles /-->

           

            </div><! closing container tag -->

           

           

          BUT you have another closing container </div> directy before the closing </body> tag

           

          </div>

          <!--/ end container /-->

          </body>

          </html>

           

          So you need to sort out which one youre going to be using. If you choose the later one then you'll have to move the 'footer' <div> outside the 'container' <div> if you want it to bleed off.

          • 2. Re: How do I get my background colours to bleed off the edge?
            MurraySummers ACP/MVPs

            The ":before" and ":after" are known as pseudo-elements, along with others like ":first-line", or ":first-letter".

             

            You can read about them here - http://www.w3schools.com/css/css_pseudo_elements.asp

             

            The two you mentioned are used to insert content either before or after the selected element.  In the case of the rule given, I can't imagine what the purpose is....

            • 3. Re: How do I get my background colours to bleed off the edge?
              osgood_ MVP

              Murray *ACP* wrote:

               

              The ":before" and ":after" are known as pseudo-elements, along with others like ":first-line", or ":first-letter".

               

              You can read about them here - http://www.w3schools.com/css/css_pseudo_elements.asp

               

              The two you mentioned are used to insert content either before or after the selected element.  In the case of the rule given, I can't imagine what the purpose is....

               

              Oh good grief..I guess its a cleaner way than inserting an image in the case of before or after but I can't remember all these optional bits.

               

              Thanks for clearing that up Murray

              • 4. Re: How do I get my background colours to bleed off the edge?
                Hoshi-Y Community Member

                Thanks so much for your help! I've got it working the way I need it to now

                It's taken me days to try and figure out how to do this...

                 

                If you refresh the link, I've uploaded the new files. It should be displaying properly now.

                • 5. Re: How do I get my background colours to bleed off the edge?
                  Nancy O. MVP

                  To fix your #footers, try this:

                   

                  #footer {

                  width: 980px;

                  display: block;

                  color: #FFF;

                  margin: 0 auto;

                  overflow:hidden;

                  }

                   

                  #left_footer,

                  #center_footer,

                  #right_footer {

                  float:left;

                  width:31%;

                  margin: 0 1%;

                  border-right:1px dotted #FFF;

                  padding:20px 0 20px 0;

                  }

                  #right_footer {border:none}

                   

                   

                  Nancy O.