SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    May 2008
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Colour problems, could you give me a hand please?

    Hello everyone,

    I'm teach myself CSS and i've hand coded myself a little website to get started with using everything i've learnt, everything is exactly where I want it to be, for now, however, I have no idea how to make the background colour and the left border of the content box go all the way down so it meets the footer at the bottom.

    The site is at spiderbb dot com.

    My CSS code is:

    Code CSS:
    html, body {
    	margin: 0;
    	padding: 0;
    }
     
    body {
    	font-family: "Trebuchet MS", sans-serif;
    	font-size: 12px;
    	color: #666666;
    	background-color: #87ceeb;
    }
     
    #pagecontainer {
    	margin: auto;
    	width: 900px;
    }
     
    #header {
    	height: 150px;
    	background: #b0c4de;
    }
     
    h1 {
    	margin: 0;
    	padding: 0;
    }
     
    #navigation {
    	height: 25px;
    	background: #b0c4de;
    }
     
    #navigation dl {
    	margin: 0;
    	padding: 0;
    }
     
    #navigation dt {
    	float: left;
    	padding: 3px 12px;
    	font-size: 14px;
    }
     
    #navigation a {
    	color: #FFFFFF;
    	text-decoration: none;
    }
     
    #navigation a:hover {
    	text-decoration: underline;
    }
     
    #sidebar {
    	float: right;
    	width: 150px;
    	border-left: solid #b0c4de 1px;
    	border-right: solid #b0c4de 1px;
    	background-color: #add8e6;
    }
     
    #sidebar .padding {
    	padding: 25px;
    }
     
    #sidebar p {
    	margin: 0;
    	padding: 0;
    }
     
    #content {
    	margin-right: 150px;
    	border-left: solid #b0c4de 1px;
    	background-color: #add8e6;
    }
     
    #content .padding {
    	padding: 25px;
    }
     
    #content p {
    	margin: 0;
    	padding: 0;
    }
     
    #footer  {
    	height : 75px;
    	background : #b0c4de;
    	clear: both;
    }

    I must admit I haven't searched, but if I'm honest I've no idea what to search for, also, if there's any improvements to the code I could make please let me know, it would be appreciated.

    Cheers.

  2. #2
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You would have to submit the HTML as well.
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  3. #3
    SitePoint Zealot
    Join Date
    Feb 2009
    Location
    Baton Rouge, LA
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    set the background color on #pagecontainer, which is your parent container for the content area.
    "The browser is your first client" - Quote: Myself
    Please visit me at: vanillacloud.com

  4. #4
    SitePoint Member
    Join Date
    May 2008
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by melissapbr View Post
    set the background color on #pagecontainer, which is your parent container for the content area.
    That worked a treat, thank you. Is that way likely to cause problems at all?

  5. #5
    SitePoint Member
    Join Date
    May 2008
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've just had a play with it, I've sorted the background problem as you know, but the border only extends to the bottom of the content still. I could set a border on either side of the page container instead, but doing this shifts the image off slightly at the top making it look uneven.

    Does that make sense?

  6. #6
    SitePoint Member
    Join Date
    May 2008
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by BlakeAnthony View Post
    You would have to submit the HTML as well.
    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css" media="all">@import "css/style.css";</style>
     
    <title></title>
     
    </head>
     
    <body>
     
    <div id="pagecontainer">
     
    	<div id="header">
     
     
        	<h1><img src="images/headers/lbh_logo.jpg" width="900" height="150" alt="" border="0" /></h1>
     
        </div>
     
        <div id="navigation">
     
        	<dl>
        		<dt><a href="#">Item</a></dt>
            	<dt><a href="#">Item</a></dt>
            	<dt><a href="#">Item</a></dt>
     
            	<dt><a href="#">Item</a></dt>
            	<dt><a href="#">Item</a></dt>
            	<dt><a href="#">Item</a></dt>
                <dt><a href="#">Item</a></dt>
    		</dl>
     
        </div>
     
        <div id="sidebar">
     
     
        	<div class="padding">
            <p>Nostrud dolor nulla, aliquip, ad nisl, nibh augue amet, ut adipiscing nibh exerci diam commodo esse, lobortis dolore praesent. Et dolore, et, iusto quis at consequat commodo eum autem autem blandit sit accumsan exerci enim nulla qui te aliquam facilisis euismod et esse dolore. Ad vel enim aliquip dolore autem te lobortis ut tation velit luptatum iriure aliquam, dolor sed in consectetuer aliquip in exerci. In ullamcorper quis consequat vero eros ad eu velit, ut et nulla ea tation, nulla ad veniam eros consequat et delenit ut dolore sed eros, hendrerit. Hendrerit suscipit velit vel, suscipit ex commodo augue praesent magna.</p>
            </div>
     
        </div>
     
        <div id="content">
     
        	<div class="padding">
            <p>Nostrud dolor nulla, aliquip, ad nisl, nibh augue amet, ut adipiscing nibh exerci diam commodo esse, lobortis dolore praesent. Et dolore, et, iusto quis at consequat commodo eum autem autem blandit sit accumsan exerci enim nulla qui te aliquam facilisis euismod et esse dolore. Ad vel enim aliquip dolore autem te lobortis ut tation velit luptatum iriure aliquam, dolor sed in consectetuer aliquip in exerci. In ullamcorper quis consequat vero eros ad eu velit, ut et nulla ea tation, nulla ad veniam eros consequat et delenit ut dolore sed eros, hendrerit. Hendrerit suscipit velit vel, suscipit ex commodo augue praesent magna.
            </div>
     
        </div>
     
     
        <div id="footer">
        <h1><img src="images/headers/lbh_footer.jpg" width="900" height="75" alt="littleBIGhost footer" border="0" /></h1>
        </div>
     
    </div>
     
    </body>
    </html>

    There we go, that would help wouldn't it

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You would be better off floating the left and right columns and avoiding the IE6 3px jog. then you can set a right border on the left column and a left border on the right column and shift the right column to the left by 1px so each border is on top of each other. That will allow either column to be longer and the border will remain continuous.

    You should put the outer borders on the main container and not on each column.

    Something like this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css" media="all">
    html, body {
        margin: 0;
        padding: 0;
    }
    body {
        font-family: "Trebuchet MS", sans-serif;
        font-size: 12px;
        color: #666666;
        background-color: #87ceeb;
    }
    #pagecontainer {
        margin: auto;
        width: 900px;
        background-color: #add8e6;
        overflow:hidden;
        border-left: solid #b0c4de 1px;
        border-right: solid #b0c4de 1px;
    }
    #header {
        height: 150px;
        background: #b0c4de;
    }
    h1 {
        margin: 0;
        padding: 0;
    }
    #navigation {
        height: 25px;
        background: #b0c4de;
    }
    #navigation dl {
        margin: 0;
        padding: 0;
    }
    #navigation dt {
        float: left;
        padding: 3px 12px;
        font-size: 14px;
    }
    #navigation a {
        color: #FFFFFF;
        text-decoration: none;
    }
    #navigation a:hover {
        text-decoration: underline;
    }
    #sidebar {
        float: right;
        width: 150px;
        border-left: solid #b0c4de 1px;
        background-color: #add8e6;
        position:relative;
        left:-1px;
    }
    #sidebar .padding {
        padding: 25px;
    }
    #sidebar p {
        margin: 0;
        padding: 0;
    }
    #content {
        float:left;
        border-right: solid #b0c4de 1px;
        background-color: #add8e6;
        width:748px;
    }
    #content .padding {
        padding: 25px;
    }
    #content p {
        margin: 0;
        padding: 0;
    }
    #footer {
        height : 75px;
        background : #b0c4de;
        clear: both;
    }
    </style>
    <title></title>
    </head>
    <body>
    <div id="pagecontainer">
        <div id="header">
            <h1><img src="images/headers/lbh_logo.jpg" width="900" height="150" alt="" border="0" /></h1>
        </div>
        <div id="navigation">
            <dl>
                <dt><a href="#">Item</a></dt>
                <dt><a href="#">Item</a></dt>
                <dt><a href="#">Item</a></dt>
                <dt><a href="#">Item</a></dt>
                <dt><a href="#">Item</a></dt>
                <dt><a href="#">Item</a></dt>
                <dt><a href="#">Item</a></dt>
            </dl>
        </div>
        <div id="sidebar">
            <div class="padding">
                <p>Nostrud dolor nulla, aliquip, ad nisl, nibh augue amet, ut adipiscing nibh exerci diam commodo esse, lobortis dolore praesent. Et dolore, et, iusto quis at consequat commodo eum autem autem blandit sit accumsan exerci enim nulla qui te aliquam facilisis a.</p>
            </div>
        </div>
        <div id="content">
            <div class="padding">
                <p>Nostrud dolor nulla, aliquip, ad nisl, nibh augue amet, ut adipiscing nibh exerci diam commodo esse, lobortis dolore praesent. Et dolore, et, iusto quis at consequat commodo eum autem autem blandit sit accumsan exerci enim nulla qui te aliquam facilisis euismod et esse dolore. Ad vel enim aliquip dolore autem te lobortis ut tation velit luptatum iriure aliquam, dolor sed in consectetuer aliquip in exerci. In ullamcorper quis consequat vero eros ad eu velit, ut et nulla ea tation, nulla ad veniam eros consequat et delenit ut dolore sed eros, hendrerit. Hendrerit suscipit velit vel, suscipit ex commodo augue praesent magna.</p>
                <p>Nostrud dolor nulla, aliquip, ad nisl, nibh augue amet, ut adipiscing nibh exerci diam commodo esse, lobortis dolore praesent. Et dolore, et, iusto quis at consequat commodo eum autem autem blandit sit accumsan exerci enim nulla qui te aliquam facilisis euismod et esse dolore. Ad vel enim aliquip dolore autem te lobortis ut tation velit luptatum iriure aliquam, dolor sed in consectetuer aliquip in exerci. In ullamcorper quis consequat vero eros ad eu velit, ut et nulla ea tation, nulla ad veniam eros consequat et delenit ut dolore sed eros, hendrerit. Hendrerit suscipit velit vel, suscipit ex commodo augue praesent magna.</p>
                <p>Nostrud dolor nulla, aliquip, ad nisl, nibh augue amet, ut adipiscing nibh exerci diam commodo esse, lobortis dolore praesent. Et dolore, et, iusto quis at consequat commodo eum autem autem blandit sit accumsan exerci enim nulla qui te aliquam facilisis euismod et esse dolore. Ad vel enim aliquip dolore autem te lobortis ut tation velit luptatum iriure aliquam, dolor sed in consectetuer aliquip in exerci. In ullamcorper quis consequat vero eros ad eu velit, ut et nulla ea tation, nulla ad veniam eros consequat et delenit ut dolore sed eros, hendrerit. Hendrerit suscipit velit vel, suscipit ex commodo augue praesent magna.</p>
                <p>Nostrud dolor nulla, aliquip, ad nisl, nibh augue amet, ut adipiscing nibh exerci diam commodo esse, lobortis dolore praesent. Et dolore, et, iusto quis at consequat commodo eum autem autem blandit sit accumsan exerci enim nulla qui te aliquam facilisis euismod et esse dolore. Ad vel enim aliquip dolore autem te lobortis ut tation velit luptatum iriure aliquam, dolor sed in consectetuer aliquip in exerci. In ullamcorper quis consequat vero eros ad eu velit, ut et nulla ea tation, nulla ad veniam eros consequat et delenit ut dolore sed eros, hendrerit. Hendrerit suscipit velit vel, suscipit ex commodo augue praesent magna.</p>
            </div>
        </div>
        <div id="footer">
            <h1><img src="images/headers/lbh_footer.jpg" width="900" height="75" alt="littleBIGhost footer" border="0" /></h1>
        </div>
    </div>
    </body>
    </html>

  8. #8
    SitePoint Member
    Join Date
    May 2008
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you, that worked 100%, onto the next obstacle...


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
  •