21 replies to this topic

[oinegue1960]

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.

[MrFent]

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

[oinegue1960]

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.

[Rob]

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.

[oinegue1960]

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

[catrina]

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?

[oinegue1960]

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

[catrina]

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

[oinegue1960]

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?

[catrina]

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.

[oinegue1960]

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.

[oinegue1960]

@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

[oinegue1960]

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.

[Danny]

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

[oinegue1960]

@ 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

[Rob]

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.

[oinegue1960]

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

[catrina]

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

[oinegue1960]

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.

[Jenny]

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.