New Look Website

To bring Informatics more into line with the current College look, and the one currently recommended by the University, as of 5th Sept 2006 we have updated our standard headers and footers to reflect this new look.

Any web page that was based on the recommended template /template.html will pickup the new look. For those page authors that would also like to use the standard left navigation menu, then use the new /template-leftnav.html template.

A bit more detail

What follows is a bit more of the technical detail, which will be of little interest/relevance to most people. You have been warned.

We are trying to move away from using tables to control the layout of pages, and most of the new look is achieved via Cascading Style Sheets (CSS). However the support for this in browsers varies, and to get something basic that works in both Internet Explorer and Firefox, without resorting to CSS parsing bugs, means that perhaps it isn't as slick as it could be.

We are also generating a doctype that puts Internet Explorer into "Standards mode", rather than "Quirks mode", which means some pages actually render worse than they did before. These pages probably had workarounds for IE's non-compliance, and coding for a more compliant browser should give you better results on IE now.

Right menu bar

There are the beginnings of a standard right menu bar layout. However, as this isn't specified in the current College look, we've had to improvise. Some pages are using it, eg the about and alumni pages.

To use it, create a <div id="rightnav"> block around the text you want on the right menu. It's a fixed width, and there is a corresponding class="indentrightnav" which you can assign to a following content <div> to allow for it. eg your page might look a bit like this:

<!--#include virtual="/ssi/doctype.inc"-->
<TITLE>About Informatics at Edinburgh</TITLE>
<!--#include virtual="/cgi-bin/metabase"-->
<!--#include virtual="/ssi/header.inc"-->
<!--#include virtual="/side.inc"-->

<div id="rightnav">
<ul>
 <li><a href="overview.html">Overview</a>
 <li><a href="vision.html">Vision</a>
 <li><a href="contact.html">Contact</a>
 <p>Some plain old text in here
</ul>
</div> <!-- /rightnav -->

<div class="indentleftnav indentrightnav">

<p>Your content here ...

</div>

<!--#include virtual="/cgi-bin/locationbar"-->
<!--#include virtual="/ssi/footer.inc"-->

We are still working on it, so if the tags you use don't look right, then we've probably not set an appropriate style yet for that combination. Contact the services unit via the support form, and we'll see what we can do.

Also note in the example above, the use of the "indentleftnav" class, as we're including the standard right "/side.inc".

Author: Neil Brown neilb @ inf

Home : Systems : Web : Publish