[RESOLVED]Elegant way for a position:fixed div to push down content?

I’m trying to create a system downtime message banner, which is displayed at the top of the page and scrolls with the content. However, I’m wondering if there isn’t a better way to do this than what I have here:

<div style="height: 30px"></div>

<div style="box-sizing: border-box; padding: 8px 15px 8px 15px; color: white; background-color: #eb6666; position: fixed; top: 0px; right: 0; width: 100%; z-index:5;">Please be aware that the system will be not be available between 8am and 5pm tomorrow.</div>

This works, but it does result in an ugly "placeholder" div.

Hi Faize,

From your description, I suppose you want to create a scrolling marquee. If that is the case, I suggest you could use marquee element. You could refer to the following code:

    <script type="text/javascript">
        function slow(ele) {
            ele.scrollAmount = 1;
        }

        function fast(ele) {
            ele.scrollAmount = 5;
        }
    </script>
            <marquee onmouseout="javascript:fast(this);" onmouseover="javascript:slow(this);" direction="left" scrollamount="5" style="box-sizing: border-box; padding: 8px 15px 8px 15px; color: white; background-color: #eb6666; position: fixed; top: 0px; right: 0; width: 100%; z-index: 5;">
                Please be aware that the system will be not be available between 8am and 5pm tomorrow.
            </marquee>

More information, please refer to the following article:
Creating a scrolling marquee
.

Best Regards,
Dillion

Leave a Reply