Showing posts with label XHTML. Show all posts
Showing posts with label XHTML. Show all posts

Saturday, 15 January 2011

Mail Validation And Sending


All the following is the text from the webpage www.RichsWebArchive.com/aboutthissite/mailvalidation/index.php and it reads as though you are viewing the actual page:

This page is the follow-up to Pop-up Mail Form and deals with the validation of the input from that form and the sending of the message it generates. It will hopefully outline a safe and secure method of implementing the sending of mail from a mail form.

There is an item on the blog previous to this page which talks about setting up the mail form, it's probably a good idea to check this or the Pop-up Mail Form page on this site out before reading the rest of this.

You can download a zip archive of the relevant files called rwa_mailform1.zip. Files in the archive are from 15.01.2011 and may not reflect he current state of the site. Any links in this page to sendmail.php will instead take you to a file called sendmail_publish.zip - this is a version of sendmail.php with my address and key removed.

I had several objectives to achieve when setting up the mail form, these are the ones which remain to be sorted:


The following original objectives still need some action to complete:

  • Pass a sub-string of the referring page's url forward
  • Enable a CAPTCHA box on the form.

First of all a word or two about the sendmail.php file which this page is about. It's basically a nested PHP structure which walks through the stages of validation. Error handling is all dealt with within the page. Once all validation is passed the page sends the message.

The first stage in the validation process is to check to see if the input from the CAPTCHA box on the mail form was correct. This is dealt with by the following code:

require_once('recaptchalib.php');
$privatekey = "YOUR_PRIVATE_KEY_GOES_HERE";
$resp = recaptcha_check_answer ($privatekey,
 $_SERVER["REMOTE_ADDR"],
 $_POST["recaptcha_challenge_field"],
 $_POST["recaptcha_response_field"]
);
if (!$resp-<is_valid) { // the CAPTCHA was entered incorrectly
 echo ">h4<Error - CAPTCHA words entered incorrectly.>/h4< \r\n";
 echo "Please  hit the button below and try again. >br/<>br/<";
 ?<
  >FORM<
   >INPUT TYPE="button" VALUE="Back" onClick="history.go(-1);return true;"< 
  >/FORM<
 >?php
}

The first six lines do the check for you. They are taken from the code you are sent when you sign up for your access keys. The variable $resp will hold the value true if validation is good.

The line starting if (!$resp-<is_valid) is the beginning of the nested validation structure. The following lines are the error-handling for incorrect CAPTCHA input.

Once CAPTCHA input verification is true the following code comes into play:

else { // CAPTCHA verification ok, now read variables passed from mail form
 $name = $_REQUEST['name'] ;
 $address = $_REQUEST['address'] ;
 $subject = $_REQUEST['subject'] ;
 $subjectUser = $_REQUEST['subjectUser'] ;
 $subject .= "-";   //build subject string
 $subject .= $subjectUser;
 $to = "YOUR_EMAIL_ADDRESS_GOES_HERE";
 $message = $_REQUEST['message'] ;

This code sets up a bunch of local variables with the input from the mail form. It also joins the two fields subject and subjectUser with a - in between them.

The following code will prevent direct calling of this page:
if (!isset($_REQUEST['address'])) { //catch direct calling of this page
 echo ">h4<Direct calling of this page is prohibited.>/h4<";
 echo '>h4<Please >a href="JavaScript:window.close()"<Close>/a< this window to continue.>/h4<'; 
}

This test is now redundant as the CAPTCHA test would fail if the page was directly called, i.e. not called from the mail form. I've left it in here as it does no harm and I might like to use a version of this page without the CAPTCHA test in the future.

Now it's time to make sure that the Your Address and Message fields are not empty:
} // catch empty address or message fields
elseif (empty($address) || empty($message)) {
 echo ">h4<Error - missing information.>/h4< \r\n";
 echo "Either the >emph<Your Address>/emph< or >emph<Message>/emph< fields are empty.>br/<>br/<";
 echo "Please  hit the button below and fill in the missing information. >br/<>br/<";
 ?<
  >FORM<
   >INPUT TYPE="button" VALUE="Back" onClick="history.go(-1);return true;"< 
  >/FORM<
 >?php
}

The code checks to see if either field is empty and if so throws the error handling code back to the user. This is followed by this code:

} // validation good so far
else {
 // In case any of our lines are larger than 70 characters, we should use wordwrap()
 $message = wordwrap($message, 70);
 // To send HTML mail, the Content-type header must be set
 $headers  = 'MIME-Version: 1.0' . "\r\n";
 $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
 $headers .= "To: $to" . "\r\n";
 $headers .= "From: $name >$address<" . "\r\n";

This does a little tidying up - it wraps the message field to lines of 70 characters and sets up $headers string that will be sent with the message.

Next comes the following code to prevent Injection Attacks:
// function to check for injection attack from spammers.
function isInjected($str) {
 $injections = array( //set array of characters/strings to detect
  '(\n+)',
  '(\r+)',
  '(\t+)',
  '(%0A+)',
  '(%0D+)',
  '(To:+)',
  '(cc:+)',
  '(boundary=+)',
  '(%08+)',
  '(%09+)'
 );
 $inject = join('|', $injections);
 $inject = "/$inject/i";
 if(preg_match($inject,$str)) {
  return true; // injection attack characters detected
 }
 else { 
  return false; // no injection attack characters detected
 }
}

// now check for injection attempt
if (isInjected($address)) { // injection attack detected 
 echo ">h4<Sorry - illegal characters in the Your Address field.>/h4< \r\n";
 echo 'Please hit back button below and edit the address. >br/<>br/<'; 
 ?<
  >FORM<
   >INPUT TYPE="button" VALUE="Back" onClick="history.go(-1);return true;"< 
  >/FORM<
 >?php
}

Firstly this sets up the function isInjected which will check for the presence of a number of special characters and strings in the email address entered in the form. Then the function is called and if any illegal input is found the code throws the error handling at the user.

OK, so now all validation has been passed, it's time to send the email:
else { // all validation ok - so send message.
 if (mail( $to, $subject, $message, $headers )) { //on successful send
  echo ">h4<Mail Sent>/h4<";
  echo "From: $name - $address >br/<Subject: $subject";
  echo '>h4<Please >a href="JavaScript:window.close()"<Close>/a< this window to continue.>/h4<'; 
 }
 else { // send failed
  echo ">h4<Sorry - an error has occurred>/h4< \r\n";
  echo 'Please  hit back button below and try and send the message again. >br/<>br/<If that fails then please >a href="JavaScript:window.close()"<Close>/a< this window and try again.>/h4< >br/<>br/<'; 
  ?<
   >FORM<
    >INPUT TYPE="button" VALUE="Back" onClick="history.go(-1);return true;"< 
   >/FORM<
  >?php

 };

The second line is the key here. If the email is successfully sent then a confirmation is sent to the user and they are asked to close the pop-up window. If sending fails error handing code is sent instead.

That's it. Hopefully you can now setup a fully functioning and secure mail form and send-mail script. Your eMail address is never visible to anyone - the PHP keeps it away from browsers and hopefully spiders too, the CAPTCHA mechanism should protect you from machine-based attacks and you are protected from injection attacks too.

Once again, all the preceding text is from the webpage www.RichsWebArchive.com/aboutthissite/mailvalidation/index.php and it reads as though you are viewing the actual page:

Friday, 14 January 2011

Pop-up Mail Form


All the following is the text from the webpage www.RichsWebArchive.com/aboutthissite/popupmailform/index.php and it reads as though you are viewing the actual page:

I wanted to replace the somewhat clunky message options on the site, as outlined on the Stopping Spambots page, with a safe and secure pop-up mail form.

There is an item on the blog previous to this page which talks about this a bit, it's probably a good idea to check it out before reading the rest of this.

You can download a zip archive of the relevant files called rwa_mailform1.zip. Files in the archive are from 15.01.2011 and may not reflect the current state of the site. Any links in this page to sendmail.php will instead take you to a file called sendmail_publish.zip - this is a version of sendmail.php with my address and key removed.

I had several objectives to achieve here:
  • Building the form
  • Open the form in pop-up window
  • Validate user input
  • Prevent Injection Attacks
  • Pass a sub-string of the referring page's url forward
  • Enable a CAPTCHA box on the form.

In tandem, almost, with making this page was the creation of another page called sendmail.php which does all the validation, error handling and sends the message. This page will not cover these issues. For a full run-down on sendmail.php please go to the Mail Validation & Sending page.

The first task was to create the pop-up window for the form to go in. There are two parts to this, the first is a link in the navbarlinks.htm file:

>a href="/contact/mailform.php" onClick="popUp(this.href, 'fixed', 495, 605);  
return false;" target="_blank"<Send me a message about this page>/a<

The href in the link targets the mailform.php page. The onClick part of the tag calls the JAVA function to open the href in a pop-up window. There are four parameters sent to the popUp function: this.href takes the href defined earlier in the link; 'fixed' tells the function to make a pop-up window of fixed dimensions, as defined by the last two parameters; width, and; height.

The second part is the JAVA function to open the pop-up window, which is placed in the sitewideheadcode.htm file, and thus loaded into every page on the site:

>script type="text/javascript"<
<!--
 var newWin = null;  
 function popUp(strURL, strType, strHeight, strWidth) {  
  if (newWin != null && !newWin.closed)  
   newWin.close();  
  var strOptions="";  
  if (strType=="console")  
   strOptions="resizable,height="+ 
   strHeight+",width="+strWidth;  
  if (strType=="fixed")  
   strOptions="status,height="+  
   strHeight+",width="+strWidth;  
  if (strType=="elastic")  
   strOptions="toolbar,menubar,scrollbars,"+  
   "resizable,location,height="+  
   strHeight+",width="+strWidth;  
  //set new window to open in centre of screen
  var left   = (screen.width  - strWidth)/2;
  var top    = (screen.height - strWidth)/2;
  strOptions += ",top="+top+",left="+left;
  //open window
  newWin = window.open(strURL, 'newWin', strOptions);  
  newWin.focus();  
 }
//-->
>/script<

This robust JAVA function for opening a pop-up window, came from a page at sitepoint.com. It does some clever tricks which are explained really well on their site. I added the three lines which centre the new window on the screen. Previous to this I had been using alternative code from this page at www.htmlcodetutorial.com. Check the link out, there is a fantastic Under The Hood link there also which explains the JAVA code line-by-line. Unfortunately this function stopped working properly - it either opened my mail-form in the same window or a new tab - so I replaced it with the one above.

The next task was to design the form itself. Forms are pretty straightforward in XHTML, a good explanation can be found at w3schools.com. Here is the code for the form from mailform.php:

<form id="thisform" method="post" action="sendmail.php">
<div class="bluetext" style="position:fixed; top:1%; bottom:1%; left:1%; background:#ebf5fc; right:1%; " >
 <fieldset>
  <legend style="color:black; ">  Send an email to Rich's Web Archive: </legend>
  Your Name:<br />
  <input type="text" name="name" size="20" tabindex="1" /><br />
  Your E-mail Address:<br />
  <input type="text" name="address" size="40" tabindex="2" /><br />
  <input type="hidden" name="subject" size="60" readonly />
  <script type="text/javascript" language="JavaScript">
   <!--
   // set subject to shortened url of referring page
   var refpage = new String(document.referrer.replace( "http://www.richswebarchive.com", "RWA"));
   document.forms['thisform'].elements['subject'].value = refpage;
  //--<
  </script>
  Subject:
  <script type="text/javascript" language="JavaScript" >
   <!--
   document.write(document.forms['thisform'].elements['subject'].value);
  //--<
  </script>
  <br />
  <input type="text" name="subjectUser" size="60" tabindex="3" /><br />
  Message:<br />
  <textarea name="message" cols="70" rows="5" wrap="soft" maxlength="500" tabindex="4" /></textarea><br />
  <p>Your message can include <code>html</code></p>
  <?php // set up CAPTCHA box
   require_once('recaptchalib.php');
   $publickey = "6LcldMASAAAAAJhgijHTLH-0JWhliBd_G6KdmCIQ";
   echo recaptcha_get_html($publickey);
  ?>
  <br/>
  <input type="submit" value="Send">
  <input type="reset" value="Reset">
 </fieldset>
</div>
</form>
<script type="text/javascript" language="JavaScript">
 <!--
 // set focus to first field 
 document.forms['thisform'].elements['name'].focus(); 
//-->
</script>

I'm not going to go into explaining about the form elements as others do it much better elsewhere. It's a simple form with 4 visible fields and 1 hidden field for passing the referring page's url.

The first thing of note then is the two lines of JAVA that deal with the url:

var refpage = new String(document.referrer.replace( "http://www.richswebarchive.com", "RWA"));
document.forms['thisform'].elements['subject'].value = refpage;

The first line creates a new var of type String called refpage with the referring page's url, stripped of the string http://www.richswebarchive.com which is replaced with RWA. The second line then puts refpage into the subject element of the form, which is hidden as a field on the form, although it is displayed after Subject: on the mail-form, above the subjectUser field. The subject and subjectUser fields will be combined into one in the sendmail.php page.

This is a neat feature of the mail-form as it means I'll always know what page a user was looking at when they felt motivated to send me a message.

The next thing to mention is setting up the CAPTCHA box on the form. You have to sign up with a CAPTCHA service first and get hold of the two keys, one public one private, which make the whole system work. The instructions given and the bit of code they send you are simple and easy to understand. The following PHP code is inserted at the bottom of your form, just before the submit button:

<?php // set up CAPTCHA box
 require_once('recaptchalib.php');
 $publickey = "6LcldMASAAAAAJhgijHTLH-0JWhliBd_G6KdmCIQ";
 echo recaptcha_get_html($publickey);
?>

All you have to do is edit in your own public key and that's it for this page. The verification of the input takes place in the sendmail.php page.

One final thing to note is the JAVA line at the end of the body section which sets the focus to the name field:

document.forms['thisform'].elements['name'].focus(); 

So that's it, the mail-form is set up, we're about half way there. Now it's time to look at the Mail Validation & Sending page to get the rest of the story.


Once again, all the preceding text is from the webpage www.RichsWebArchive.com/aboutthissite/popupmailform/index.php and it reads as though you are viewing the actual page:

Wednesday, 12 January 2011

Forms

OK, so next on the learning treadmill is forms.

I want to create a simple pop-up form to replace the current slightly clunky contact links. I've had a look at a few, supposedly simple, downloadable versions of code to do this and they seem remarkably complex. It has highlighted a few security issues though. The main one obviously is to hide my email address from the spambots.

There's also going to be some fun learning the JAVA to validate the form input.

Tuesday, 11 January 2011

Using JAVA To Resize Elements

I noticed a cool feature on a Google page while I was getting the custom search going. You can click on the divider between the left-hand bar and the main contents and it hides the left-hand bar. So I thought I'd try and get something similar going on my site.

I looked at the code on the Google page for a while but found it totally impenetrable. So I did a bit of searching around and decided that using some JAVA was the way to go. I found this page at w3scools.com. This is a fantastic site with clearly explained simple examples that you can run with quickly.

Rather than try and implement the ideas on my site straight away I though it best to try some sample bits of code to test the concepts needed.

The first of these is called test.htm. It's pretty simple - all it does is use 1 JAVA function to resize a box on the screen.

The second one is called test2.htm. This does quite a bit more. This has 4 JAVA functions. I have to admit I don't really understand the purpose of the getItem function but I left it in there as it's called by the second function toggleItem, which toggles the display status of box1 on and off.

There are two buttons on the screen, used to call the last two JAVA functions, which toggle the display status of box1 and re-size box2.

It didn't take to long to work it all out thanks to the helpful advice from w3scools.com. Now I need to implement the same ideas on my site.

Monday, 10 January 2011

Google Custom Search 1

Today I've been trying to set up a Google custom search on the site. Sounds simple doesn't it. It wasn't.

Actually setting up the custom search at Google was pretty straightforward. Integrating it into my site and getting the results to show up how I wanted them in a custom results page was not.

I've just about managed to get the search box how I want it in my title bar by cribbing various bits of other peoples code. I also have a results page. Now I need to edit this so that it sits with the rest of the site properly - tomorrow morning's first task.

The main thanks should go to Google employee Jeff S. His response to a query on a Google group 'Google AJAX Search APIs', item 4 on the page, is what finally made it all fall into place. Thanks Jeff.

His solution uses quite a bit of JAVA, which as yet I don't fully understand. But who cares, it works.

Saturday, 8 January 2011

Stopping Spambots

All the following is the text from the webpage www.RichsWebArchive.com/aboutthissite/stoppingsmapbots/index.php and it reads as though you are viewing the actual page:

I was concerned about Spambots (evil programs which search web pages for email addresses so they can send you spam) harvesting my email address from the pages on the site.

(added 15.01.2011 - This method has been superseded by the new Pop-up Mail Form.)

I didn't want to do anything too complex just yet using forms or scripts. So the following line of code has made it's way into my site:
< a href='mailto:rich"_at_"richswebarchive"com
?subject=Site Objectives' title='replace "_at_"  
with the at sign and " with a dot.'> 
Send me a message about this page </a>
It looks more complex than it is. the mailto: address is enclosed in single quotes allowing you to pass through the double quotes inside them to the mail client. The user must then edit the email address as per the instructions in the title part of the tag - replace "_at_" with the at sign and " with a dot.

The text in the title part of the tag also shows up as a tool-tip when you hover over the link.
Hopefully anyone reading my site will be savvy enough to deal with this and the double quotes in the email address that gets passed to the mail client should be enough to fool the spambots into ignoring my address.

I fiddled with the CSS for mailto links with the following line:
a[href^="mailto"]:hover:after { 
content: " > please edit address"; }
This adds the text > please edit address after the link when the mouse rolls over the link. I also used the a[href^="mailto"]: selector to set the various colour states for the mailto tag as these are not set when you set the colours for normal links.

Once again, all the preceding text is from the webpage www.RichsWebArchive.com/aboutthissite/stoppingspambots/index.php and it reads as though you are viewing the actual page:

Site Logo

All the following is the text from the webpage www.RichsWebArchive.com/aboutthissite/logo/index.php and it reads as though you are viewing the actual page:

I wanted to set the logo for the site that comes up by the site name in browsers.

The first thing to do is create your logo. It needs to fit in a 16 x 16 pixel box, which is pretty damn small. I started by creating a 160 x 160 pixel .png file in Adobe Fireworks.

Then I found a great website that converts the .png file into the files you need, pops then in a .zip archive with instructions for how to use them. It gives you a static version and an animated one. I renamed one of these and put in the site's root directory.

Instead of putting the code line:

< link rel="shortcut icon" href="/rwaicon1.ico" > 

into every page on the site I decided to make a .inc file called sitewideheadcode.inc and I put the code in there. Then I put a php include to load sitewideheadcode.inc at the end of all the head sections in the code on each page.

So now i can easilly add code to the end of every head section on the site and my logo works. If I need to change the logo it's just one edit.

Once again, all the preceding text is from the webpage www.RichsWebArchive.com/aboutthissite/logo/index.php and it reads as though you are viewing the actual page:

Navigation Bar Links

Friday 7th January 2011


All the following is the text from the webpage www.RichsWebArchive.com/aboutthissite/navbarlinks/index.php and it reads as though you are viewing the actual page:

It occurred to me that the links in the navigation bar can and indeed should stay the same from page to page of the site. So I wanted to have 1 piece of code for the links which I could then call from any page I choose. Thus if I change a link I only need edit one file instead of many.

I wanted a method of importing html into html.

A quick Google search and a bit of reading led me to believe that using a php call include was the easiest way to go about things. It turns out that it was pretty simple too. More of an issue was being able to test pages containing php without having to upload them to a server and this is discussed in the My Sytsem page.

It was really easy to do. I copied the code for the links into a seperate file called navbarlinks.inc, which I saved in the site's root directory/folder. Only the code for the links, not their surrounding div tags. In place of the links in the main XHTML document I put the following line:

<?php include('../navbarlinks.inc'); ?>

This copies the code from navbarlinks.inc directly in it's place.

All that then remained to do was to change the extension of the index.htm file to .php. This tells servers to parse the page for php and translate it into html before they send the page to your browser. I had to upload the files to my server before I could tell if it worked.

Luckily this was one of those rare and joyous occasions where everything worked absolutely right first time. I then went on to getting the php to work locally. That took a bit more time, but it was free and pretty smooth.

Once again, all the preceding text is from the webpage www.RichsWebArchive.com/aboutthissite/navbarlinks/index.php and it reads as though you are viewing the actual page:

Site Objectives

Originally written on Friday 7th January 2011


All the following is the text from the webpage www.RichsWebArchive.com/siteobjectives/index.php and it reads as though you are viewing the actual page:

How much time is there? Eventually I need to earn some money and stop doing this. In the mean time though I hope the site will grow into several different sections coving the main technologies in use on the web.

To begin with I'm concentrating on XHTML and CSS and getting used to writing the code. Next up on this front is to write a form and have the information emailed to me. Maybe I'll try a bit of JAVA to validate the input.

Eventually I'll take a look at some server-side technologies, Perl and MySQL probably.

All the files and associated code for this site are freely available for downloading. You can do whatever you like with them. Generally I'll link a download to a particular page when I've finished it. One thing to be aware of is that these downloads are like a snapshot in time, and may not reflect the current state of the site.

I've found a friend who wants me to write a website for their business too. This is a fantastic opportunity to learn on a real job and earn some money too. I'll be documenting anything new and useful I learn along the way with that here too.

I have also made a companion blog to this website. The main articles here will be copied there but I'm also going to use it just to jot down small quick things I learn along the way.

Once again, all the preceding the text is from the webpage www.RichsWebArchive.com/siteobjectives/index.php and it reads as though you are viewing the actual page:

Scalable Page Layout with Fixed Banner and Navigation Bar

Originally written on Thursday 6th January 2011


All the following is the text from the webpage www.RichsWebArchive.com/aboutthissite/splftnb/index.php and it reads as though you are viewing the actual page:

This page was my first stab at getting XHTML and CSS to work together and it has become the basic design for this site. My goal was to have a fixed top banner and left-hand navigation sidebar with a scrolling main content area, all in a scalable page. This sounds simple but it took me about a day to learn how to get it like this.

I'm sure there are lots of other ways of achieving these goals and probably more simply than I have done it. I am a total novice after all. Hopefully though my solution is pretty straightforward and the code fairly tidy. All formatting, both content and layout, is dealt with by the CSS stylesheet.

There are two files used to produce this page: index.php - the XHTML code for this page and rwa1.css - the stylesheet for this page. The stylesheet rwa1.css must reside 1 directory/folder up from index.php if you want to mess about with them or you can edit the reference that loads the CSS file in index.php.

It maybe that you cannot directly open files with the .php extension in your browser - if this is the case then you can download an older version of the files using the .htm extension instead. All files in the older version must reside in the same directory. Please see the My Sytsem page for information about running php on your system.

I'm going to assume that since you are reading this you have at least some basic knowledge of XHTML and CSS and how they realate to eachother. Most especially you will need to understand the use of class and id element identifiers. They are really the key to how the CSS affects the XHTML. If you don't understand this then you won't get the rest of it. There is a good explanation about both at W3.org.

OK, so now down to talking about the code. The key behind this page is using the stylesheet to manage the layout and keeping the XHTML organised into distinct div tags so that the content picks up the correct formatting from the stylesheet.

I'm not going to go into minute detail about how every value and attribute is set, I'd fall asleep doing it. Hopefully I will point out the key facts and you can work out the rest by mucking about with the code yourself. Take bits out, put bits in, move them around, change values and properties and see what happens. It's always easy to use comments to block sections of code and then easy to remove them too.

The head section is quite simple. It sets the character set to utf-8, sets the page title - this shows up in your browser as a tab-lable - and calls the stylesheet rwa1.css.

The body section is where all the action is. It contains 4 distinct div tags. Each one neatly contains all the content for a specific section on the page. The names are meaningful.

The first div is of id titlebar. This places a rectangle at the top of the screen with the page title which is also a link back to the Home page. There are several formatting properties set in the stylesheet for this. These are the three relevant lines:

#titlebar {position:fixed; top:0px; left:1%; 
 margin-top:5px; background:#FF0000; 
 width:98%;}
#titlebar a {color:#FFFFFF;} 
 /* fix title bar links to solid white */
#titlebar h1 {font:30px "Helvetica Bold", 
 sans-serif; text-align:center;} 
    

Briefly, this code fixes the bar at the top of the page, i.e. it will not scroll, sets the background colour, the link colour to solid white, regardless of state, and sets the font properties.

Next up is the navigation div. This places the sidebar at the left of the screen and the links inside it. The CSS is fairly similar to that for the titlebar. The only major difference is that the display property is set to block - this makes the links come out on separate lines with less code in the XHTML.

The contents div comes next. This is the section which contains all this text. The only feature of note here is the CSS property/value pair overflow:auto which tells the browser to add the scrollbar if it's needed. I ended up adding this pair to the navigation div too.

Finally there is one further div called pagelinks. This was just a test originally to see if I could get a scalable and scrollable box on the page. The idea of putting links to various parts of this page came later.

There's one more thing I want to mention about the CSS and it's to do with the scalability or dynamic re-sizing of the page. Play with the window size of the browser window you are using to view this page and you will notice that the sections dynamically re-size themselves as you do it. This is achieved by using percentage values for many of the values in the CSS code.

Once again, all the preceding text is from the webpage www.RichsWebArchive.com/aboutthissite/splftnb/index.php and it reads as though you are viewing the actual page: