Weather by You!
Templates and Projects support => Templates and Projects discussion => Topic started by: krmidas 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 (http://krmidas.home.comcast.net/~krmidas/cumulus/images/bg_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
-
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
-
That's a more elegant (and quicker) fix than my method!
-
Tom,
We allways have to find a way to spread (your) good idea as fast as it's possible!! :D :D
Thanks Tom! :ugeek:
-
Ive modded mine too :mrgreen: i like it better this way ;)
thanks for the hint...
-
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
-
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...
-
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 &
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
-
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
-
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
-
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
-
a happy camper hehehe...have you seen my gauges page ?
http://http://www.meteohebertville.com/gauges-ss.html
thanks again ;)
-
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/ (http://www.altonaweather.ca/images/)header.jpg
This slow a bit your Main page loading.
Then, perfection is at hand touch!!
Bravo Arthur!
Jacques
-
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
-
Hi Arthur,
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 (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
-
Hi Jacques,
Why would I bother about the header.jpg image when it doesn't (have to) occur anywhere...??
The Altonaforest website went "green" this aftrnoon...!!
All pages are "passed" .........except for:
[forecast] [Info] and [links], those have many "links" attached and I need a bit more time to figure this out (probably when 1 error is found it will apply to many others....
I'm happy with all the other pages!!
When I implement the string to the bottom of the page, what do I use for capture of the element??
Thanks,
Arthur
-
Hi Arthur,
When I implement the string to the bottom of the page, what do I use for capture of the element??
Sorry, my english is not able to understand that one! :roll:
Jacques
-
Funny :D :D
I think your English is perfect, a lot better than my French :oops:
I would like to keep my "passed" messages for each page (and not to mess them up) that's why I'm a bit careful......
I've attached the bottom of my IndexT page as an example. The only <script> I can find is from the site counter...
Do I implement your suggestion above this??
And like this?
<document.getElementById("bg_clouds").style.height = document.getElementById("bg_clouds").clientHeight + 200 + 'px'; />
Remember, I'm still a "rookie" :) :)
Thanks,
Arthur
-
Hi Arthur,
Sorry, I try often to save some script tags by including JavaScript in others... but not a good
Practice for newbies ;)
Then, just before </body> tag, insert your own script.
<script type="text/javascript">....... </script>
dots are place for command I gave you earlier.
But without <...../> you've added in last post ;)
Sorry on Pad I cut a few
Jacques
-
Hi Jacques,
In terms of text messaging (which I hardly use) I would say: OMG :D :D
This is awesome. Looks "Finished, Perfect…!!!"
Till the "wee-hours" I edited each page to the correct size (I know you like perfect as well ;) and it looks absolutely great (and still has for each page the validation "passed" sign :D :D :D (I never doubted that after implementing your script!!)
Thanks again,
Cheers,
Arthur
-
Nice work! Pages look great!
-
Hi Arthur,
Bravooooooo! a pretty nice job! :D
I see too your "W3C Seal" on each page, as a sign of victory! :D
Hard to be 100% compilant, but so proud to reach it! :D
Cheers,
Jacques
-
HI Jacques,
Not every page is "sealed" yet.............
Need to work on the [links] and [info] pages, and that's going to be difficult.
Those pages have many [links] and these give a lot of errors (altough they are copy/paste from original web addresses.
Do you have a"hint" how to avoid these many errors when using links??
Also the [Forecast] page does not have a "seal", but I don't bother about that too much since a great product (new page) is on the horizon ;)
Cheers,
Arthur
-
Hi Arthur,
For your links page, you could try to "lower" doctype to transitional, to see if it
will accept links with "&". I agree with you that with Strict XHTML 1.1 is :evil:
for links!!!
A thing too, I don't know how you edit your pages, but any (real) soft have the
"Find and Replace" festure. You could Find character "&" and replace it with the
"&". Be safe, do it one at a time, don't use "replace all".
Regards,
Jacques
-
About the editor,ive been using Free coffeecup.Its light,almost complete and free
http://http://www.coffeecup.com/free-editor/
cheers
-
Hi Jacques,
I did change the page into "transitional" but still approx 45 errors are shown.......
I keep working on this one and for sure, I'll "win' the battle in the end :D :D
Cheers,
Arthur
-
Hi Jacques,
Sooooo close to the end (for now).
Struggling for the past few hours with my final page to get validated.
Started qith 41 errors on the [links] page, now back to 7..........
Maybe the "guru" (= you :D ) can have a quick look into the document, since when I change the <div> element in the first part, the entire botoom changed.....Not good.
Also, I'm aware of the <embed problem in html (it's in the copied Wunderground flash image), but don't know how to avoid this with keeping the image....
Thanks very much,
Arthur
-
Hi Arthur,
Your near, just a couple of "&" to change for "&" in line (101) begin with
<a href='http://www.wunderground.com/sports/ML......
When I check you page it said that you have a </div> over
<div class="cont_bot"></div>
</div> <-- THAT ONE IS OVER --- STRIP IT
<!-- content ends --> For WU box, maybe just a <br /> or 2 after it, could do the job
Regards,
Jacques
-
Hi Jacques,
Indeed, nearly there, but the last "nut" is the hardest to crack.... :D
I get crazy :roll: when I constantly see the same error popping up, and I can't figure out where to correct it (Maybe looked at this too long....
It shows the following (see attachement)
I think every element is properly closed.....
Thanks,
Arthur
-
Hi Jacques,
In case you had your windows open some 30 mins ago, you probably heard my yell from 500km away :D :D :D
I was confused with the error messages since they referred to line 11, all the way on the top of the page. (<div id="bg_clouds">, however I figured out I needed 2 more </div> elements, just before the final </body> element in the bottom, so that closed this chapter for getting validated. A "passed-green" website, all pages "stamped"... :lol: :lol: :lol: !!!!!
However................there's one page I can't check???? The [Noaa] page. I assume since it's all Beteljuice's php codes, it is OK....???
Any reason WHY I can't check this page??
Thanks,
Arthur
-
ID like to know....
what is w3c ? what does it do and whats are purpouses to have that on the web page :geek:
thanks ;)
-
Just click on the "XHTML" link in the bottom of your page (where the credits appear".
It will validate your page according the W3C standards for html. (there are different levels up to HTML5).
When I click on your first page it shows "81 errors and 69 warnings".
Although most browsers are very forgiving in displaying the context of an html document, some might not.....
It took me some headaches, but at least all my pages are now conform this standard.....
Cheers,
Arthur
-
Hi Arthur,
For your last errors in links page, I'll give you a cue
For javascript only, sometimes "&" could not be replaced, then we could
use a trick. In you faulty block, simple surround it like this
// <![CDATA[
var params = '&ref=' + escape(document.referrer)
+ '&ua=' + escape(navigator.userAgent)
+ '&page=' + escape(document.location.href)
+ '&sd=' + screen.colorDepth
+ '&sr=' + escape(screen.width+'x'+screen.height);
document.write('<img alt="Site Counters" border="0" width="0" height="0" src="http://www.sitecounterpro.com/picture/counter/?code=394868456436dbe743e4380554c0493a-524f4976acac8efec9c93f66ba415481' + params + '">');
// ]]>
(Just before anf after <script> tag ie <script type="text/javascript">........</script>)
... and magicly, all errors wil disappear!!! :D
Regards.
Jacques
-
HI Jacques,
Just figured it out since the // -> was removed from the [links] page (now back, so all pages have the stamp!!).
Except for the [Noaa]. It says there is an error in checking, and document can not be checked....
Why is that??
Thanks
Arthur
-
Hi Arthur,
W3C Validator page is not real complete as it validate only (X)Html,
I don't use use that anymore for so long time.. I think that last time
I used that page, "Dead Sea" was still in perfect health!!! :lol: :lol: :lol:
(Have I told you about FF + FB + WD + HV??? :roll: )
Effectively, there is just 1 error... a real small one: ;)
In you title you wrote... <h1>[Information]: <u><b>NOAA <i>Style</i> Climate Reports<b/></u>
but closing "b" is mispelled it is </b>, and you're using <b/>
Your welcome,
Jacques
-
Thanks Jacques!!
Corrected!!
To get my [links] page validated, I had to eliminate the Wunderground Sticker with Shockwave - Rapid fire live update.
The page simply could not be validated, and W3C gave as reason the <embed within the code which seems to be a known issue in the HTML validation procedure.
The code is:
<object width="600" height="400"><param name="movie" value="http://www.wunderground.com/swf/Rapid_Fire.swf?units=metric&station=IONTARIO232" /><embed src="http://www.wunderground.com/swf/Rapid_Fire.swf?units=metric&station=IONTARIO232" type="application/x-shockwave-flash" width="600" height="400" /></object>
Any thoughts of how I can change this to get it displayed again?? (I now have a Blue Jays Wunderground sticker to see the weather conditions during the game) much to my sons interest :D ).
Thanks,
Arthur
-
Hi Arthur,
Oufffffffffff, be compilant when a Flash inclusion... what a job!!!! :!:
I must admit myself, as I used Cumulus flash gauges, my gauges pages aren't compilant! :oops:
But, if you're thinking that you want to try it, your code as to be modified something like this:
<!--[if !IE]> -->
<object type="application/x-shockwave-flash"
data="http://www.wunderground.com/swf/Rapid_Fire.swf?units=metric&station=IONTARIO232" width="600" height="400">
<!-- <![endif]-->
<!--[if IE]><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
width="600" height="400">
<param name="movie" value="http://www.wunderground.com/swf/Rapid_Fire.swf?units=metric&station=IONTARIO232" />
<!--><!--dgx-->
<param name="loop" value="http://www.wunderground.com/swf/Rapid_Fire.swf?units=metric&station=IONTARIO232" />
<param name="menu" value="false" />
<p>This is <b>alternative</b> content.</p>
</object>
<!-- <![endif]-->
You see a new concept here: <!--[if !IE]> --> and <!--[if IE]> -->
These signs are "special" comments, but taked in charge by browsers.
It said "If browser is (or not) Internet Explorer".
There is a lot of them to identify each browsers, but we use that 95% of time because
IE have a lot of "caprice", eg. <!--[if IE7]> -->, <!--[if IE8]> -->....
Then, try if you want, but I haven't
Regards,
Jacques
-
Hi Jacques,
Could this be an example of a slight "under-estimation" of your own (incredible) knowledge :lol:
Don't know HOW you do it, but it works perfect.
Page-stamp remains, but WITH the Wunderground sticker and "passed" validation.
In other words, no excuse not to have your own Cumulus flash gauges/pages validated ;) ;) :) :)
Thanks again VERY much,
Arthur
-
Hi Arthur,
That what happend when we search an answer for another! :lol:
Ahhhhhh.. vainness!!! :oops:
Bravo! 100%!!! :ugeek:
Jacques
-
Hi
i like very much the static clouds, i have tried to do this however the pages were distorted likely i did not understand how to do it
on line 20 css styles i added next to no-repeat;}background-attachment:fixed;
what did i do wrong please?
peter
-
Hey Peter,
I haven't touched anything in the css files. Go back to where you were before you edit it......
Just add the following script into each page.
The pixels need to be adjusted to the length of the page (so the entire bottom of the page (= clouds) is captured.
<!-- footer ends -->
</div>
</div>
<script type="text/javascript"> document.getElementById("bg_clouds").style.height = document.getElementById("bg_clouds").clientHeight + 460 + 'px'; </script>
</body>
</html>
Good Luck,
Arthur
-
Sorry Peter, I checked and I did make the change in line # 20:
background-attachment:fixed;
as in earlier thread
Should work,
Arthur