SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    Non-Member
    Join Date
    Apr 2007
    Posts
    224
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Background color changes the top & bottom of the page

    I received help on this forum with this one web page (image attached), and was kindly provided with the code below. It it looks like what I wanted, and I can change it around to suit my needs, however, when I change the text background, it changes the top and bottom potions to the same color. in the image attached, you'll see that the text background is black and the top and bottom horizontal margins are black. When I change the background to green the top and bottom portions change to green. These horizontal portions were previously red to match the left column, but now, since I added this code, if i want the background white, which I do, the top and bottom portions will be white. What happened to the red? Did it get squeezed out? Should i provide the entire css file? How can I remedy this? Thanks.


    Code:
    <!--START HTML -->
    
    <div id="content">
            <div id="column1">
            <h1>PROMO1</h1>
            <h2>Company A:</h2> 
            <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
            nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
            volutpat.
            </p> 
            </div>
            <div id="column2">
            <h1>PROMO2</h1>
            <h2>Company B:</h2>
                <p>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam 
                nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
                volutpat.
                </p>
            </div>
            <div id="footer">
                <p> 
                TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT
                TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT
                TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT 
                TEXTTEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT
                TEXT TEXT
                </p>
            </div>
    </div>
    
    <!--END HTML-->
    And then add this to your CSS stylesheet

    Code:
    /* START CSS */
    
    #content {
        float: left;
        width: 420px;
        background-color: #00C;
    }
    #column1 {
           float: left;
           padding: 10px;
           background-color: #CCC;
           width: 190px; 
    }
    #column2 {
           float: left;
           padding: 10px;
           background-color: #C00;
           width: 190px;
    }
    #footer {
           float: left;
           width: 400px;
           padding: 10px;
           background-color: #000; 
           color: #FFF;
    }
    
    /* END CSS */
    Attached Images Attached Images

  2. #2
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't really follow which bits are sposed to be which colour and the HTML you've provided isn't all of what makes up the image you've posted.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •