Welcome to the Cumulus Support forum.

Latest Cumulus MX release v3.0.2 build 3052 - 13 September 2019.
Legacy Cumulus 1 release v1.9.4 (build 1099) - 28 November 2014

See the Wiki for downloading either version.

HTML Help?

Other discussion about creating web sites for Cumulus that doesn't have a specific subforum

Moderator: daj

Phil23
Posts: 210
Joined: Sat 16 Jul 2016 11:59 pm
Weather Station: Davis Vantage Pro2 Plus
Operating System: Win7 Pro
Location: Australia

HTML Help?

Post by Phil23 » Sun 28 Jul 2019 10:04 am

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.
Image

User avatar
beteljuice
Posts: 2716
Joined: Tue 09 Dec 2008 1:37 pm
Weather Station: None !
Operating System: ex XP SP3 - now W10 laptop grr
Location: Dudley, West Midlands, UK

Re: HTML Help?

Post by beteljuice » 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 ...

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>
	
Image
......................Imagine, what you will KNOW tomorrow !

Phil23
Posts: 210
Joined: Sat 16 Jul 2016 11:59 pm
Weather Station: Davis Vantage Pro2 Plus
Operating System: Win7 Pro
Location: Australia

Re: HTML Help?

Post by Phil23 » Mon 29 Jul 2019 1:37 am

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.
Image

User avatar
beteljuice
Posts: 2716
Joined: Tue 09 Dec 2008 1:37 pm
Weather Station: None !
Operating System: ex XP SP3 - now W10 laptop grr
Location: Dudley, West Midlands, UK

Re: HTML Help?

Post by beteljuice » Mon 29 Jul 2019 8:24 am

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.
Image
......................Imagine, what you will KNOW tomorrow !

Phil23
Posts: 210
Joined: Sat 16 Jul 2016 11:59 pm
Weather Station: Davis Vantage Pro2 Plus
Operating System: Win7 Pro
Location: Australia

Re: HTML Help?

Post by Phil23 » Mon 29 Jul 2019 9:17 am

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.
Image

Phil23
Posts: 210
Joined: Sat 16 Jul 2016 11:59 pm
Weather Station: Davis Vantage Pro2 Plus
Operating System: Win7 Pro
Location: Australia

Re: HTML Help?

Post by Phil23 » Thu 01 Aug 2019 8:46 pm

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>

Image

freddie
Posts: 470
Joined: Wed 08 Jun 2011 11:19 am
Weather Station: Davis Vantage Pro 2
Operating System: GNU/Linux (Ubuntu 18.04)
Location: Dorrington, Shropshire
Contact:

Re: HTML Help?

Post by freddie » Thu 01 Aug 2019 9:00 pm

Don't think it's related but don't you need a <tr> ... </tr> wrapped around the <td> that your nav section is in?
Freddie
Image

Phil23
Posts: 210
Joined: Sat 16 Jul 2016 11:59 pm
Weather Station: Davis Vantage Pro2 Plus
Operating System: Win7 Pro
Location: Australia

Re: HTML Help?

Post by Phil23 » Thu 01 Aug 2019 9:12 pm

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
Last edited by Phil23 on Thu 01 Aug 2019 9:46 pm, edited 1 time in total.
Image

User avatar
beteljuice
Posts: 2716
Joined: Tue 09 Dec 2008 1:37 pm
Weather Station: None !
Operating System: ex XP SP3 - now W10 laptop grr
Location: Dudley, West Midlands, UK

Re: HTML Help?

Post by beteljuice » Thu 01 Aug 2019 9:42 pm

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.
Image
......................Imagine, what you will KNOW tomorrow !

Phil23
Posts: 210
Joined: Sat 16 Jul 2016 11:59 pm
Weather Station: Davis Vantage Pro2 Plus
Operating System: Win7 Pro
Location: Australia

Re: HTML Help?

Post by Phil23 » Thu 01 Aug 2019 10:00 pm

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
Image

User avatar
beteljuice
Posts: 2716
Joined: Tue 09 Dec 2008 1:37 pm
Weather Station: None !
Operating System: ex XP SP3 - now W10 laptop grr
Location: Dudley, West Midlands, UK

Re: HTML Help?

Post by beteljuice » Thu 01 Aug 2019 10:52 pm

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:
Image
......................Imagine, what you will KNOW tomorrow !

Phil23
Posts: 210
Joined: Sat 16 Jul 2016 11:59 pm
Weather Station: Davis Vantage Pro2 Plus
Operating System: Win7 Pro
Location: Australia

Re: HTML Help?

Post by Phil23 » Thu 08 Aug 2019 8:56 pm

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>

You do not have the required permissions to view the files attached to this post.
Image

Phil23
Posts: 210
Joined: Sat 16 Jul 2016 11:59 pm
Weather Station: Davis Vantage Pro2 Plus
Operating System: Win7 Pro
Location: Australia

Re: HTML Help?

Post by Phil23 » Thu 08 Aug 2019 11:02 pm

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.
Image

User avatar
beteljuice
Posts: 2716
Joined: Tue 09 Dec 2008 1:37 pm
Weather Station: None !
Operating System: ex XP SP3 - now W10 laptop grr
Location: Dudley, West Midlands, UK

Re: HTML Help?

Post by beteljuice » Fri 09 Aug 2019 12:39 am

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'
Image
......................Imagine, what you will KNOW tomorrow !

Phil23
Posts: 210
Joined: Sat 16 Jul 2016 11:59 pm
Weather Station: Davis Vantage Pro2 Plus
Operating System: Win7 Pro
Location: Australia

Re: HTML Help?

Post by Phil23 » Fri 09 Aug 2019 12:49 am

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>
Image

Post Reply