Log In · Register

 

Help Topic Rules and Requirements

For a list of all requirements and guidelines pertaining to posting a new Help topic, please click here.

This Month's Contests | Staff Member of the Month | Hosts Looking for Hostees | Hostees looking for Hosts | BigBookofResources

Submission Guidelines

CSS Sidebar Background
Mikeplyts
post Aug 13 2010, 11:34 AM
Post #1


Mel Blanc was allergic to carrots.
*******

Group: Official Designer
Posts: 6,371
Joined: Aug 2008
Member No: 676,291



So, I'm working on a redesign, and I ran into a little problem. I have a sidebar that has a repeating background. This background is supposed to run down the entire page length. And, I thought it did. Now, I realized if the content is longer than my sidebar, the background gets cut off. Not only that, but on higher resolutions, the background also gets cut off. I usually don't have a CSS problem, but I'm stumped.

Basically, this is what I have:
CODE
div#sidebar {
    background: url('images/sidebar.png') repeat-y top left;
    width: 280px;
    height: 100%;
}


That does kind of like how I want it to, but not quite the result I want. I've tried removing the height property, and that kind of worked as well but still, not good enough. I tried setting the html and body tags to a height of 100%, but no dice.

Any ideas?
 
 
Start new topic
Replies
Mikeplyts
post Aug 15 2010, 05:10 PM
Post #2


Mel Blanc was allergic to carrots.
*******

Group: Official Designer
Posts: 6,371
Joined: Aug 2008
Member No: 676,291



In its most basic form (I don't want to bore you with any other unnecessary codes and I assure you, there really is nothing else affecting the sidebar), here's the CSS and HTML.

CSS:
CODE
html, body {
    background: #000 url('images/background.gif') repeat top left;
}

div#sidebar {
    background: url('images/sidebar.png') top left;
    margin: 0 0;
    width: 390px;
}

div#main {
    margin: 100px 450px;
    width: 740px;
}


HTML:
CODE
    <div id="sidebar">
        <p>Here's some stuff in the sidebar. Usually, it's a lot less than what's in the main content area.</p>
    </div>

    <div id="main">
        <h1>This would be a title.</h1>
        <p>This is some text that, in general, would surpass the height of the sidebar.</p>
    </div>


I'm not really sure what could be the problem. And yes, I also used Michel's advice to not define a height nor a repeat type but that didn't work either. I think it may be because of my DOCTYPE declaration. I'm using a strict DOCTYPE, if that has to do with anything. Oh yeah, everything is valid (I checked using the W3C Validator).
 

Posts in this topic


Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members: