Page 2 of 3
Re: converting custom templates to html5
Posted: Fri 15 Aug 2014 4:13 am
by duke
On a positive note, I have looked at your progress this morning and note that you only have 3 errors left, well done.
Re: converting custom templates to html5
Posted: Fri 15 Aug 2014 4:26 am
by ace2
Slowly getting there...
Have Webuilder now, but having some issues with some things.
1. I have a script to output last day/hours/min it rained that runs on the actual line, the validator doesn't like at all
2. my email link has issues even if Webuilder created the linking???
http://www.users.on.net/~ace2/index3.htm
1.
Code: Select all
Since it last Rained :<script type="text/javascript">
(function(){
var days = Math.floor(937/24/60);
var hrs = Math.floor(937/60%24);
var mins = Math.floor(937%60);
function plur(x){return x === 1 ? '' : 's'};
document.write(days + ' Day' + plur(days) + ' : ' + hrs + ' Hr' + plur(hrs) + ' : ' + mins + ' Min' + plur(mins));
}());
</script>
2.
Code: Select all
<span style="color: #1ACC32">I can also be contacted by EMAIL:
<a href="mailto:ace2.cb@gmail.com?subject=Weather station enquiries" title="ACE2 WEATHER"> ACE2 WEATHER</a></span></p>
Re: converting custom templates to html5
Posted: Fri 15 Aug 2014 5:49 am
by ace2
duke wrote:On a positive note, I have looked at your progress this morning and note that you only have 3 errors left, well done.
I wish that were true, but all error after that third one are ignored!!!!!
only a total of 6.....
see above post for the ones i'm stuck on
Re: converting custom templates to html5
Posted: Fri 15 Aug 2014 7:13 am
by steve
For the first code, you have " :" instead of " ". You also have that text directly inside a table; you either need to put it in a <tr>...</tr> or whatever, or move it out of the table. You can't just put text inside a table without telling it what you want to do with it.
For the second one, you need to encode those spaces in the subject as "%20".
Re: converting custom templates to html5
Posted: Fri 15 Aug 2014 8:20 am
by ace2
steve wrote:For the first code, you have " :" instead of " ". You also have that text directly inside a table; you either need to put it in a <tr>...</tr> or whatever, or move it out of the table. You can't just put text inside a table without telling it what you want to do with it.
For the second one, you need to encode those spaces in the subject as "%20".
Aaaaaaahhhhhhhh. I was staring at that for ages!!!!!
Tx Steve
Re: converting custom templates to html5
Posted: Fri 15 Aug 2014 11:37 am
by mcrossley
steve wrote:You also have that text directly inside a table; you either need to put it in a <tr>...</tr> or whatever, or move it out of the table. You can't just put text inside a table without telling it what you want to do with it.
That text looks like a candidate for putting in table header? ie between <th></th> tags.
Re: converting custom templates to html5
Posted: Fri 15 Aug 2014 11:51 am
by ace2
I just took it out of the table area which resolved that.
So now I only have 2 errors, which have no solution.
One is my PayPal link that requires the address exact.
The other is my blink text which I use CSS for, but it doesn't like the tags.
I think they'll have to remain....
Re: converting custom templates to html5
Posted: Fri 15 Aug 2014 1:49 pm
by SpaceWalker
With HTML5 when you use JavaScript, you do not need to the following:
Code: Select all
<script type="text/javascript">{the JavaScript code}</script>
You only need to use:
Code: Select all
<script>{the JavaScript code}</script>
For the PayPal account link, you need to replace the '&' character with '&' and not leave any spaces between commands. Also the <a> target attribute should contain one of 4 values: '_blank', '_self', '_parent', or '_top' - have a look at the
HTML <a> target Attribute page on the W3Schools site. So your PayPal corrected link should look like this:
Code: Select all
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=3K9E72FVNDNCU" target="_blank">
Now, for the blinking text - very annoying - blinking text was 'in style' years ago and should seldom be used (if never). Most likely, the '<blink>{some text}</blink>' (obsolete) HTML tag and/or the '<span style="text-decoration: blink;">{some text}</span>' CSS code are causing the error/warning message as neither is accepted nor recognized under HTML5.
Re: converting custom templates to html5
Posted: Sat 16 Aug 2014 2:50 am
by ace2
Anyone have any idea on this one
Code: Select all
<!-- Start of Time Lapse setup -->
<div style="width: 100%;">
<table style="border-collapse: collapse; width: 100%;" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="padding: 5px;" align="center">
<a href="lapse1.htm"><img src="lapse1.jpg" alt="lapse1.jpg"width=100%> </a><font size="5" color="red"><#RecentTS format=ddddd d=1></font>
</td>
<td style="padding: 5px;" align="center">
<a href="lapse2.htm"><img src="lapse2.jpg" alt="lapse3.jpg"width=100%> </a><font size="5" color="red"><#RecentTS format=ddddd d=2></font>
</td>
<td style="padding: 5px;" align="center">
<a href="lapse3.htm"><img src="lapse3.jpg" alt="lapse3.jpg"width=100%> </a><font size="5" color="red"><#RecentTS format=ddddd d=3></font>
</td>
</tr>
</tbody>
</table>
</div>
<!-- End of Time Lapse setup -->
I tried replacing the things that are not allowed, but i end up with 3 full size images side by side
page is
http://www.users.on.net/~ace2/video2T.htm
I should also add, it needs to be automatic width so if i'm looking at it on my phone, it doesn't screw the alignment up.
Re: converting custom templates to html5
Posted: Sat 16 Aug 2014 1:05 pm
by SpaceWalker
First, if you are going to make some efforts into updating your pages to HTML5 than you should read about the new standards - as I wrote previously, the
W3Schools is a good start.
For example, both the 'HTML <table> cellpadding' and the 'HTML <table> cellspacing' attributes are not supported in HTML5 - using CSS is recommended.
Code: Select all
<img src="lapse1.jpg" alt="lapse1.jpg"width=100%>
Looking at this code, it is not surprising that you do not get the results you are expecting... The proper way to include an image onto a page is
Code: Select all
<img src="{image source}" alt="{alternate text}" style="width: {some pixels}; height: {some pixels}; border: none;">
It is my understanding that 'percentage' cannot/should not be used for images. A good way to control the size of an image would be to include that image within some <div> tags, such as:
Code: Select all
<div style="width: {some pixels or percentage};">
<img src="{image source}" alt="{alternate text}" style="border: none;">
</div>
Re: converting custom templates to html5
Posted: Sat 16 Aug 2014 2:26 pm
by ace2
Big issue as soon as you have pixels instead of ℅ and open the page on a mobile device, it looks wrong for some reason. The images goes off the page/out of whack.
Re: converting custom templates to html5
Posted: Sat 16 Aug 2014 7:17 pm
by duke
You could use media queries to control the size but try this first:
Code: Select all
img {
max-width: 100%;
height: auto;
}
Re: converting custom templates to html5
Posted: Sun 17 Aug 2014 3:24 am
by ace2
duke wrote:You could use media queries to control the size but try this first:
Code: Select all
img {
max-width: 100%;
height: auto;
}
No luck on that, might have to leave it as is with some small changes
Re: converting custom templates to html5
Posted: Sun 17 Aug 2014 1:54 pm
by ace2
I think I got it.
I put a little code into the CSS.(stolen and edited to suit)
Code: Select all
#myDiv
{
height:auto;
width:100%;
}
#myDiv img
{
max-width:100%;
max-height:auto;
margin:auto;
display:block;
}
Then called the div with id mydiv, performs the same as before on my mobile. only tested on my mobile, as it was my editing tool while at work..
validator finds no errors.
Re: converting custom templates to html5
Posted: Sun 17 Aug 2014 3:12 pm
by ace2
i spoke to soon.....................
doesn't work on IE or Firefox, ok in chrome.......
Now what.................