Skip navigation
Hoshi-Y
Currently Being Moderated

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

Jul 24, 2012 10:20 PM

Tags: #cs5 #help #background #dreamweaver

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!

 
Replies
  • Currently Being Moderated
    Jul 25, 2012 12:41 AM   in reply to Hoshi-Y

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 25, 2012 4:26 AM   in reply to osgood_

    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....

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 25, 2012 4:53 AM   in reply to MurraySummers

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 25, 2012 5:35 PM   in reply to Hoshi-Y

    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.

     
    |
    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