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.

<div id=navbar>

This is the navigation bar at the top of the page.

<div id="navbar">
<a href="/" class=logo title="GENUKI Home page"></a>
<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>
</div> <!-- end of navbar -->

<div class=main>

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.

<div class=intro>

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">


<a href="">
<img width=154 height=229 alt="Select map to view larger area" class=right src="../Lancsmm.jpg"></a>

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.
<i>John Marius Wilson, Imperial Gazetteer of England and Wales (1870-72)</i>

<div class=links>

Within the intro section we provide alist of shortcut links to headings within the page. We do seem to have some variation in the layout for this adopted by different section maintainers, and even more varaiation in the html used to achieve it. As you may expect tables are usually part of the solution,but the look and feel can be different according to the browser being used.

The 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 <div class="links">'s.

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">.

<div id=footer>

This is the footer at the bottom of the page.

<div id="footer">
<a class=html401 href=""></a>
<a class=help href="" 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 -->

<div class=rightside>

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.

<div class=leftside>

This has all the same features as <div class="rightside"> the only difference being that it floats to the left of the page.

<div class=churchask>

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


<div class=churchid>

Church database entries should have a fixed unique id which is used to refer to them and the churchentry web pages. It is also used to link in details of church records. The id is displayed on the churchentry pages, and this div is used to enlarge and highlight this number when the mouse moves over it, and to show an image identifying it as the church id. Thus making it easier for contributors to find the required id. The number 1234 on the right is an example.

<div class=church>

The dynamic code used to show holders of church record records uses this to change the appearance of some of the headers.

<div id=location-map>

The Google maps code requires an area with a pre-defined height in which to display the map. We use this one to provide location maps at the top of Town/Parish pages. It is 200 pixels high and will expand horizontally to use the space available in the window.

<div id=church-map>

Similar to location-map, but with a fixed width of 200 pixels, and floating to the right of the page.

[Last updated Tuesday, 15-Jul-2014 07:19:42 BST - Phil Stringer]
Hosted by Mythic Beasts Ltd.