So a bit more reading, a bit more understanding and I think I am finally there with what I want. In my previous post I mentioned what it was I wanted from my Web Site.. Problem I was getting was positioning, flow and general layout.  What I have arrived at that works is the following:

1. <header>, <div id=”mainBody”>,<footer> as the first order layout. Nothing special about that, and using default position  and display options these elements will line up in row order.
2. Within <div id=”mainBody”> I added an <img> element. This will be the background. The src attribute is set by JavaScript depending on orientation / aspect ration of the window. Within the style sheet I set the width to 100%, and zindex to -10 to ensure it will be behind any other  elements that are included in <div id=”mainBody”>.
3. All other elements that are added to the <div id=”mainBody”> have position:absolute and display:inline-block.  This allows me to position them where I want, and ensures that they will flow in row order. (See https://www.w3schools.com/css/css_inline-block.asp for explanation of display: options)
4. For the template page for the main subject content I have, from left to right:
   1. <nav> with width=15% height=100% – Selection of items on the topic
   2. <div> with width=70% height=100% left=15% – Main content
   3. <aside> with width=15% height=100% left=85% – Any aside notes.
5. The height=100% ensures that the elements fill the full area from <header> to <footer>
6. The background for these three content elements will be white, slightly transparent. In order for the three columns to visually appear separate, I will have to play around with width percentages, and borders. Lets see what makes for a good visual impact.

Next step is PHP and how to populate a template page from information from a d/b. Because what I am not going to do is produce a separate static page per subject per topic. Rather there will be a template page, as described above populated via PHP.

A bit premature about the ‘Next step is PHP’ . As it transpires getting the visuals and layout to work well with Landscape and Portrait took a lot of trial and error. A couple of pointers:

1. Where the background image dictates the ‘active’ size of the page, we need:
   1. header
   2. image
   3. footer
2. With any text needing to have position:absolute above the image
3. We don’t need the <nav> and <aside> elements on these pages. What we want is the text centred, and spaced inset as needed.
4. On non-background image pages we need <nav> and <aside>.
5. <nav> is position:fixed
6. Both <div class=content> and <aside> need to be moved left to avoid <nav> (<nav> as fixed does not enter into the document flow)
7. <aside> somehow needs to be aligned with the main text to which it relates (don’t know how to do that yet)
8. The colours and visuals on these pages needs some thought.

Just about there with a template. Couple of issues:

1. With <nav> fixed, we have to move both <mainContent> and <aside> left the same width as <nav>. In itself, not an issue, except the maths didn’t quite work, and if <mainContent> and <aside> attempted to occupy all the remaining width (ie. all widths totalled 100%), then a slight resize could trigger a complete loss of the <aside> element. Solution was to reduce total width to be just 99%.
2. By default inline-block <div> elements align at the baseline. Reset vertical-align:top. Solved this.
3. I also need to create an element that has an Image with an overlaid Title, as that combination looks like playing a significant part in my content pages.

I think the first main content page though is going to be a ToDo page.

Astonished that after so long there is still no ‘HTML Include’ facility as standard. There is an RFC in with W3C, and it probably will be accepted, but then its still a wait until the Browsers support it. Difficult to believe. I was working round that problem 20 years ago. Look on the web and there are a huge number of ‘Work around solutions’

Today I installed WAMPServer for managing the installation. Two problems:

1. WAMPManager will not start-up. Reason: Unknown. The app is there in task manager, but nothing is coming up. Tried starting as Admin, no difference. Then uninstalled and re-installed as Admin. No difference. Am now searching the logs.
2. The WAMP Server starts up, so Apache is installed and running. Cannot find the php config files. Two reasons for this. The first is that I need to install as Admin. The second is that I need to ensure the hosts file under <system32>/devices is open for reading. Executed these two, and everything now looks good.
3. So problem with WAMPManager resolved. What I had not realized was that WAMPManager starts up as a Tool Tray ICON/App. Once I realized that and started it under Admin everything was fine. I then went on to implement/test an env whereby I can inject HTML into the output supplied by php. I now have an env whereby I can request a page, and the <head>, <header>, and <footer> elements are supplied from snippets. Brilliant

Web Page Templates, Dynamics and php

The first problem to try to solve was one I had encountered several years earlier – how to inject html snippets into an html page? I was expecting that by now HTML would have had this feature. No! There are a number of solutions on the internet using JavaScript, but all have their own quirks and issues. I dropped back to using server-side construction via php and MySQL. Solution I devised was:

1. A common php page that took a single parameter.
2. Parameter was an index into a table in d/b. Table had an text column containing html
3. Within the html we could include filenames, encased in escape chars, to indicate html to inject. This mechanism was recursive – ie the injected files could also include escaped filenames to inject.
4. Variables in the html, encased in different escape chars to the filenames, defined names pointing to a (page.name):value pair table in the d/b from which the values were retrieved and substituted. These were also recursive in implementation. ie The injected text could also include variable name (and file names) to substitute.

The whole provides, what at the moment feels like a light-weight, but workable mechanism for allowing me to have multiple pages of similar structure, but differing content.

Little Changes, Big Issues:

So this entry is about keeping changes isolated. The problem  I am encountering is, again, one I had back in the 1990’s, where changes are not isolated. I made a change to the style of a class for the template page, and it worked well. The problem of course is that the class is used on none templates pages and these no longer displayed correctly. That in itself is annoying. What makes the problem several degrees worse is that the cause and effect are not associated.  The change to the class style was made on day ‘n’. The adverse effect on the none template pages was not noticed until day n+m., at which point a large number of changes have been made, and we do not know which changed caused the adverse effect.  So it’s important during web site development that you managed / control changes to CSS styles.

One way would be to differentiate between Released CSS files and Development / Release Candidate files. Changes to Released files would trigger a full site test.

Another way would be to ‘know’ which pages use a particular style, so that when a style is changed you know which pages to test.

As an aside – Released files can, and should be consolidated, to eliminate file bloat.

Absolute vs Relative – more on this topic.

possibly, absolute dictates page width / height