Fitting Slider into Header

**Webiter** · 11-16-2012, 09:42 PM

I have stripped down a Nivo Slider to provide basic picture change functionality with a view to installing it in the page header. I seek to have image changes behind the moving train as indicated at this demo position. I have been trying without success to migrate the Slider code into the header to replace the static sample image. The images are only sample images to help get the thing going.

Any guidance/directions on how to achieve the migration to the functional header would be greatly appreciated.

**ajfmrf** · 11-16-2012, 11:46 PM

Okay ,what is it you want now?

You want the train to be on the top image(the slider) instead of where it is?

It is in the correct location on that image-but now you want something else?

The first thing you need to do is set that page and the slider image to the size you will be needing.So we don't have to make many changes to get that right.In my firefox browser the slider is 100% the width and this makes it much bigger then what was below it.

Lets get on the same page to start with.

**Webiter** · 11-17-2012, 12:06 AM

I note your comments. Seeking to install the slider within the header or put it another way replace the static image with the slider. All the images are in fact the same size. It is just that the slider images are rendering to the full width of the browser.

**ajfmrf** · 11-17-2012, 01:37 AM

You need to be more clear.

Are you going to replace the mountain image with the slider(and it's images)?

**ajfmrf** · 11-17-2012, 01:42 AM

After reading your post again,I see you do indeed want to replace that 'mountains' image with the slider and it's images.

Did you look at the sliders css page???

It again uses the width:100%

you need to fix that like you had to with the other image.look at what was done and make the same adjustment to the size and start there

**Webiter** · 11-17-2012, 10:03 AM

Originally Posted by ajfmrf

After reading your post again,I see you do indeed want to replace that 'mountains' image with the slider and it's images.

Thanks Bud. Yes, replace the mountain image with the slider.

I have gone back to a point in the exercise that I had reached before. That header/banner is now presented at the demo link. I became stuck at that point when whatever I tried failed to get the thing working. When I position the marquee inside the slider it goes wrong. Perhaps I am using the incorrect approach!

**Beverleyh** · 11-17-2012, 11:22 AM

I don't think you need to place it 'inside'. Just use absolute positioning / z-index in the CSS to layer it on top.

**Webiter** · 11-17-2012, 08:07 PM

Originally Posted by Beverleyh

I don't think you need to place it 'inside'. Just use absolute positioning / z-index in the CSS to layer it on top.

Thanks for the pointer. I am not great on positioning but getting a better idea of it. I have moved it along a little by styling a marquee div.... but as it is not properly fixed to a parent I am not controlling the train positioning properly. Any clues to resolve greatly appreciated.

**ajfmrf** · 11-18-2012, 04:24 AM

Here you go Webiter, http://www.web-user.info/test/marquee/demo.html

All of the files are in the full url to make it easier for you to get them.

If this is what you want grab all of the files and let me know so I can delete them on my end

**Webiter** · 11-18-2012, 12:45 PM

Originally Posted by ajfmrf

Here you go Webiter, http://www.web-user.info/test/marquee/demo.html

All of the files are in the full url to make it easier for you to get them.

If this is what you want grab all of the files and let me know so I can delete them on my end

Thanks ajfmrf for your attention and effort. I attach an image to clarify where I would like the marquee code controlling the train to start and finish!