converting custom templates to html5

[duke]

On a positive note, I have looked at your progress this morning and note that you only have 3 errors left, well done.

[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&nbsp:<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>

[ace2]

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

[steve]

For the first code, you have "&nbsp:" instead of "&nbsp;". 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".

[ace2]

For the first code, you have "&nbsp:" instead of "&nbsp;". 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

[mcrossley]

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.

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

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

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

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

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

[duke]

You could use media queries to control the size but try this first:

Code: Select all

img {
	max-width: 100%;
	height: auto;
}

[ace2]

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

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

[ace2]

i spoke to soon.....................

doesn't work on IE or Firefox, ok in chrome.......


Now what.................