HighDots Forums  

Help for code covering ads

Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)


Discuss Help for code covering ads in the Cascading Style Sheets forum.



Reply
 
Thread Tools Display Modes
  #1  
Old   
\
 
Posts: n/a

Default Help for code covering ads - 01-10-2005 , 02:33 PM






Hi...I found your group on the search engine...First you have to know
that I'm on a webtv unit.....I am really
desperate.. I'm not much on tech terms as most of my pages are found and
reworked codes to do what I need....my problem is I am moving my pages
from an ad free account to one that has ads as the add free account T/L2
is closing down this year and I have to move my codes to 250free account
til I can afford an upgade
ANWAY.....I use the <div style code to place my images and bg just
where I want them.....but they now cover the top and bottom ads which is
a no no
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....without
changing all the numbers....I tried changing numbers and really screwed
somethings up....luckly it was ccp on a testbed....I would really
appreciate any and all suggestions
Sorry about the long details....here's one of my troubled pages.....some
puters say it's ok on there puter but on the webtv all the ads are
covered and down into the middle of the page

http://kathypolo.250free.com/FUN-WITH-MUSIC.html

Thank you JUDY


Reply With Quote
  #2  
Old   
Chris Beall
 
Posts: n/a

Default Re: Help for code covering ads - 01-10-2005 , 08:35 PM






(*_*) wrote:

Quote:
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="position: 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><font size=7 color=dodgerblue><blackface><limittext
value="WebTV Bug! Please Reload."></blackface></font></noframes>

<div style="position: relative; width: 570px; height: 520px;
background-image: url(http://kathypolo.250free.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.gif"></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">CHANGE MUSIC</font>
<br>

<a href="http://kathypolo.250free.com/odds/P-blues.mid"><img
src="FUN-WITH-MUSIC_files/P-scale.gif" width="100" height="20"></a>
<a href="http://kathypolo.250free.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="lightyellow">DESIGN BY</font>
<br>

<img src="FUN-WITH-MUSIC_files/pianorose.gif" width="450" height="155">
<br>

<a href="http://kathypolo.250free.com/ISLAND-MON.html"><img
src="FUN-WITH-MUSIC_files/next.gif"></a>
<a href="http://kathypolo.250free.com/TRAINS5.html"><img
src="FUN-WITH-MUSIC_files/back.gif"></a>
<a href="http://kathypolo.250free.com/JUDYS-INDEX.html"><img
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



Reply With Quote
  #3  
Old   
\
 
Posts: n/a

Default Re: Help for code covering ads>>CHRIS - 01-13-2005 , 12:08 PM



Thank you so much for your response anf info...lke I said ....this old
lady doesn't understand about codes to much but am trying.....I have
started doing as you explained and is working out well....only a few
trip ups but over came them....thank you again for your time and talent
you share JUDY


Reply With Quote
Reply




Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off



Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.