• Introduction
• Simple Conversion from NetTalk 4 or 5
• Removing the Border Extension
• Simplifying the HTML
• Using CSS
  

One of the big "differences" between NT5 and NT6 is the header. Well, actually the difference is trivially small, but it has a reasonably large visual impact for some users. The purpose of this document is to explore the header change in a bit more detail.

So what was the actual change? Not much really, the Header is a Source procedure, and the "optional" div wrapped around source procedures is no longer optional.

So your header gets an extra div. So what's the problem? Well the div gets a "default" css setting of 'adiv' (that's a left-over from NetTalk 5). Removing the 'adiv' solves most of the issues outright. Well almost.

You may notice that your header is a bit different - the text in the header is smaller, and not centered. I'll cover the reason for that in a bit but if you want to get those back, go to the WebServer procedure, Extensions, NetTalk extension, Settings, Styles, Files, and tick on Include CSS from NetTalk 4. Then click on the Run Gzipall button.



At this point you can stop. The sections that follow discuss possible updates to the header which you may want to try.

Many headers made use of the "Net Web Border" Extension. This was especially popular in NetTalk 4, and many of the examples used it. In NetTalk 6 the border can more easily be created, and manipulated, using CSS, so the extension is now somewhat redundant.

You can remove the xHtml from inside the border extension, moving it to the xHtml of the NetWebSource procedure using the following steps;

First, find the existing HTML in the Border Extension, and copy this to the clipboard;



Now navigate to the normal xHtml tab, and paste the Html in there



Notice that the routine name can be set to anything unique, but remember to set the Location to After Body.

Once that's done you can go ahead and delete the old Border Extension.

The header now looks something like this;

similar to before, but without the border.
one simple way to add a border back is to wrap the html in a <fieldset> tag.
Another way is to use CSS. But before we get there it's time to look a bit closer at the HTML itself.

The HTML in the example above is

<table class="headingtable">
  <tr>
    <td width="10%"><img border="0" src="images/money.png" /></td>
    <td width="80%">eBooks - A NetTalk 5 Example</td>
    <td width="10%"><a href="javascript:top.close()"><img border="0" src="images/close.png" /></a></td>
  </tr>
</table>

This is fairly typical of early NetTalk 4 Web Server headers. It contains a <table>, and makes use of a style called headingtable. The table has a single row, broken into three cells.

One thing that can immediately be done is to remove the right-most cell. This contains a "power off" image, which, when clicked, closes the browser. Except that most browsers no longer allow this behavior, so while it works in some cases it mostly doesn't work.

<table class="headingtable">
  <tr>
    <td width="10%"><img border="0" src="images/money.png" /></td>
    <td width="80%">eBooks - A NetTalk 5 Example</td>
  </tr>
</table>

The second thing to do is to stop using the <table> as a layout mechanism, and use <div> tags instead. This makes the code smaller and cleaner.

<div><img border="0" src="images/money.png" /></div>
<div><h1>eBooks - A NetTalk 5 Example<h1></div>

At this point the header contains the content we want, and no more. We need to apply the styling to make it look right, and that we do with CSS.

If you haven't already done so, I recommend watching the Webinar on CSS - ClarionLive Webinar #97 How to apply CSS to a Net Web Server application.
CSS is really very easy once you get the hang of it, and super-powerful. It will add a whole dimension to your web apps with almost no effort at all. NetTalk is strongly aligned towards CSS and it's easy to apply your CSS changes to your whole site.

Of course not all headers will look the same, that's the whole point of CSS, so in this section I'll suggest some possible starting points, however you're free to use whatever CSS you like, including starting with one of these points and adapting it to your needs.

nt-site-header

ui-widget