Jump to content
Sign in to follow this  
alexb

Sidebar and Slider Placement

Recommended Posts

alexb

Thanks to those who helped with placing sidebar and slider saide by side...however a couple of minor problems persist that are foxing me! As you will see I've just created a couple of temporary rounded rectangles to gauge where the sidebar and feature slider sit at the moment: www.alexbulgo.com The first issue is trying to get rid of the grey gradient at the bottom of the feature slider...I would have thought this was the feature footer but changing the color of this has no effect. The other issue is placement of image in the slider. Despite the fact that the image is the correct size for the slider it appears to be centred rather than aligned right. I have placed the CSS in custom code rather than in the child theme so there shouldn't be a conflict. The code I have used is: Be glad of any thoughts! Many thanks AB

Share this post


Link to post
Share on other sites
Kate
Okay... we'll break this down. First, for the gradient, you'll need to add this CSS: [code].fcontainer{background:none !important;}[/code] Next, you forgot one width:[code].feature-wrap{width:680px;}[/code] Finally: the image on the right is actually 710px wide (by 377px high, I think). However, you have the featured slider set to 680px on all of the widths. So, 30px is being cut off. You'll have to adjust one or the other for it to fit correctly. BTW: The sidebar only needs to be something like 265px to accommodate your image, I believe ;)

Share this post


Link to post
Share on other sites
alexb
Thanks Kate! The gradient problem worked perfectly. However, I adjusted the width to 710px, but the result was as below: http://alexbulgo.com/ Adding extra width to it simply pushes the slider into the sidebar and doesn't fill the space on the right which is still empty...also, even though the image and slider are now the same width, the image is still not displayed in its entirety..notice the lack of curved edges on the left edge of the slider image. Basically I need a slider image of about 240px, padding of about 10 px then the slider and image to take up the rest of the screen width... Really am stumped! Thanks AB

Share this post


Link to post
Share on other sites
Rob
Alex, If the sidebar is set to a width wider than allowed by your expansion of the feature slider (check settings in Platform > Layout Editor) then it will be pushed below the slider again. The math has to add up including padding allowances. If your site were 1000px wide and your slider is 710, your sidebar can only be 260px wide because of the padding of 15px on either side of the sidebar. The math is 710+260+30=1000. If your sidebar was set to 300, it will be pushed down.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
alexb
Thanks...but that's not the problem I'm having...my problem seems to be the slider is butting up against the sidebar cutting off the left edge of the slider image and not expanding to the right...so I have a sidebar of 240px, and a slider of 710, padding of 30 and then about 100 px of empty space that I cannot fill with image on the right hand side of the slider: www.alexbulgo.com

Share this post


Link to post
Share on other sites
alexb
I guess the mystery is: if I have a global width of 960, with a sidebar of 240, a slider of 710 and combined padding of 30 then the entire width of my site should be filled and then some...instead I have about 100px of blank space to the right of the slider that defies filling!

Share this post


Link to post
Share on other sites
kastelic
I think this inline style on
[code] background: url('http://alexbulgo.com/wp-content/uploads/2011/10/Blue7.jpg') no-repeat top center; [/code] is causing your problem. Perhaps try: [code] .feature-wrap.wcontent { background: url('http://alexbulgo.com/wp-content/uploads/2011/10/Blue7.jpg') no-repeat top right !important; } [/code]

Share this post


Link to post
Share on other sites
alexb
Thanks Jimmy! Worked perfectly! AB

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×