Member Avatar for sneixum

hello..
newbie want to ask.. :)
how to make floating ads with flash or image content in the top and also in the bottom of the website screen? when website page is scrolled, the ads will not move from their place, not even a bit..
you know i'ts hard to explain, for the real example go to this website..
could it be done only with CSS or also need javascript?
because i've tried with only CSS but the flash content wont be centered..
sorry for my bad english and thanks for the help..

  • 4 Contributors
  • 5 Replies
  • 139 Views
  • 5 Years Discussion Span
  • Latest Post Latest Post by shiqar

Dani AI

Generated

was right that CSS fixed positioning is the simplest solution, and correctly flagged historic IE problems. Because this thread is old, a key update: Flash-based creatives are no longer reliable (Adobe ended Flash Player support); use HTML5/PNG/SVG/video instead. The recipe below gives a modern, cross‑browser approach, plus a tiny JS fallback for legacy browsers and a few practical tips missing from the original replies.

Example HTML/CSS (centers a fixed top or bottom bar and keeps it above page content):

<div class="floating-ad top">
  <div class="ad-inner">
    <!-- replace with HTML5 creative or an <img> -->
    <img src="/ads/top-ad.jpg" alt="Ad">
  </div>
  <button class="ad-close">x</button>
</div>
.floating-ad{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  z-index:99999;
  pointer-events:auto;
}
.floating-ad.top { top:10px; }
.floating-ad.bottom { bottom:10px; }
.ad-inner{ max-width:960px; width:90%; box-sizing:border-box; }
.ad-close{ position:absolute; right:6px; top:6px; }
@media (max-width:480px){ .floating-ad{ display:none; } }

Tiny JS fallback for browsers without true position:fixed (IE6-era): detect support, and if missing switch the element to position:absolute and update top on scroll. This emulates fixed placement without forcing modern layout engines.

Practical notes: set a high z-index so the ad sits above content; make floating ads dismissible and hide them on small screens; avoid Flash—if legacy Flash must be used, ensure the embed uses wmode="opaque"/"transparent" so stacking and centering behave, but plan to convert to HTML5. For reference on CSS position behavior see MDN: position. For Flash deprecation details see Adobe Flash Player EOL.

Recommended Answers

All 5 Replies

Member Avatar for macneato

Hi,

This is rather simple to do...

#adTop {
left:0;
position:fixed;
text-align:center;
top:0;
width:100%;
}

Then just add the following inbetween your body tags

<div id="adTop"><img src="images/myad.jpg" alt="Ad here"/></div>
Member Avatar for selvaganapathy

Hi macneato!

Thats right!!..

but

position:fixed;

is not work in IE6...

Edited by selvaganapathy because: n/a
Member Avatar for macneato

Welcome to IE, what does work in IE 6.

Javascript

Member Avatar for shiqar

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.