Scrolling Marquee on Top of Picture

  • 1
  • Question
  • Updated 7 years ago
  • Answered
I have a scrolling marquee on my site, just to keep people informed of any updates and I also have a banner style picture which I would like the text to scroll on top of, but everytime I preview it the marqee seems to disappear behind the picture! Is there any way for the scrolling text to be brought forward to be on top of the picture??
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes

Posted 7 years ago

  • 1
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hello Craig,

With CSS you can set the Z level which is the virtual layer coming towards or back into the screen.

With FireBug or Chrome Developer Tools you may be able to see the current banner level and then you set the Z level of the marquee in front of it rather than it sounds at the moment, being behind it.

If you want me to see if I can check this tell me your site URL and I can look.
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Craig I can't see the marquee in either FF or Chrome.
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
Hi does anyone know an answer to this??
Photo of diane

diane

  • 1238 Posts
  • 121 Reply Likes
Hi, Craig,

Gop is right about the z-index. Try this code:



<marquee behavior="scroll" direction="left" style="z-index:200; position: absolute">NEW WEBSITE will be up and running shortly, please stay with us</marquee>

Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Is this what you want Craig?



The marquee scrolls across in real time.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Snap! Sorry Diane, was working on it at the same time. Similar code. <div style="position: absolute; z-index: 0;">

<marquee direction="left" behavior="scroll">NEW WEBSITE will be up and running shortly, please stay with us</marquee>


The marquee text had reappeared after my last enquiry.
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
hi Gop exactly what im looking for cheers I will try this code and see if its what I need!
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
Hi Guys yeah the text is great as its coming over the pink bar only problem is its coming in from the right hand side but not at the starting position of the pink bar its coming in from the edge of the screen which I dont want I only want it scrolling between the pink bar, appearing and disappearing in this space!!
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi Craig,

A cheap and dirty fix is to place this code into a text widget. Adjust the right margin to correspond to the right hand side of the pink margin.

Then by using negative values of the widget upper margin, move the position of the marquee to overlay in the position you wish it to be placed.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
PS: Add this widget as the very first widget on your page. The reason being is if you add or extend any other widget ahead of it, then this will be dropped a little bit with each addition.

You can also add margin settings to your DIV style. You may need an online ruler to match these against your pink section if you don't know the existing margins of this.

margin-right: XXpx;
margin-left: YYpx;