Fitting Slider into Header

[Webiter]

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. (http://www.train.webitry.net/demo.html) 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]

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]

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]

You need to be more clear.

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

[ajfmrf]

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]

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. (http://www.train.webitry.net/demo.html) 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]

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]

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]

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]

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!

[Beverleyh]

That's great - thank you for putting that together ajfmrf.

The CSS provided is very logical Webiter so try changing the position of the marquee div to suit your needs.

Try setting the wrapper to have relative positioning as this will allow you to position the elements inside with absolute positioning: http://css-tricks.com/absolute-positioning-inside-relative-positioning/
(placement should become a bit clearer for you then)

It also might be a good idea to match the marquee width to the overall wrapper width.

[Webiter]

That's great - thank you for putting that together ajfmrf.

The CSS provided is very logical Webiter so try changing the position of the marquee div to suit your needs.

Try setting the wrapper to have relative positioning as this will allow you to position the elements inside with absolute positioning: http://css-tricks.com/absolute-positioning-inside-relative-positioning/
(placement should become a bit clearer for you then)

It also might be a good idea to match the marquee width to the overall wrapper width.

Thanks Beverleyh and ajfmrf for your patients. The Relative and Absolute positioning concept is now beginning to have a better meaning for me. Sorry, about making such hard work out of it.

Go raibh míle maith agat go mór

[Webiter]

Oops... just one other thing....

The numbers 123 & 4 appear underneath the slider and they count the picture changes. See at this position. (http://www.train.webitry.net/demo.html)

These are left over from the earlier strip out of the slider code. I cannot find where they are being generated from... in the .js files!

Is it possible to have them removed altogether?

[Beverleyh]

I think the last item in the nivo CSS controls that - try display:none or visibility:hidden