Layout and Template

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 in where I want, and that they will flow in row order.
  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, and in order for them to 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 needs to 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 install 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 than 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 inject 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, 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. The Released files can, and should, be consolidated, to eliminate file bloat.

Absolute vs Relative – more on this topic.

possibly, absolute dictates page width / height

 

 

Author: Daddy Raccoon

My chronological age is about twice my self-image age and about three times that of my maturity. I have two daughters and they both seemed to me to be older than me by the time they were twelve.

Leave a Reply