Why wont the sidebar listen to me???

by jleavitt13

Posted: 13 years ago 11 replies

WEB DESIGN

Hey Warrior,

I have been helping a friend make a website and it is pretty much done, I just have one page where the size of the sidebar is not working right. The webpage is FAQs

When you click on each question, the answer dropps down thus making the page longer, but the sidebar stays the same size and looks very awkward. Does anyone have a suggestion as to how to make the sidebar height relative to the page length.

Thank you all so much for your time.

#listen #sidebar

LegendLeo 13 years ago

I am totally exhausted today. I will look into this tomorrow. But One more problem I found that if you expand all FAQ's the background didn't repeat itself and shows the white color at the bottom. Do fix this as well.
Thanks
- Thanks
- 1 reply
Signature

Google +1 Vote Service | Get Google News Site Today
Angry Birds Golden Eggs | [Free] Premium Headers Templates
{{ DiscussionBoard.errors[4170618].message }}
- jleavitt13 13 years ago
  
  Thanks so much for putting it on your to-do list. I guess I had not even thought about the background repeating because this is the only page that goes beyond the background image. Thanks for catching that!
  
  I cant wait to hear what you have to say tomorrow Leo, cause I am stumped on this sidebar thing.
  
  Thanks
  
  {{ DiscussionBoard.errors[4170637].message }}
serentripity 13 years ago

I'm rather new to the whole javascript/jQuery thing, but I would use something like:

function resize(){
$('#sidebar').css('height', $('#mainContent').height());
}
);

to resize the sidebar whenever they click a question link.

Hope that helps
- Thanks
- 1 reply
{{ DiscussionBoard.errors[4170817].message }}
- jleavitt13 13 years ago
  
  Where would I put this code, is the style.css file? I tried putting it in there, and tried switching out mainContent with container, as well as content and it did not seem to work. But thank you so much for the suggestion.
  
  And please let me know if there is a different place I should be placing the code
  
  Thanks
  
  1 reply
  
  {{ DiscussionBoard.errors[4170995].message }}
  
  serentripity 13 years ago
  
  Oh, sorry! First, replace "#mainContent" with whatever you've named the white background div.
  
  Put this code in an existing js file, or within the <script> tag in your html, and add onclick="resize()" to each of the FAQ links.
  
  Thanks
  
  {{ DiscussionBoard.errors[4171186].message }}
projectrobot 13 years ago

Hi jleavit, maybe try using a strip of background on your main container. the strip of background image will contain the white left content and the brown sidebar. try checking this out learnwebcode.com/demos/two-column-css-layout-template/ . not sure if im allowed to post link but copy paste that to see what i mean. Since you are using the sidebar all through your pages, use a horizontal strip of background image. that way even if the content is 10x higher, the brown sidebar goes along with it. hope this helps a bit
- [ 1 ] Thanks
Signature

Forex pays my rent, car and shopping. Simple and Easy Money Making Forex Web App ♥ Find out Here ♥
{{ DiscussionBoard.errors[4171493].message }}
Istvan Horvath 13 years ago

I have never seen this issue solved without re-working the design of the theme and (as projectrobot pointed out) using a bg image on the right of the main container.
- Thanks
Signature
{{ DiscussionBoard.errors[4174490].message }}
serentripity 13 years ago

Feel free to PM me for help if you have any trouble getting it to work
- Thanks
- 1 reply
{{ DiscussionBoard.errors[4175616].message }}
- jleavitt13 13 years ago
  
  Thanks everyone! I got it figured out. I used the method of adding a repeating image to the background relative to the size of the content area.
  
  Thanks
  
  1 reply
  
  {{ DiscussionBoard.errors[4176492].message }}
  
  serentripity 13 years ago
  
  Well done!
  
  Thanks
  
  {{ DiscussionBoard.errors[4176499].message }}
LegendLeo 13 years ago

glad you got the solution quickly.
- Thanks
Signature

Google +1 Vote Service | Get Google News Site Today
Angry Birds Golden Eggs | [Free] Premium Headers Templates
{{ DiscussionBoard.errors[4177147].message }}