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

 
Reply to this topicStart new topic
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?
 
schizo
post Aug 13 2010, 05:55 PM
Post #2


Senior Member
******

Group: Staff Alumni
Posts: 2,435
Joined: Feb 2007
Member No: 506,205



I think you need to add overflow:auto. Your issue sounds like one I had a little while ago, and that's what I did. If it doesn't work, then it's not the same thing.
 
AbbeyMarie
post Aug 13 2010, 06:30 PM
Post #3


Sex, Blood, & RocknRoll
*******

Group: People Staff
Posts: 5,305
Joined: Nov 2007
Member No: 596,480



^That (I always thought if you had a set height you had to set some kind of overflow for it to work?) I really haven't brushed up on CSS like I should.
 
mipadi
post Aug 13 2010, 07:10 PM
Post #4


Senior Member
******

Group: Administrator
Posts: 2,647
Joined: Apr 2008
Member No: 639,265



height: 100% just means that the height of the element will be the same as the height of the containing element, which may or may not be equal to or longer than the height of the entire screen. It might be easier to give a link to the page in question, or at least the entire source code, since the answer may rely on other elements on your page.
 
waccoon
post Aug 15 2010, 01:43 AM
Post #5


We are the cure.
*******

Group: Staff Alumni
Posts: 4,936
Joined: Jan 2004
Member No: 1,456



div#sidebar {
background: url('images/sidebar.png') repeat-y top left;
width: 280px;
height: auto;
padding-bottom: whatever;
}
 
Mikeplyts
post Aug 15 2010, 10:08 AM
Post #6


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

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



^ I see, but unfortunately, my sidebar isn't within another container. It's in the body section, instead of a DIV. And the way I have my markup displayed, I can't just seem to get it within my main DIV.

I bet I could use Javascript to get the height of the main DIV (or body, for that matter) and append it to the CSS of the sidebar DIV. But, that would be a hassle.
 
waccoon
post Aug 15 2010, 01:01 PM
Post #7


We are the cure.
*******

Group: Staff Alumni
Posts: 4,936
Joined: Jan 2004
Member No: 1,456



Can you post the code, please?
 
Mikeplyts
post Aug 15 2010, 05:10 PM
Post #8


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).
 
Mikeplyts
post Aug 16 2010, 06:20 AM
Post #9


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

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



Nope, didn't work either. Anyway, I have to use a strict DOCTYPE because I'm using Cufon for rendering a font and the line-height was a bitch. So, according to their API, line-height wouldn't work without a strict DOCTYPE. Oh well.

Anyway, I kind of just gave up on this. I threw in a little jQuery to fix it.

CODE
$height = $(document).height();
$('#sidebar').css('height', $height);


Not a biggie, so whatever. Y'all can close this.
 

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