• 0
Sign in to follow this  
Followers 0

features-slider - background image moving

Question

Posted · Report post

Hello, I'm trying to move up the features-slider's background image but any code will move up also the slider. Please what is the right CSS item I would work around to move only the background image? Thanks.

Share this post


Link to post
Share on other sites

21 answers to this question

  • 0

Posted · Report post

Why don't you just use a background image that is cropped exactly how you want?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

That's what I'm doing. Infact the image size is 638x551 and I'll need to place some more objects above the 'ipad' img. Because of that I cannot crop the 'headroom' above the iPad. Firebug displays a 'yellow area' above the background image so there would be more space to move it up.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

You're using the features incorrectly. The background image in a feature slider is the slide itself, not a background behind the slide. Please read http://www.pagelines.com/wiki/How_to_Use_the_Features_Section. I believe you need to change the method of doing this.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

@rangelone maybe I got my misunderstood... wiki means for 'background image' as an image that will be behind the 'whole' features area. (not only the slider area) Am I correct? My approach would be like to give a kind of 'skin' to the slider. (the iPad) Anyway if it results too complicated I'll find another way.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hm, I'm having a hard time visualizing what you're trying to achieve. I feel like I get the idea, but I don't think I'm getting it right. Is there some kind of example on the web or in a mock-up that you can show?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Catrina, I'm sorry for this delay but I had a long graphic workaround in order to have a pre-final release of the display. This way I guess it would be a bit easier to get what I mean. At first I followed mrfent's suggestion: to create a bigger slider so to put all images into it. I did it (at least about the slider's size)... it could work but where I move up the 'media content' it tends to hidden at the secondnav bottom. This is the code [code].page-id-494 #feature_slider .fmedia { float: right; margin-top: -30px; margin-right: -40px; overflow: hidden; position: relative; width: 50%; z-index: 0; }[/code] An alternative solution could be to create an image with some graphic objects to overlay the 'media content' transparent area but I guess such image could get the same problem by secondnav bottom margins. At second I'm trying to move 'features footer' to the right side of the display but it disappears because it goes over the page content width. This is the code [code].page-id-494 #feature-footer { position: absolute; width: 30%; right: 0; margin-top: -250px; z-index: 100; }[/code] Any help is much appreciated

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

If the secondnav's bottom is an issue, you can try adjusting its bottom padding and margin so that it doesn't hide the content of your feature slider (or maybe even resize its height).

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Current secondnav position is correct so I have no idea what CSS I would change. This is the code: [code]#secondnav .secondnav_menu { position: absolute; right: -30px; top: -100px; width: 566px; z-index: 99; }[/code] Did you check it by firebug? The 'content' or 'content-pad' showcases like a thin wide blue line... is it correct? Could it be the 'wall' that will prevent the slider-media to move up till to secondnav bottom?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

The section including content/content-pad (#secondnav div.container.section-secondnav.fix ul.secondnav_menu) is the container in which .secondnav_menu is located. That section remains there because .secondnav_menu (the
    list itself) is moved separately, out of the container. If you try moving the container itself, then the feature slider below it can be pushed up. You'll need to adjust the bottom margin of the section using this attribute for [b]#secondnav div.container.section.second-nav.fix ul.secondnav_menu[/b]: [code]margin-bottom: -50px;[/code] This will affect the placement of that image you have between the logo and feature slider, however. That will also need to be re-positioned with CSS.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks Catrina, the image between the logo and feature slider is a png I did it overnight where I would reduce the slider media size, but basically it is just an alternative graphic option as I can include such trasparent layer to every slider in order to add not a new 'box-image'. Now I will roll back to primary option as I guess it would result to me less complicated: just 1 slider media image with all objects included. Hope this 'banal' CSS customization be not out of my reach as it is taking me a lot of wasted time and that's not exactly the reason why I'm using Pagelines. Back as soon as possible.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

@Catrina Is this the CSS you suggest to use? (I test it but it seems to produce no effect... probably I did wrong something) [code]#secondnav div.container.section.second-nav.fix ul.secondnav_menu { margin-bottom: -50px; }[/code] Thank you

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

update. I found my bad (it doesn't need 'div') [code]#secondnav.container.section-secondnav.fix { margin-bottom: -50px; }[/code] Now the code works and the 'fmedia' moves a bit up but unfortunately its top still results hidden by the container-bottom. I tried also by 'z-index: 1' to 'fmedia' but no way.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi, If you're referring to the feature slider image, simply lower the -50px in margin-top to a lower higher value such as -10px like so: [code].page-id-494 #feature_slider .fmedia { float: right; margin-top: -10px; margin-right: -10px; overflow: hidden; position: relative; width: 50%; z-index: 1; }[/code]

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

@ Danny, I already did it but as more I lower the negative value as more the secondnav container will push down the slider. the problem is how to overlap the container... because currently the container will 'hide' the top area of the slider. Please look at this 'mockup' of what I'd like to do[img]http://www.angeloborra.radiowebjay.com/mockup.png[/img]

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Okay, I looked and found this: [code].fset_height, #feature_slider .text-bottom .fmedia .dcol-pad, #feature_slider .text-bottom .feature-pad, #feature_slider .text-none .fmedia .dcol-pad { height: 551px; [/code] I changed it to: [code].fset_height, #feature_slider .text-bottom .fmedia .dcol-pad, #feature_slider .text-bottom .feature-pad, #feature_slider .text-none .fmedia .dcol-pad { height: 551px; padding-top: 25px; }[/code] and the background image showed up just as described in your screenshot.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

@rangelone, padding-top will push down '.fmedia', that's why it results 'visible' but it keep too much space to the secondnav. I guess the problem is how to overlap the secondnav container, or alternatively how to reduce the height size of such container in order to let the slider to move up. If you 'firebug' the page you'll see I hide the header section just to have all objects in one section and theoretically to be able to place them to the desidered position with less obstacles.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

With CSS you can either overlap the secondnav container with z-index or reduce the height with the height attribute (height: #px;).

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I tried both but it seems to not work Here's the code [code]#secondnav.container.section-secondnav.fix { margin-bottom: -50px; height: 5px; z-index: 0; } #features.container.section-features.fix { z-index: 1; }[/code] I'm sorry but I have to reject. Your help is appreciated anyway.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I think this is happening because you're applying the negative top margins (and other elements) to the wrong class. It's being applied to: [code].page-id-494 #feature_slider .fmedia[/code] ... which is the section as a whole. Instead, you should try applying it toward the image itself, like: [code].page-id-494 #feature_slider .fmedia img[/code] I don't know if this will work as you now have too many CSS elements that are overriding each other. Plus some of your elements are incorrect. For example: [code]#features.container.section-features.fix[/code] ... should just be: [code].section-features[/code] Your site design is being thrown off by using incorrect elements. You have several of these in your CSS.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Jenny, some negative values are necessary to place some objects at the desidered position and in several cases it has been done according to forum's experts indications. Said that I tried to make some order and to clean the CSS some way even if I'm not coding expert. According to your suggestion I fixed the codes now in order to not throw off the site design. This is the code I'm currently applying: [code].page-id-494 #boxes .section-boxes { z-index: 1; } .page-id-494 #secondnav .section-secondnav { z-index: 0; } .page-id-494 #features .section-features { z-index: 2; } .page-id-494 .fbox.splash-logo_box { float: left; margin-top: 10px; margin-left: -20px; } .page-id-494 #secondnav .secondnav_menu { width: 566px; position: absolute; top: -90px; right: -30px; } .page-id-494 #feature_slider .fmedia { float: right; margin-right: -10px; padding-top: 25px; overflow: hidden; position: relative; width: 50%; } .page-id-494 #feature_slider .fmedia img { margin-top: -75px; } .page-id-494 .fcontent .ftitle { display: none; } .page-id-494 #feature_slider .fcontent { min-width: 220px; width: 50%; margin-left: -15px; margin-top: 0; overflow: visible; } .page-id-494 #feature-footer { position: absolute; width: 30%; right: -100px; margin-top: -250px; z-index: 100; }[/code] Unfortunately the problem is still there. Thank you

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Probably is not the best way but I solved by changing the order of sections in the template and by tweaking the margin-top of box and secondnav. Maybe the best way should be to workaround the z-index because by horizontally scrolling it seems box like '0', secondnav like '1' and features like '2' but how to correctly tweak CSS is out of my reach at all. Thanks everybody.

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  
Followers 0