Author Topic: Float Graphics Over Background  (Read 14307 times)

Offline krmidas

  • Full Member
  • ***
  • Posts: 91
    • The Tom Keramidas Climatological Experience
Float Graphics Over Background
« on: July 22, 2012, 05:14:03 PM »
To avoid running out of the background cloud image when I scroll the page, I've revised a bit of the html. When you scroll my page, the clouds stay stationary, and the graphics float over it. You can look at my site to see if you like it:
http://http://krmidas.home.comcast.net/~krmidas/cumulus/index.htm

If you do, go into each of the "T.htm" files and do the following:

find the line (usually towards the top) that says: <div id="bg_clouds">

and replace it with:

<body style="background-image: url(http://krmidas.home.comcast.net/~krmida ... clouds.jpg); background-attachment: fixed;"> replacing the url with your full path to the "bg_clouds.jpg" file.

As always, make a copy of the "T.htm" file and put it in a "safe" folder before changing it. If something goes wrong, you can always drag the original back to your web folder.

-Tom
« Last Edit: December 31, 1969, 06:00:00 PM by Guest »
Tom Keramidas, Lake Zurich, IL, USA

Offline Mr.Meteo

  • Administrator
  • Hero Member
  • *****
  • Posts: 1120
    • http://www.meteostours.ca
Re: Float Graphics Over Background
« Reply #1 on: July 22, 2012, 05:42:26 PM »
Hi Tom,

I must admit that this is pretty!

I haven't play with fixed before! But if you want it to all pages, go to style.css file
and found #bg_clouds (line #20) and put:

background-attachment:fixed;

just after .....no-repeat;

And all pages will scroll!

Regards,
Jacques
« Last Edit: December 31, 1969, 06:00:00 PM by Guest »
Please, consider supporting this site 

Offline krmidas

  • Full Member
  • ***
  • Posts: 91
    • The Tom Keramidas Climatological Experience
Re: Float Graphics Over Background
« Reply #2 on: July 22, 2012, 05:49:54 PM »
That's a more elegant (and quicker) fix than my method!
« Last Edit: December 31, 1969, 06:00:00 PM by Guest »
Tom Keramidas, Lake Zurich, IL, USA

Offline Mr.Meteo

  • Administrator
  • Hero Member
  • *****
  • Posts: 1120
    • http://www.meteostours.ca
Re: Float Graphics Over Background
« Reply #3 on: July 22, 2012, 05:52:29 PM »
Tom,

We allways have to find a way to spread (your) good idea as fast as it's possible!! :D  :D

Thanks Tom! :ugeek:
« Last Edit: December 31, 1969, 06:00:00 PM by Guest »
Please, consider supporting this site 

Offline virusdunil

  • Jr. Member
  • **
  • Posts: 24
    • http://www.meteohebertville.com
Re: Float Graphics Over Background
« Reply #4 on: July 22, 2012, 08:21:00 PM »
Ive modded mine too :mrgreen:  i like it better this way ;)

thanks for the hint...
« Last Edit: December 31, 1969, 06:00:00 PM by Guest »
Station Meteo:National Geographic Fine Offset)
Logiciel:Cumulus et Weather Display
Mon site: http://http://www.meteohebertville.com

Offline avoorpool

  • Sr. Member
  • ****
  • Posts: 372
    • http://pickeringweather.ca
Re: Float Graphics Over Background
« Reply #5 on: July 23, 2012, 01:09:48 AM »
Thanks Tom for your idea!!
Very COOL..!!

Changed it, HOWEVER one addition I'd like to make.  :D
The page bottom (for each page) now has a sharp-line between text area and information (which was a smooth color transition before changing it to "fixed".
Jacques....??
How can I change this, so the background is more "smooth" without this line....???

Thanks,

Arthur
« Last Edit: December 31, 1969, 06:00:00 PM by Guest »

Offline krmidas

  • Full Member
  • ***
  • Posts: 91
    • The Tom Keramidas Climatological Experience
Re: Float Graphics Over Background
« Reply #6 on: July 23, 2012, 10:43:26 AM »
Glancing at your page source, and comparing it to my htm file, it seems like you have a lot of stuff going on at the bottom of the page that is displacing the bg_clouds file.

The dividing line between the clouds image and the blue background seems to be in the middle of your footer, so if it were me I would start moving some of the formatting commands around to see if that helps. Since I have a very limited knowledge of how to work on the .htm files, I tend to work on a "trial and error" basis.

Perhaps Jacques can give more specific advice...
« Last Edit: December 31, 1969, 06:00:00 PM by Guest »
Tom Keramidas, Lake Zurich, IL, USA

Offline Mr.Meteo

  • Administrator
  • Hero Member
  • *****
  • Posts: 1120
    • http://www.meteostours.ca
Re: Float Graphics Over Background
« Reply #7 on: July 23, 2012, 11:34:14 AM »
Hi Arthur,

First thing, do I have to say that your page contain 45 errors? (You know how to validate
your page now!!) and I wasn't the only one who tell you about that! :oops:

Line #68: you've stripped a <tr>  (just before Temperature and humidity title)

Line #141: you've stripped a </tr>  (just before Rainfall title)

Line #325: Tou're using again script instead of script type="text/javascript"

Line #338 and #357 you forgot trailing />  at img end

in all <a href="..." & is not permit, you have to replace it with &amp;

Then, correct you page and maybe it will be ok!
If no, probably a javascript problem and I'll have to find you a snippet for that

Arthur, the more you add script from elsewhere, the more you need a "perfect" page!
You're playing in "professional playground" now, you MUST be compilant!


Jacques
« Last Edit: December 31, 1969, 06:00:00 PM by Guest »
Please, consider supporting this site 

Offline avoorpool

  • Sr. Member
  • ****
  • Posts: 372
    • http://pickeringweather.ca
Re: Float Graphics Over Background
« Reply #8 on: July 23, 2012, 01:00:28 PM »
Hi Jacques,

I'm well aware of some errors, however I'm also VERY cautious to correct certain items, since I've seen it often go from better to worse...  :shock:
The tables disapperared suddenly, or I went from 10 to suddenly 65 errors, just by adding  ">".
Anyhow, I'm now back to13 errors, and they are practicaly ALL the same......and I can't figure out what's wrong here, since it hasn't changed in the original template (see attachement...)
Maybe some advise...  :D

Thanks,

Arthur
« Last Edit: December 31, 1969, 06:00:00 PM by Guest »

Offline Mr.Meteo

  • Administrator
  • Hero Member
  • *****
  • Posts: 1120
    • http://www.meteostours.ca
Re: Float Graphics Over Background
« Reply #9 on: July 23, 2012, 01:36:53 PM »
Hi Arthur,

Ahhhhh, those errors... many times errors are not in the line where validator
pointed, but just line before!!!  :evil:  (to complicate things  ;) )

Then, in line 70, there is a missing </tr>

For clouds background, try this:

document.getElementById("bg_clouds").style.height = document.getElementById("bg_clouds").clientHeight +  200 + 'px';

It MUST be inserted just BEFORE last closing </script>
(You could have to play with number 200)

Jacques
« Last Edit: December 31, 1969, 06:00:00 PM by Guest »
Please, consider supporting this site 

Offline avoorpool

  • Sr. Member
  • ****
  • Posts: 372
    • http://pickeringweather.ca
Re: Float Graphics Over Background
« Reply #10 on: July 23, 2012, 02:51:13 PM »
Hi Jacques,

Yesssssssssssssssssssssssssssssssssssssssssssss  :D
See attachment!!
Thanks for your help!!!!!!!!!!!
A few more pages to go, however, many of them have similar errors as found in IndexT.

However, the BIG annoyance still is the Graph Page (see corresponding thread).

I'll try the page-bottom adjustment a little later.

Cheers,

Arthur
« Last Edit: December 31, 1969, 06:00:00 PM by Guest »

Offline virusdunil

  • Jr. Member
  • **
  • Posts: 24
    • http://www.meteohebertville.com
Re: Float Graphics Over Background
« Reply #11 on: July 23, 2012, 02:55:37 PM »
a happy camper hehehe...have you seen my gauges page ?
http://http://www.meteohebertville.com/gauges-ss.html

thanks again ;)
« Last Edit: December 31, 1969, 06:00:00 PM by Guest »
Station Meteo:National Geographic Fine Offset)
Logiciel:Cumulus et Weather Display
Mon site: http://http://www.meteohebertville.com

Offline Mr.Meteo

  • Administrator
  • Hero Member
  • *****
  • Posts: 1120
    • http://www.meteostours.ca
Re: Float Graphics Over Background
« Reply #12 on: July 23, 2012, 03:01:55 PM »
Hi Arthur,

Bravoooooooooooo!  :D  :geek:  :D

That lovely green banner!.... Near a trophy!!! :D
And frequently, just 1 thing forgot, is solution for many errors!!

A little thing... when I check your page with FireBug, I see that his not finding
file: http://www.altonaweather.ca/images/header.jpg

This slow a bit your Main page loading.

Then, perfection is at hand touch!!

Bravo Arthur!
Jacques
« Last Edit: December 31, 1969, 06:00:00 PM by Guest »
Please, consider supporting this site 

Offline avoorpool

  • Sr. Member
  • ****
  • Posts: 372
    • http://pickeringweather.ca
Re: Float Graphics Over Background
« Reply #13 on: July 23, 2012, 05:34:35 PM »
Hi Jacques,

I don't have a header.jpg image. Changed this to the panorama image (is that what you mean??).

For now, 85% of the pages have a "green-Stamp"..!!
Except for [forecast] (anxiously waiting for V2 and the [info] page, since all errors are related to the Google-map link and I have to figure out of how to change this.
For now.....satisfied with the result.

Cheers,

Arthur
« Last Edit: December 31, 1969, 06:00:00 PM by Guest »

Offline Mr.Meteo

  • Administrator
  • Hero Member
  • *****
  • Posts: 1120
    • http://www.meteostours.ca
Re: Float Graphics Over Background
« Reply #14 on: July 23, 2012, 06:34:22 PM »
Hi Arthur,

Quote from: "avoorpool"
I don't have a header.jpg image. Changed this to the panorama image (is that what you mean??).
I don't know, I'm receiving this message:

"NetworkError: 404 Not Found - http://www.altonaweather.ca/images/header.jpg"

Try to duplicate your panorama.jpg image and name it header.jpg
(or other real diffrent image and will see it appear somewhere)

But, job's done!

For bottom blue space, I think (theory) that page is done when script is
executing, (.js is executed after page load) then page lenght for bg_clouds
image is already set... the code I gave you could clear that!

An other good one done!!

Regards,
Jacques
« Last Edit: December 31, 1969, 06:00:00 PM by Guest »
Please, consider supporting this site