Page 1 of 2

HTML Help?

Posted: Sun 28 Jul 2019 10:04 am
by Phil23
Hi All,

Can I ask for a little HTML help with what is probably a simple fix for those who know.

Web page design is not my thing despite 30 years in IT.

All I want to do is get this feed centred.
The WeatherZone block.

http://weather.inverellit.com/wz2.htm

Not a lot of code & the Wz stuff is only 6 lines.

Full code for the pages is...

Code: Select all

<!DOCTYPE HTML>

<html>

<head>

<meta charset="UTF-8">

<meta name="description" content="Phil's Backyard weather data" />

<meta name="keywords" content="Cumulus, Phil's Backyard weather data, weather, data, weather station" />

  <title>Phil's Backyard Weather</title>

  <link href="weatherstyle.css" rel="stylesheet" type="text/css" />

</head>





<body>

<div id="content">

<h1>Phil's Backyard Weather</h1>

<h2 style="text-align: left; text-transform: none;">&nbsp;Latitude&nbsp;S&nbsp;29&deg;&nbsp;46&#39;&nbsp;26&quot;&nbsp;&nbsp;&nbsp;&nbsp;Longitude&nbsp;E&nbsp;151&deg;&nbsp;07&#39;&nbsp;14&quot;&nbsp;&nbsp;&nbsp;&nbsp;Elevation&nbsp;586&nbsp;m</h2>

<table style="width:100%;border-collapse: collapse; border-spacing: 0;" >

    <td colspan="4" class="td_navigation_bar">:<a href="index.htm">now</a>::<a href="today.htm">today</a>::<a href="yesterday.htm">yesterday</a>::<a href="datasummary.php">daily&nbsp;data</a>::<a href="thismonth.htm">this&nbsp;month</a>::<a href="thisyear.htm">this&nbsp;year</a>::<a href="record.htm">records</a>::<a href="monthlyrecord.htm">monthly&nbsp;records</a>:<br>:<a href="gauges.htm">gauges</a>::<a href="graphs.htm">graphs</a>::<a href="https://cumulus.hosiene.co.uk/" target="_blank">forum</a>::<a href="https://weather.inverellit.com/pws/" target="_blank">dashboard</a>::<a href="http://weather.inverellit.com/webcams.htm">webcam</a>:</td>
</table>

	<!--Weatherzone local weather-->
	<style type="text/css">
	.weatherzone { font-family: Tahoma, Arial, Sans-Serif; font-size: small; font-weight: normal; color: #323232; background-color: #EFEFEF; }
	.weatherzone_head { font-family: Tahoma, Arial, Sans-Serif; font-size: small; font-weight: bold; text-align: center; color: #EFEFEF; background-color: #4185A5; }
	</style>
	<script type="text/javascript" src="http://www.weatherzone.com.au/woys/page_local.jsp?postcode=2360"></script>
	<a href="http://www.weatherzone.com.au"></a>
	<!--end Weatherzone local weather-->
	

	
Thanks

Phil.

Re: HTML Help?

Posted: Sun 28 Jul 2019 11:14 am
by beteljuice
Your table has no <tr></tr> and the bottom part of the page is missing !
Spaces needed in navigation :link:space:link: - taken care of below ...

Also there is no overall 'wrapper' for weatherzone output - is something missing ? - taken care of below ...

Try something like:

Code: Select all

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Phil's Backyard weather data" />
<meta name="keywords" content="Cumulus, Phil's Backyard weather data, weather, data, weather station" />
<title>Phil's Backyard Weather</title>
<link href="weatherstyle.css" rel="stylesheet" type="text/css" />
</head>

<body>

	<div id="content">

		<h1>Phil's Backyard Weather</h1>
		<h2 style="text-align: left; text-transform: none;">&nbsp;Latitude&nbsp;S&nbsp;29&deg;&nbsp;46&#39;&nbsp;26&quot;&nbsp;&nbsp;&nbsp;&nbsp;Longitude&nbsp;E&nbsp;151&deg;&nbsp;07&#39;&nbsp;14&quot;&nbsp;&nbsp;&nbsp;&nbsp;Elevation&nbsp;586&nbsp;m</h2>

		<table style="width:100%;border-collapse: collapse; border-spacing: 0;" >
			<tr>
				<td class="td_navigation_bar">
					:<a href="index.htm">now</a>: :<a href="today.htm">today</a>: :<a href="yesterday.htm">yesterday</a>: :<a href="datasummary.php">daily&nbsp;data</a>: :<a href="thismonth.htm">this&nbsp;month</a>: :<a href="thisyear.htm">this&nbsp;year</a>: :<a href="record.htm">records</a>: :<a href="monthlyrecord.htm">monthly&nbsp;records</a>: :<a href="gauges.htm">gauges</a>: :<a href="graphs.htm">graphs</a>: :<a href="https://cumulus.hosiene.co.uk/" target="_blank">forum</a>: :<a href="https://weather.inverellit.com/pws/" target="_blank">dashboard</a>: :<a href="http://weather.inverellit.com/webcams.htm">webcam</a>:
				</td>
			</tr>
		</table>
<!-- 'wrapper' for weatherzone -->		
		<div style= "margin: auto; width: 534px;">

		<!--Weatherzone local weather-->
			<style type="text/css">
			.weatherzone { font-family: Tahoma, Arial, Sans-Serif; font-size: small; font-weight: normal; color: #323232; background-color: #EFEFEF; }
			.weatherzone_head { font-family: Tahoma, Arial, Sans-Serif; font-size: small; font-weight: bold; text-align: center; color: #EFEFEF; background-color: #4185A5; }
			</style>
			<script type="text/javascript" src="http://www.weatherzone.com.au/woys/page_local.jsp?postcode=2360"></script>
			<a href="http://www.weatherzone.com.au"></a>
		<!--end Weatherzone local weather-->
		</div> <!-- END 'wrapper' -->

	</div> <!-- END content -->
</body>
</html>
	

Re: HTML Help?

Posted: Mon 29 Jul 2019 1:37 am
by Phil23
Thanks for that! Saved my struggling brain.
beteljuice wrote: Sun 28 Jul 2019 11:14 am Your table has no <tr></tr> and the bottom part of the page is missing !
Spaces needed in navigation :link:space:link: - taken care of below ...

Also there is no overall 'wrapper' for weatherzone output - is something missing ? - taken care of below ...
Show my HTML understanding....

And yes I haven't added the bottom section yet, wanted to see if it worked first before thinking too hard.

Can you explain the reason you need the spaces in the navigation?
As per my other pages I removed them to compact the top line a bit, then put a <br> in the middle of stuff sot that the second line always started with the gauges?

Presume I did something that I shouldn't have?

You example is here (with my <br added in).
http://weather.inverellit.com/wz3.htm


Cheers.

Re: HTML Help?

Posted: Mon 29 Jul 2019 8:24 am
by beteljuice
Can you explain the reason you need the spaces in the navigation?
It's always been a 'fault' in the templates ...

The content width of the page is proportional (%) and not fixed (????px) - this means every visit / browser is different.

The nav links

Code: Select all

 :link::link::link:
are seen by html as one long word so can break the table width and make things look out of kilter.

Doing

Code: Select all

:link:space:link:space:link:
allows automatic word wrap at whatever width is available.

Re: HTML Help?

Posted: Mon 29 Jul 2019 9:17 am
by Phil23
I did wonder if it was word wrap related.

It does look fine on 1920x1080 & my phone, but haven't checked it on other devices.

Have added the footer now.
Just needs to be edited appropriately.

Re: HTML Help?

Posted: Thu 01 Aug 2019 8:46 pm
by Phil23
Another one,

Just can't see why wrong with edited gauges page has a gap under the navigation menu I've put at the top.

I think I originally modified it from gauges-ss rather than the original gauges page.
I'm still uploading http://weather.inverellit.com/gauges-ss.htm, & it has no gap but http://weather.inverellit.com/gauges.htm does.

Have tried to compare the files & looked in the developer view, but can't see what's triggering it there either.

Code: Select all

<!DOCTYPE html>

<html lang="en">



<head>

  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">

  <meta name="keywords" content="Phil's Backyard weather data, weather, data, weather station, steelseries">

  <title>Phil's Backyard Weather</title>

  <link rel="stylesheet" href="weatherstyle.css">

  <link rel="stylesheet" href="lib/steelseries/css/gauges-ss.css">

</head>

<body>

<!--  <div class="content"> -->

  <div id="content">

    <h1>Phil's Backyard Weather</h1>

    <h2 style="text-align: left; text-transform: none;">&nbsp;<span id='lang_latitude'>Latitude</span>&nbsp;S&nbsp;29&deg;&nbsp;46&#39;&nbsp;26&quot;&nbsp;&nbsp;&nbsp;&nbsp;<span id="lang_longtitude">Longitude</span>&nbsp;E&nbsp;151&deg;&nbsp;07&#39;&nbsp;14&quot;&nbsp;&nbsp;&nbsp;&nbsp;<span id="lang_elevation">Elevation</span>&nbsp;586&nbsp;m</h2>



<!-- Start of navigation menus at the top -->

<table style="width:100%;border-collapse: collapse; border-spacing: 0;" >

    <td colspan="4" class="td_navigation_bar">:<a href="index.htm">now</a>: :<a href="today.htm">today</a>: :<a href="yesterday.htm">yesterday</a>: :<a href="datasummary.php">daily&nbsp;data</a>: :<a href="thismonth.htm">this&nbsp;month</a>: :<a href="thisyear.htm">this&nbsp;year</a>: :<a href="record.htm">records</a>: :<a href="monthlyrecord.htm">monthly&nbsp;records</a>:<br>:<a href="gauges.htm">gauges</a>: :<a href="graphs.htm">graphs</a>: :<a href="wz.htm">weatherzone</a>: :<a href="https://cumulus.hosiene.co.uk/" target="_blank">forum</a>: :<a href="https://weather.inverellit.com/pws/" target="_blank">dashboard</a>: :<a href="http://weather.inverellit.com/webcams.htm">webcam</a>:</td>

</table>

<!-- End of navigation menus at the top -->



    <noscript>

      <h2 style="color:red; text-align:center">&gt;&gt;This pages requires JavaScript enabling in your browser.&lt;&lt;<br>&gt;&gt;Please enable scripting it to enjoy this site at its best.&lt;&lt;</h2>

    </noscript>

  </div>

  <div class="row">

    <canvas id="canvas_led" width="25" height="25"></canvas>&nbsp;&nbsp;&nbsp;

    <canvas id="canvas_status" width="550" height="25"></canvas>&nbsp;&nbsp;

    <canvas id="canvas_timer" width="70" height="25"></canvas>

  </div>

  <div class="row">

    <div class="gauge">

      <div id="tip_0">

        <canvas id="canvas_temp" width="221" height="221"></canvas>

      </div>

      <input id="rad_temp1" type="radio" name="rad_temp" value="out" checked onclick="gauges.doTemp(this);"><label id="lab_temp1" for="rad_temp1">Outside</label>

      <input id="rad_temp2" type="radio" name="rad_temp" value="in" onclick="gauges.doTemp(this);"><label id="lab_temp2" for="rad_temp2">Inside</label>

    </div>

    <div class="gauge">

      <div id="tip_1">

        <canvas id="canvas_dew" width="221" height="221"></canvas>

      </div>

      <input id="rad_dew1" type="radio" name="rad_dew" value="dew" onclick="gauges.doDew(this);"><label id="lab_dew1" for="rad_dew1">Dew Point</label>

      <input id="rad_dew2" type="radio" name="rad_dew" value="app" checked onclick="gauges.doDew(this);"><label id="lab_dew2" for="rad_dew2">Apparent</label>

      <br>

      <input id="rad_dew3" type="radio" name="rad_dew" value="wnd" onclick="gauges.doDew(this);"><label id="lab_dew3" for="rad_dew3">Wind Chill</label>

      <input id="rad_dew4" type="radio" name="rad_dew" value="hea" onclick="gauges.doDew(this);"><label id="lab_dew4" for="rad_dew4">Heat Index</label>

      <br>

      <input id="rad_dew5" type="radio" name="rad_dew" value="hum" onclick="gauges.doDew(this);"><label id="lab_dew5" for="rad_dew5">Humidex</label>

    </div>

    <div class="gauge">

      <div id="tip_4">

        <canvas id="canvas_hum" width="221" height="221"></canvas>

      </div>

      <input id="rad_hum1" type="radio" name="rad_hum" value="out" checked onclick="gauges.doHum(this);"><label id="lab_hum1" for="rad_hum1">Outside</label>

      <input id="rad_hum2" type="radio" name="rad_hum" value="in" onclick="gauges.doHum(this);"><label id="lab_hum2" for="rad_hum2">Inside</label>

    </div>

  </div>

  <div class="row">

    <div id="tip_6" class="gauge">

      <canvas id="canvas_wind" width="221" height="221"></canvas>

    </div>

    <div id="tip_7" class="gauge">

      <canvas id="canvas_dir" width="221" height="221"></canvas>

    </div>

    <div id="tip_10" class="gauge">

      <canvas id="canvas_rose" width="221" height="221"></canvas>

    </div>

  </div>

  <div class="row">

    <div id="tip_5" class="gauge">

      <canvas id="canvas_baro" width="221" height="221"></canvas>

    </div>

    <div id="tip_2" class="gauge">

      <canvas id="canvas_rain" width="221" height="221"></canvas>

    </div>

    <div id="tip_3" class="gauge">

      <canvas id="canvas_rrate" width="221" height="221"></canvas>

    </div>

  </div>

  <div class="row">

    <div id="tip_9" class="gauge">

      <canvas id="canvas_solar" width="221" height="221"></canvas>

    </div>

    <div id="tip_8" class="gauge">

      <canvas id="canvas_uv" width="221" height="221"></canvas>

    </div>

	<div id="tip_11" class="gauge">

      <canvas id="canvas_cloud" class="gaugeSizeStd"></canvas>

    </div>

  </div>



  <div class="content">

    <div class="unitsTable">

      <div style="display:table-row">

        <div id="temperature" class="cellRight">

          <span id="lang_temperature">Temperature</span>:

        </div>

        <div style="display:table-cell">

          <input id="rad_unitsTemp1" type="radio" name="rad_unitsTemp" value="C" checked onclick="gauges.setUnits(this);"><label id="lab_unitsTemp1" for="rad_unitsTemp1">&deg;C</label>

        </div>

        <div style="display:table-cell">

          <input id="rad_unitsTemp2" type="radio" name="rad_unitsTemp" value="F" onclick="gauges.setUnits(this);"><label id="lab_unitsTemp2" for="rad_unitsTemp2">&deg;F</label>

        </div>

      </div>

      <div style="display:table-row">

        <div id ="rainfall" class="cellRight">

          <span id="lang_rainfall">Rainfall</span>:

        </div>

        <div style="display:table-cell">

          <input id="rad_unitsRain1" type="radio" name="rad_unitsRain" value="mm" checked onclick="gauges.setUnits(this);"><label id="lab_unitsRain1" for="rad_unitsRain1">mm</label>

        </div>

        <div style="display:table-cell">

          <input id="rad_unitsRain2" type="radio" name="rad_unitsRain" value="in" onclick="gauges.setUnits(this);"><label id="lab_unitsRain2" for="rad_unitsRain2">Inch</label>

        </div>

      </div>

      <div style="display:table-row">

        <div id="pressure" class="cellRight">

          <span id="lang_pressure">Pressure</span>:

        </div>

        <div style="display:table-cell">

          <input id="rad_unitsPress1" type="radio" name="rad_unitsPress" value="hPa" checked onclick="gauges.setUnits(this);"><label id="lab_unitsPress1" for="rad_unitsPress1">hPa</label>

        </div>

        <div style="display:table-cell">

          <input id="rad_unitsPress2" type="radio" name="rad_unitsPress" value="inHg" onclick="gauges.setUnits(this);"><label id="lab_unitsPress2" for="rad_unitsPress2">inHg</label>

        </div>

        <div style="display:table-cell">

          <input id="rad_unitsPress3" type="radio" name="rad_unitsPress" value="mb" onclick="gauges.setUnits(this);"><label id="lab_unitsPress3" for="rad_unitsPress3">mb</label>

        </div>

        <div style="display:table-cell">

          <input id="rad_unitsPress4" type="radio" name="rad_unitsPress" value="kPa" onclick="gauges.setUnits(this);"><label id="lab_unitsPress4" for="rad_unitsPress4">kPa</label>

        </div>

      </div>

      <div style="display:table-row">

        <div id="wind" class="cellRight">

          <span id="lang_windSpeed">Wind Speed</span>:

        </div>

        <div style="display:table-cell">

          <input id="rad_unitsWind4" type="radio" name="rad_unitsWind" value="km/h" checked onclick="gauges.setUnits(this);"><label id="lab_unitsWind4" for="rad_unitsWind4">km/h</label>

        </div>

        <div style="display:table-cell">

          <input id="rad_unitsWind3" type="radio" name="rad_unitsWind" value="m/s" onclick="gauges.setUnits(this);"><label id="lab_unitsWind3" for="rad_unitsWind3">m/s</label>

        </div>

        <div style="display:table-cell">

          <input id="rad_unitsWind1" type="radio" name="rad_unitsWind" value="mph" onclick="gauges.setUnits(this);"><label id="lab_unitsWind1" for="rad_unitsWind1">mph</label>

        </div>

        <div style="display:table-cell">

          <input id="rad_unitsWind2" type="radio" name="rad_unitsWind" value="kts" onclick="gauges.setUnits(this);"><label id="lab_unitsWind2" for="rad_unitsWind2">knots</label>

        </div>

      </div>

	  <div style="display:table-row">

        <div id ="cloud" class="cellRight">

          <span id="lang_cloudbase">CloudBase</span>:

        </div>

        <div style="display:table-cell">

          <input id="rad_unitsCloudBase1" type="radio" name="rad_unitsCloud" value="m" checked onclick="gauges.setUnits(this);"><label id="lab_unitsCloudBase1" for="rad_unitsCloudBase1">m</label>

        </div>

        <div style="display:table-cell">

          <input id="rad_unitsCloudBase2" type="radio" name="rad_unitsCloud" value="ft" onclick="gauges.setUnits(this);"><label id="lab_unitsCloudBase2" for="rad_unitsCloudBase2">ft</label>

        </div>

      </div>

    </div>

    <div class="credits" style="padding: 0px 10px 10px 10px; text-align: left">

      <hr>

      Scripts by Mark Crossley - version <span id="scriptVer"></span><br>

      Gauges drawn using Gerrit Grunwald's <a href="http://harmoniccode.blogspot.com" target="_blank">SteelSeries</a> <a href="https://github.com/HanSolo/SteelSeries-Canvas">JavaScript library</a>

      <span id="rgraph_attrib"><br>Wind Rose drawn using RGraph</span>

    </div>



    <!-- Start of navigation menus at the bottom -->

<table style="width:100%;border-collapse: collapse; border-spacing: 0;" >

    <td colspan="4" class="td_navigation_bar">:<a href="index.htm">now</a>: :<a href="today.htm">today</a>: :<a href="yesterday.htm">yesterday</a>: :<a href="datasummary.php">daily&nbsp;data</a>: :<a href="thismonth.htm">this&nbsp;month</a>: :<a href="thisyear.htm">this&nbsp;year</a>: :<a href="record.htm">records</a>: :<a href="monthlyrecord.htm">monthly&nbsp;records</a>:<br>:<a href="gauges.htm">gauges</a>: :<a href="graphs.htm">graphs</a>: :<a href="wz.htm">weatherzone</a>: :<a href="https://cumulus.hosiene.co.uk/" target="_blank">forum</a>: :<a href="https://weather.inverellit.com/pws/" target="_blank">dashboard</a>: :<a href="http://weather.inverellit.com/webcams.htm">webcam</a>:</td>

</table>

<!-- End of navigation menus at the bottom -->



    <!-- Credits -->

    <p class="credits">

      <br>

      Page updated 2/08/2019 6:20:00 AM

      <br>

      powered by <span id="programName"></span> v<span id="programVersion"></span> (b<span id="programBuild"></span>)

      <br>

      Transmitter Battery ok

      <br>

      <a href="http://cumulussites.net/" target="_blank"><img src="http://cumulussites.net/button.php?u=Phil23" alt="Cumulus Top Weather Sites" border="0" width="162" height="55"></a>



    </p><!-- Credits -->

  </div><!-- id content -->



  <!-- Included Scripts -->



  <!-- Google CDN hosted JQuery library -->

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

  <!-- or... -->

  <!-- Local JQuery library, do not use if your containing page already pulls in a copy of JQuery -->

  <!-- <script src="scripts/jquery-1.8.2.min.js"></script> -->



  <!-- Combined steelseries.js & tween.js -->

  <script src="lib/steelseries/scripts/steelseries_tween.min.js"></script>



  <!-- Once you have customised this scripts to your requirements you should minimise

       and concatenate them into a single file in the same order  as below -->

  <script src="lib/steelseries/scripts/language.min.js"></script>

  <script src="lib/steelseries/scripts/gauges.js"></script>



  <!--Optional Wind Rose scripts -->



  <script src="lib/steelseries/scripts/RGraph.common.core.min.js"></script>

  <script src="lib/steelseries/scripts/RGraph.rose.min.js"></script>



</body>

</html>


Re: HTML Help?

Posted: Thu 01 Aug 2019 9:00 pm
by freddie
Don't think it's related but don't you need a <tr> ... </tr> wrapped around the <td> that your nav section is in?

Re: HTML Help?

Posted: Thu 01 Aug 2019 9:12 pm
by Phil23
freddie wrote: Thu 01 Aug 2019 9:00 pm don't you need a <tr> ... </tr> wrapped around the <td>
Don't know if it might be optional if there's just one row that wraps.

It is in the original code & looks like I've lost it on all may pages when I replaced the Nav block.

I just added it back into both menu's in gaugesT.htm, but it didn't remove the gap.

Edit.

Seems like although it's not valid to be missing <tr>'s the browsers take care of it....

https://stackoverflow.com/questions/357 ... t-tr-valid

Re: HTML Help?

Posted: Thu 01 Aug 2019 9:42 pm
by beteljuice
The idea of <div id="content"> is that is contains all the content !!!!

It has a bottom margin of 5% which is the gap you are seeing because the ss stuff is AFTER the content container is 'closed'.

When you put the ss stuff in the content div you will probably need a <P> break :) between the nav section and the ss stuff.

Re: HTML Help?

Posted: Thu 01 Aug 2019 10:00 pm
by Phil23
beteljuice wrote: Thu 01 Aug 2019 9:42 pm The idea of <div id="content"> is that is contains all the content !!!!
Ahhh,
Thanks


Removed a </div> from after the top nav menu & that fixed the gap.

It did stuff up the menu's at the bottom, but I'm presuming that's another div that's on the wrong side of something.....

Edit.

Think it's fixed now...

That </div> should have been before the credits.

NP++ needs an option/language file to pair off open & close tags to make things a bit easier.
I'm sure that must exist

Re: HTML Help?

Posted: Thu 01 Aug 2019 10:52 pm
by beteljuice
NP++

There is the set 'language' tab (although it will guess by file extension)

Use the indents for clarity when you start / end elements etc.

Put your cursor on the start or end of a tag and it will mark the other end, also on the left-hand side you will see a line which follows up / down, also you will see expand / collapse boxes to show / hide a recognised section.

Depending on the language and the error, the colour of the text / code may be different after the error ... and so on.

It takes a while to get used to it all, and remembering to keep your eyes open :shock:

Re: HTML Help?

Posted: Thu 08 Aug 2019 8:56 pm
by Phil23
Phil23 wrote: Thu 01 Aug 2019 10:00 pm Think it's fixed now...
Thought it was.....

Until I checked it from my phone yesterday.
Since I eliminated the gap under the forecast at the top, I seem to have broken the way the window width resizes.

I have got http://weather.inverellit.com/gauges.htm as well as http://weather.inverellit.com/gauges-ss.htm, with my gauges being an edit to get the Nav menu at the top.

The original works fine while mine stuffs up on resize
(and only since I "Fixed" that gap that was taunting the OCD :oops: )

Assuming I've still got a div closing off wrong, but can't seem to spot it.
( :x If I still had a dot matrix I'd have strip of paper stretched out on the floor).

I can see that on the original one the borders collapse before the content while on mine the whole lot scales together.

Anyone see where I've gone wrong? (Again).
Gauges1.JPG
Gauges2.JPG

Code: Select all

<!DOCTYPE html>
<html lang="en">

<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <meta name="keywords" content="<#location> weather data, weather, data, weather station, steelseries">
  <title><#location> Weather</title>
  <link rel="stylesheet" href="weatherstyle.css">
  <link rel="stylesheet" href="lib/steelseries/css/gauges-ss.css">
</head>
<body>
<!--  <div class="content"> -->
  <div id="content">
    <h1><#location> Weather</h1>
    <h2 style="text-align: left; text-transform: none;">&nbsp;<span id='lang_latitude'>Latitude</span>&nbsp;<#latitude>&nbsp;&nbsp;&nbsp;&nbsp;<span id="lang_longtitude">Longitude</span>&nbsp;<#longitude>&nbsp;&nbsp;&nbsp;&nbsp;<span id="lang_elevation">Elevation</span>&nbsp;<#altitude></h2>

<!-- Start of navigation menus at the top -->
<table style="width:100%;border-collapse: collapse; border-spacing: 0;" >
<tr>
    <td colspan="4" class="td_navigation_bar">:<a href="index.htm">now</a>: :<a href="today.htm">today</a>: :<a href="yesterday.htm">yesterday</a>: :<a href="datasummary.php">daily&nbsp;data</a>: :<a href="thismonth.htm">this&nbsp;month</a>: :<a href="thisyear.htm">this&nbsp;year</a>: :<a href="record.htm">records</a>: :<a href="monthlyrecord.htm">monthly&nbsp;records</a>:<br>:<a href="gauges.htm">gauges</a>: :<a href="graphs.htm">graphs</a>: :<a href="wz.htm">weatherzone</a>: :<a href="https://cumulus.hosiene.co.uk/" target="_blank">forum</a>: :<a href="https://weather.inverellit.com/pws/" target="_blank">dashboard</a>: <#webcam></td>
</tr>
</table>
<!-- End of navigation menus at the top -->
<p> 

    <noscript>
      <h2 style="color:red; text-align:center">&gt;&gt;This pages requires JavaScript enabling in your browser.&lt;&lt;<br>&gt;&gt;Please enable scripting it to enjoy this site at its best.&lt;&lt;</h2>
    </noscript>
<!--   </div>                                                                  Removed to fix gap-->
  <div class="row">
    <canvas id="canvas_led" width="25" height="25"></canvas>&nbsp;&nbsp;&nbsp;
    <canvas id="canvas_status" width="550" height="25"></canvas>&nbsp;&nbsp;
    <canvas id="canvas_timer" width="70" height="25"></canvas>
  </div>
  <div class="row">
    <div class="gauge">
      <div id="tip_0">
        <canvas id="canvas_temp" width="221" height="221"></canvas>
      </div>
      <input id="rad_temp1" type="radio" name="rad_temp" value="out" checked onclick="gauges.doTemp(this);"><label id="lab_temp1" for="rad_temp1">Outside</label>
      <input id="rad_temp2" type="radio" name="rad_temp" value="in" onclick="gauges.doTemp(this);"><label id="lab_temp2" for="rad_temp2">Inside</label>
    </div>
    <div class="gauge">
      <div id="tip_1">
        <canvas id="canvas_dew" width="221" height="221"></canvas>
      </div>
      <input id="rad_dew1" type="radio" name="rad_dew" value="dew" onclick="gauges.doDew(this);"><label id="lab_dew1" for="rad_dew1">Dew Point</label>
      <input id="rad_dew2" type="radio" name="rad_dew" value="app" checked onclick="gauges.doDew(this);"><label id="lab_dew2" for="rad_dew2">Apparent</label>
      <br>
      <input id="rad_dew3" type="radio" name="rad_dew" value="wnd" onclick="gauges.doDew(this);"><label id="lab_dew3" for="rad_dew3">Wind Chill</label>
      <input id="rad_dew4" type="radio" name="rad_dew" value="hea" onclick="gauges.doDew(this);"><label id="lab_dew4" for="rad_dew4">Heat Index</label>
      <br>
      <input id="rad_dew5" type="radio" name="rad_dew" value="hum" onclick="gauges.doDew(this);"><label id="lab_dew5" for="rad_dew5">Humidex</label>
    </div>
    <div class="gauge">
      <div id="tip_4">
        <canvas id="canvas_hum" width="221" height="221"></canvas>
      </div>
      <input id="rad_hum1" type="radio" name="rad_hum" value="out" checked onclick="gauges.doHum(this);"><label id="lab_hum1" for="rad_hum1">Outside</label>
      <input id="rad_hum2" type="radio" name="rad_hum" value="in" onclick="gauges.doHum(this);"><label id="lab_hum2" for="rad_hum2">Inside</label>
    </div>
  </div>
  <div class="row">
    <div id="tip_6" class="gauge">
      <canvas id="canvas_wind" width="221" height="221"></canvas>
    </div>
    <div id="tip_7" class="gauge">
      <canvas id="canvas_dir" width="221" height="221"></canvas>
    </div>
    <div id="tip_10" class="gauge">
      <canvas id="canvas_rose" width="221" height="221"></canvas>
    </div>
  </div>
  <div class="row">
    <div id="tip_5" class="gauge">
      <canvas id="canvas_baro" width="221" height="221"></canvas>
    </div>
    <div id="tip_2" class="gauge">
      <canvas id="canvas_rain" width="221" height="221"></canvas>
    </div>
    <div id="tip_3" class="gauge">
      <canvas id="canvas_rrate" width="221" height="221"></canvas>
    </div>
  </div>
  <div class="row">
    <div id="tip_9" class="gauge">
      <canvas id="canvas_solar" width="221" height="221"></canvas>
    </div>
    <div id="tip_8" class="gauge">
      <canvas id="canvas_uv" width="221" height="221"></canvas>
    </div>
	<div id="tip_11" class="gauge">
      <canvas id="canvas_cloud" class="gaugeSizeStd"></canvas>
    </div>
  </div>

  <div class="content">
    <div class="unitsTable">
      <div style="display:table-row">
        <div id="temperature" class="cellRight">
          <span id="lang_temperature">Temperature</span>:
        </div>
        <div style="display:table-cell">
          <input id="rad_unitsTemp1" type="radio" name="rad_unitsTemp" value="C" checked onclick="gauges.setUnits(this);"><label id="lab_unitsTemp1" for="rad_unitsTemp1">&deg;C</label>
        </div>
        <div style="display:table-cell">
          <input id="rad_unitsTemp2" type="radio" name="rad_unitsTemp" value="F" onclick="gauges.setUnits(this);"><label id="lab_unitsTemp2" for="rad_unitsTemp2">&deg;F</label>
        </div>
      </div>
      <div style="display:table-row">
        <div id ="rainfall" class="cellRight">
          <span id="lang_rainfall">Rainfall</span>:
        </div>
        <div style="display:table-cell">
          <input id="rad_unitsRain1" type="radio" name="rad_unitsRain" value="mm" checked onclick="gauges.setUnits(this);"><label id="lab_unitsRain1" for="rad_unitsRain1">mm</label>
        </div>
        <div style="display:table-cell">
          <input id="rad_unitsRain2" type="radio" name="rad_unitsRain" value="in" onclick="gauges.setUnits(this);"><label id="lab_unitsRain2" for="rad_unitsRain2">Inch</label>
        </div>
      </div>
      <div style="display:table-row">
        <div id="pressure" class="cellRight">
          <span id="lang_pressure">Pressure</span>:
        </div>
        <div style="display:table-cell">
          <input id="rad_unitsPress1" type="radio" name="rad_unitsPress" value="hPa" checked onclick="gauges.setUnits(this);"><label id="lab_unitsPress1" for="rad_unitsPress1">hPa</label>
        </div>
        <div style="display:table-cell">
          <input id="rad_unitsPress2" type="radio" name="rad_unitsPress" value="inHg" onclick="gauges.setUnits(this);"><label id="lab_unitsPress2" for="rad_unitsPress2">inHg</label>
        </div>
        <div style="display:table-cell">
          <input id="rad_unitsPress3" type="radio" name="rad_unitsPress" value="mb" onclick="gauges.setUnits(this);"><label id="lab_unitsPress3" for="rad_unitsPress3">mb</label>
        </div>
        <div style="display:table-cell">
          <input id="rad_unitsPress4" type="radio" name="rad_unitsPress" value="kPa" onclick="gauges.setUnits(this);"><label id="lab_unitsPress4" for="rad_unitsPress4">kPa</label>
        </div>
      </div>
      <div style="display:table-row">
        <div id="wind" class="cellRight">
          <span id="lang_windSpeed">Wind Speed</span>:
        </div>
        <div style="display:table-cell">
          <input id="rad_unitsWind4" type="radio" name="rad_unitsWind" value="km/h" checked onclick="gauges.setUnits(this);"><label id="lab_unitsWind4" for="rad_unitsWind4">km/h</label>
        </div>
        <div style="display:table-cell">
          <input id="rad_unitsWind3" type="radio" name="rad_unitsWind" value="m/s" onclick="gauges.setUnits(this);"><label id="lab_unitsWind3" for="rad_unitsWind3">m/s</label>
        </div>
        <div style="display:table-cell">
          <input id="rad_unitsWind1" type="radio" name="rad_unitsWind" value="mph" onclick="gauges.setUnits(this);"><label id="lab_unitsWind1" for="rad_unitsWind1">mph</label>
        </div>
        <div style="display:table-cell">
          <input id="rad_unitsWind2" type="radio" name="rad_unitsWind" value="kts" onclick="gauges.setUnits(this);"><label id="lab_unitsWind2" for="rad_unitsWind2">knots</label>
        </div>
      </div>
	  <div style="display:table-row">
        <div id ="cloud" class="cellRight">
          <span id="lang_cloudbase">CloudBase</span>:
        </div>
        <div style="display:table-cell">
          <input id="rad_unitsCloudBase1" type="radio" name="rad_unitsCloud" value="m" checked onclick="gauges.setUnits(this);"><label id="lab_unitsCloudBase1" for="rad_unitsCloudBase1">m</label>
        </div>
        <div style="display:table-cell">
          <input id="rad_unitsCloudBase2" type="radio" name="rad_unitsCloud" value="ft" onclick="gauges.setUnits(this);"><label id="lab_unitsCloudBase2" for="rad_unitsCloudBase2">ft</label>
        </div>
      </div>
    </div>
</div> <!--  Added for gap fix -->
    <div class="credits" style="padding: 0px 10px 10px 10px; text-align: left">
      <hr>
      Scripts by Mark Crossley - version <span id="scriptVer"></span><br>
      Gauges drawn using Gerrit Grunwald's <a href="http://harmoniccode.blogspot.com" target="_blank">SteelSeries</a> <a href="https://github.com/HanSolo/SteelSeries-Canvas">JavaScript library</a>
      <span id="rgraph_attrib"><br>Wind Rose drawn using RGraph</span>
    </div>

    <!-- Start of navigation menus at the bottom -->
<table style="width:100%;border-collapse: collapse; border-spacing: 0;" >
<tr>
    <td colspan="4" class="td_navigation_bar">:<a href="index.htm">now</a>: :<a href="today.htm">today</a>: :<a href="yesterday.htm">yesterday</a>: :<a href="datasummary.php">daily&nbsp;data</a>: :<a href="thismonth.htm">this&nbsp;month</a>: :<a href="thisyear.htm">this&nbsp;year</a>: :<a href="record.htm">records</a>: :<a href="monthlyrecord.htm">monthly&nbsp;records</a>:<br>:<a href="gauges.htm">gauges</a>: :<a href="graphs.htm">graphs</a>: :<a href="wz.htm">weatherzone</a>: :<a href="https://cumulus.hosiene.co.uk/" target="_blank">forum</a>: :<a href="https://weather.inverellit.com/pws/" target="_blank">dashboard</a>: <#webcam></td>
</tr>
</table>
<!-- End of navigation menus at the bottom -->
 <!-- </div>Added to Fix gap at top -->
    <!-- Credits -->
    <p class="credits">
      Page updated <#update>
      <br>
      powered by <span id="programName"></span> v<span id="programVersion"></span> (b<span id="programBuild"></span>)
      <br>
      Transmitter Battery <#txbattery channel=1>
      <br>
      <a href="http://cumulussites.net/" target="_blank"><img src="http://cumulussites.net/button.php?u=Phil23" alt="Cumulus Top Weather Sites" border="0" width="162" height="55"></a>

    </p><!-- Credits -->
  </div><!-- id content -->

  <!-- Included Scripts -->

  <!-- Google CDN hosted JQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  <!-- or... -->
  <!-- Local JQuery library, do not use if your containing page already pulls in a copy of JQuery -->
  <!-- <script src="scripts/jquery-1.8.2.min.js"></script> -->

  <!-- Combined steelseries.js & tween.js -->
  <script src="lib/steelseries/scripts/steelseries_tween.min.js"></script>

  <!-- Once you have customised this scripts to your requirements you should minimise
       and concatenate them into a single file in the same order  as below -->
  <script src="lib/steelseries/scripts/language.min.js"></script>
  <script src="lib/steelseries/scripts/gauges.js"></script>

  <!--Optional Wind Rose scripts -->

  <script src="lib/steelseries/scripts/RGraph.common.core.min.js"></script>
  <script src="lib/steelseries/scripts/RGraph.rose.min.js"></script>

</body>
</html>


Re: HTML Help?

Posted: Thu 08 Aug 2019 11:02 pm
by Phil23
So to try & identify where I've got it wrong, should I be using either the DOM Explorer in IE or the Elements view in Chrome's Developer view to help me see better how the page is put together, or is there a more relevant tool?

Thanks.

Re: HTML Help?

Posted: Fri 09 Aug 2019 12:39 am
by beteljuice
Element viewers / developers don't always help - especially if you have the right amount of opening / closing statements for an element type.

... and there is little they could do about something being misnamed.

eg. on your first page (which doesn't work properly) immediately after the <body> tag you have:

<div class="content">

Whereas it should be:

<div id= "content">

The css coding for id=content is #content in weatherstyle.css

but the class css coding is .content in lib/steelseries/css/gauges-ss.css

Two different things ....

Like I typed earlier about NP++, just click on eg. <div ... and it should highlight the start, and what it thinks is the end, and there's a red vertical line on the right hand side going from top line to bottom line'

Re: HTML Help?

Posted: Fri 09 Aug 2019 12:49 am
by Phil23
beteljuice wrote: Fri 09 Aug 2019 12:39 am eg. on your first page (which doesn't work properly) immediately after the <body> tag you have:

<div class="content">

Whereas it should be:

<div id= "content">
That was something I was fiddling with, but had the <div class="content"> comented out. & id below that.

Code: Select all

<body>
<!--  <div class="content"> -->
  <div id="content">
    <h1><#location> Weather</h1>