Genuki stylesheet divs
Each of the divs are named with a class= parameter, except the navbar & footer which is defined to use id=. Where possible defaults have been set so that you do not need to specify all the html parameters that you would normally need if it was a pure html page without using style sheets. E.g. The img for the Genuki logo doesn't need an align= as the style sheet makes sure that it sits on the left of the page.
Where you find something that you think is missing, e.g. an icon on a navbar link, then do contact Phil to see how we can address it.
This is the navigation bar at the top of the page.
<div id="navbar"> <a href="/" class=logo title="GENUKI Home page"></a> <ul> <li class=contents><a href="/contents/LANcontents.shtml">Contents</a> <li class=up><a href="/big/eng/LAN">Lancashire</a> <li class=nearby><a href="/cgi-bin/places?LAN,SD366271,5,Lytham">Nearby places</a> </ul> </div> <!-- end of navbar -->
A link to our home page is the first thing we have. The
class=logo on the <a > has been provided to avoid
having to code the img for our logo. If you aren't hosting your
pages at www.genuki.org.uk then you will of course have to deal
with that by putting in
<a href="http://www.genuki.org.uk/" class=logo></a>
The title="GENUKI Home page" isn't vital, but is a useful addition, as it shows that text when you move the mouse over the logo and thus helps the user notice it.
It would be prefereable to have the logo as the first item in the following list, but at the moment I can't make the logo appear in IE
We embedded the navigation links in a table to try and get some sort of order to them and to avoid them wrapping onto the next line in a narrow window. This resulted in some rather complex html especially when trying to get a consistent alignment independent of browser.
The technique that is used here is to use a list for the links and this is a horizontal rather than a vertical one. Our normal icons are no longer defined in the html, they come as background images from the style sheet. This significantly simplifies the html and makes it much easier for us to change the look and feel in the future if we feel the need to do that. The background image that appears is specified by a
class=parameter on the
- class="contents" -
- class="up" -
- class="down" -
- class="nearby" -
- class="all" -
- class="parishes" -
- class="help" -
- class="new" -
- class="search" -
The main part of the page is everything between the navbar and the footer. There is nothing special to code within this div but it is required and does have some style defined within it.
The introduction part of our town/parish pages and the eqivalent in the higher levels is the place where we have most variation between counties. They all consist of up to four components, a title, an image (usually a map), a quote from a historical directory describing the place, and links to our standard sbject headings within that page. I think we all try to minimise the space it takes up in the page but have different ideas about where the links should go. Some of us like them near the top to minimise scrolling past items we've read before, and some like the quote and image at the top.
I haven't found a way to easily replicate these styles within a style sheet , but have managed an alternative which is near to the ideas of both camps and does seem to be more compact than either.
<div class="intro"> <center><h1>Abram</h1></center> <a href="http://uk.multimap.com/p/browse.cgi?pc=WN25XJ&scale=200000"> <img width=154 height=229 alt="Select map to view larger area" class=right src="../Lancsmm.jpg"></a> <blockquote> ABRAM, a chapelry in Wigan parish, Lancashire on the Wigan and Newton railway, and Wigan and Leigh canal, 3½ miles SSE of Wigan. Acres, 1,965. Real property, ?8,925,-of which ?4,125 are in mines. Pop., 911. Houses, 173. The property is much subdivided. The living is a vicarage. Value, ?120. Patron, the Rector of Wigan. The church was built in 1843. There are an endowed school, and charities ?36. <p> <i>John Marius Wilson, Imperial Gazetteer of England and Wales (1870-72)</i> </blockquote>
- The title should be the first element. I'm suggesting
<h1>so that if we want to change it's appearance in the future we can then easily do it via the style sheets.
- The image is virtually what you already have within the page,
but instead of using
class=right. The rule in the style sheet puts the image on the right but it also has some padding to the left and underneath so that the text of the quote isn't hard up against it.
- No change with the blockquote. We could of course amend the style sheet so that it appears in a different font and so emphasise that it is a quote and reduce comments about accuracy.
links class is the starting point to help resolve this, and will
provide a route to a more sophistcated look and feel if we feel the need for it in the
future. In simple terms it puts the list into a box that floats to the left. The text
within the box uses a san-serif font and is aligned to the left (overcoming some
centreing problems with IE). So if you want multiple lists, where in the past you had
to uses tables, you can just uses multiple
The recommended way of providing the list themselves is via <ul> etc. but for those using plain text with line breaks provided with <br> you get a similar appearance. However in the longer term you should move to using <ul> etc. as that would be the route to a more sophisticated look and feel if we decided we needed that in the future. In order to mimimise the amount of recoding required you can just start by wrapping existing code in this div.
For those of you who have a need to to float their links box to the right of the page there is a complementary <div class="linksr">.
This is the footer at the bottom of the page.
<div id="footer"> <a class=html401 href="http://validator.w3.org/check/referer"></a> <a class=help href="http://www.genuki.org.uk/cgi-bin/problems?LAN" title="Contact page maintainer">Find help, report problems, or contribute information</a> [<i>Last updated <!--#echo var="LAST_MODIFIED"--> - Phil Stringer</i>] </div> <!-- End of footer -->
- A horizontal line is drawn across the page at the start of the footer. This is done in the style sheet and requires no html to do it.
- The first link is the usual one to validate the html within
the page. A
class=parameter identifies it as such and puts it on the right with the appropriate background image.
- class="html401" -
- class="xhtml1" -
- class="help" is added to the contact link and this puts it on
the left with the appropriate image. It also has a fixed width
for the text so that this part is firmly on the left.
The title="Contact page maintainer" isn't vital, but is a useful addition, as it shows that text when you move the mouse over the logo and thus helps the user notice it.
- The remainder is any text such as last updated or copyright. This is all automatically centred. Use a <br> as required if you need any line breaks. In the example above <!--#echo var="LAST_MODIFIED"--> is automatically replaced by the last modified date because it is an .shtml page which means it can use Server Side Includes. If you are not using SSI you put the date in by hand and remeber to change it appropriately.
- <blockquote> is justified and given a grey background. This can be used for copyright statements that some counties add to the end of their pages.
This a 200 pixel wide box that floats on the right side of the page. It developed from the need for somewhere to hold small images of churches as a link to full size images, and is also used by the gazetteer to provide a list of links on the right of a Google map. Only add this div if you need it.
Anything within this area is centred.
<h1>This appears as italic and is usually used for a starting comment - Click pictures to enlarge.
<h3>Is used to put a comment under a picture in red letters. Use
<p>if there is no text between pictures.
<h4>Is used to put a comment above some text in red letters. This is used in the gazetteer. The difference between the two is where the spacing is. For this one the spacing is above the heading and little below it, to make it easier to see what the heading relates to.
This is used for the section on church pages where it asks the users for information. It is used to give a slightly different appearance and to remove the need to code images for icons within the page. Only add this div if you need it.
Icons are added against list elements as follows
- <li class=grave>
- <li class=history>
- <li class=records>
- <li class=photo>
- <li class=opened>
- <li class=closed>
- <li class=status>
- <li class=road>
- <li class=where>
- <li class=link>