(*_*) wrote:
My question is....is there a code or something I can do to keep my page
below the top and and keep the bottom ad under my page.
Thank you JUDY
JUDY, [Long post warning]
Yes.
Your basic problem is that you have absolutely positioned every element
of your page, i.e. you have tied it to a specific pixel distance from
the top and left edge of the page. This prevents the normal
everybody-gets-in-line flow of HTML elements, where no two elements
would occupy the same physical space. Your absolutely-positioned
elements are "taken out of the normal flow" and positioned, just as you
requested, absolutely. Unfortunately, this does not prevent the normal
flow from occupying the same physical space, so the advertising provided
by your ISP starts, as always, at the top of the page, running under
your stuff. Again, because the absolutely-positioned elements don't
RESERVE space, the trailing ads ignore your stuff as well, and follow
directly upon the leading ads.
Step 1 - Get rid of most of the positioning: statements. Change the
very first one to say "position: relative;" and remove the top: and
left: parameters (that's not intuitive, so I'll explain later). LEAVE
those for the 6 dancers and the piano player alone. DELETE ALL OTHER
'style="positio n: absolute; top: xxx; left: xxx;"' statements. This
will allow most of your elements to remain in the normal flow.
Step 2 - Your page starts with a <center> tag. Leave it there. Later
on you start another <center> ahead of 'CHANGE MUSIC'. That's
redundant, so take it out, along with the </center> tag just beyond it.
That </center> tag is terminating the FIRST <center>, which means the
rest of your elements won't be centered, and I think you want them to
be. Now put a </center> tag just ahead of the <embed>, to close out
centering.
Step 3 - You want your last three elements (Home, Back, and Next) to be
on the same line, so delete the <div> tags around each of them and the
two <br> tags after Home. If the resulting images are not in the order,
left-to-right, that you wanted, then just change their order within the
source file.
Step 4 - You want the ORDER of those same three elements to be reversed
from the order in which they appear in the source file, so move the code
around so they are in the order Next, Back, Home.
This should give you pretty much what you want.
Something to note here. You just made ONE change to the code and
shuffled the order of a couple of sections. Everything else is deletion
of stuff that is getting in your way. That's what happens when you copy
stuff without understanding how it works. If you copy too little, it
won't work and you'll try again, but if you copy too much, there's often
no visible indication... until later when you make a minor change and
everything comes unglued. I made the changes specified above, then
deleted all the residual garbage from the body of your page and here is
all that was left. Compare it to what you have and you'll see what can
be removed.
............... ............... ...............
<body>
<center>
<noframes><fo nt size=7 color=dodgerblu e><blackface><l imittext
value="WebTV Bug! Please Reload."></blackface></font></noframes>
<div style="position : relative; width: 570px; height: 520px;
background-image: url(http://kathypolo.250fr ee.com/odds/hall.jpg);">
<div style="position : absolute; top: 20px; left: 229px;"><img
src="FUN-WITH-MUSIC_files/chan1.gif" height="150"></div>
<div style="position : absolute; top: 290px; left: 50px;"><img
src="FUN-WITH-MUSIC_files/fmdancer.gif" height="86"></div>
<div style="position : absolute; top: 260px; left: 170px;"><img
src="FUN-WITH-MUSIC_files/swdanc.gif" height="75"></div>
<div style="position : absolute; top: 245px; left: 280px;"><img
src="FUN-WITH-MUSIC_files/cirdanc.gif"></div>
<div style="position : absolute; top: 320px; left: 410px;"><img
src="FUN-WITH-MUSIC_files/P-dancers.gif" height="117"></div>
<div style="position : absolute; top: 330px; left: 100px;"><img
src="FUN-WITH-MUSIC_files/ballroomdanc1.g if"></div>
<div style="position : absolute; top: 335px; left: 225px;"><img
src="FUN-WITH-MUSIC_files/P-piano.gif" height="140"></div>
</div>
<br>
<font size="4" color="gold">CH ANGE MUSIC</font>
<br>
<a href="http://kathypolo.250fr ee.com/odds/P-blues.mid"><img
src="FUN-WITH-MUSIC_files/P-scale.gif" width="100" height="20"></a>
<a href="http://kathypolo.250fr ee.com/odds/P-2step.mid"><img
src="FUN-WITH-MUSIC_files/P-scale.gif" width="100" height="20"></a>
<a href="http://www.wtv-zone.com/pbarikmo/piano/carolina.mid">< img
src="FUN-WITH-MUSIC_files/P-scale.gif" width="100" height="20"></a>
<br>
<font size="5" color="lightyel low">DESIGN BY</font>
<br>
<img src="FUN-WITH-MUSIC_files/pianorose.gif" width="450" height="155">
<br>
<a href="http://kathypolo.250fr ee.com/ISLAND-MON.html"><img
src="FUN-WITH-MUSIC_files/next.gif"></a>
<a href="http://kathypolo.250fr ee.com/TRAINS5.html">< img
src="FUN-WITH-MUSIC_files/back.gif"></a>
<a href="http://kathypolo.250fr ee.com/JUDYS-INDEX.html"><im g
src="FUN-WITH-MUSIC_files/home.gif"></a>
</body>
............... ............... ............... ............... ....
OK, what's all that about position: relative back in Step 1? You want
to position the dancers and piano player absolutely WITHIN THE DANCE
HALL, not within the page. So position: absolute is what you want and
the CSS 2 specification says that 'absolute' is with respect to the
containing block, which is defined by your very first <div>. BUT, that
is true ONLY if the containing block is, itself, 'positioned'.
Specifying it as position: relative causes it to become 'positioned' and
thus provides a reference point for the absolutely-positioned dancers;
omitting any top: or left: parameters means that the dance hall's actual
position does not change, i.e. it is still going to follow all those ads.
Those who wish greater enlightenment can read
http://www.w3.org/TR/REC-CSS2/visuren.html#q29. It was news to me.
Finally, may I suggest you search for another place to host your site?
I believe your current ISP wins the prize for Most Intrusive Ads.
Regards,
Chris Beall
