Jump to content


Photo
- - - - -

features-slider - background image moving


  • Please log in to reply
21 replies to this topic

#1 oinegue1960

oinegue1960

    Super Member

  • Members
  • 117 posts
  • Framework Version:2.3.5
  • Country: Country Flag

Posted 17 April 2012 - 06:04 PM

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.

#2 MrFent

MrFent

    Super Member

  • Members


  • 239 posts
  • Country: Country Flag

Posted 17 April 2012 - 06:09 PM

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

#3 oinegue1960

oinegue1960

    Super Member

  • Members
  • 117 posts
  • Framework Version:2.3.5
  • Country: Country Flag

Posted 17 April 2012 - 07:06 PM

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.

#4 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 17 April 2012 - 08:50 PM

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

Please Login or Register to see this Hidden Content

I believe you need to change the method of doing this.

#5 oinegue1960

oinegue1960

    Super Member

  • Members
  • 117 posts
  • Framework Version:2.3.5
  • Country: Country Flag

Posted 17 April 2012 - 09:53 PM

@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.

#6 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 18 April 2012 - 02:29 AM

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?

#7 oinegue1960

oinegue1960

    Super Member

  • Members
  • 117 posts
  • Framework Version:2.3.5
  • Country: Country Flag

Posted 20 April 2012 - 10:21 PM

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

Please Login or Register to see this Hidden Content


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

Please Login or Register to see this Hidden Content


Any help is much appreciated

#8 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 21 April 2012 - 03:22 PM

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).

#9 oinegue1960

oinegue1960

    Super Member

  • Members
  • 117 posts
  • Framework Version:2.3.5
  • Country: Country Flag

Posted 21 April 2012 - 08:11 PM

Current secondnav position is correct so I have no idea what CSS I would change.
This is the code:

Please Login or Register to see this Hidden Content


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?

#10 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 22 April 2012 - 03:23 PM

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 #secondnav div.container.section.second-nav.fix ul.secondnav_menu:

    Please Login or Register to see this Hidden Content


    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.

#11 oinegue1960

oinegue1960

    Super Member

  • Members
  • 117 posts
  • Framework Version:2.3.5
  • Country: Country Flag

Posted 22 April 2012 - 04:36 PM

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.

#12 oinegue1960

oinegue1960

    Super Member

  • Members
  • 117 posts
  • Framework Version:2.3.5
  • Country: Country Flag

Posted 22 April 2012 - 05:39 PM

@Catrina

Is this the CSS you suggest to use? (I test it but it seems to produce no effect... probably I did wrong something)

Please Login or Register to see this Hidden Content

Thank you

#13 oinegue1960

oinegue1960

    Super Member

  • Members
  • 117 posts
  • Framework Version:2.3.5
  • Country: Country Flag

Posted 22 April 2012 - 09:32 PM

update.
I found my bad (it doesn't need 'div')

Please Login or Register to see this Hidden Content

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.

#14 Danny

Danny

    Is Awesome!

  • Moderators
  • 16897 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 23 April 2012 - 09:44 AM

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:

Please Login or Register to see this Hidden Content



#15 oinegue1960

oinegue1960

    Super Member

  • Members
  • 117 posts
  • Framework Version:2.3.5
  • Country: Country Flag

Posted 23 April 2012 - 04:39 PM

@ 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 doPosted Image

#16 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 23 April 2012 - 08:00 PM

Okay, I looked and found this:

Please Login or Register to see this Hidden Content

I changed it to:

Please Login or Register to see this Hidden Content

and the background image showed up just as described in your screenshot.

#17 oinegue1960

oinegue1960

    Super Member

  • Members
  • 117 posts
  • Framework Version:2.3.5
  • Country: Country Flag

Posted 23 April 2012 - 09:08 PM

@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.

#18 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 24 April 2012 - 02:48 AM

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

#19 oinegue1960

oinegue1960

    Super Member

  • Members
  • 117 posts
  • Framework Version:2.3.5
  • Country: Country Flag

Posted 24 April 2012 - 02:27 PM

I tried both but it seems to not work
Here's the code

Please Login or Register to see this Hidden Content

I'm sorry but I have to reject. Your help is appreciated anyway.

#20 Jenny

Jenny

    Advocate

  • Unicorn Store Dev

  • 2924 posts
  • LocationWV
  • Country: Country Flag

Posted 24 April 2012 - 03:37 PM

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:

Please Login or Register to see this Hidden Content


... which is the section as a whole. Instead, you should try applying it toward the image itself, like:

Please Login or Register to see this Hidden Content


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:

Please Login or Register to see this Hidden Content


... should just be:

Please Login or Register to see this Hidden Content


Your site design is being thrown off by using incorrect elements. You have several of these in your CSS.