Genuki stylesheet divs

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

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

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

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

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