[HomePage] 8/04/2012
==========
New mikehart website is located at:
http://m-hart.com F:\BackUpDriveH\MENUS\menus_mh.html {where all development files are located}
Basic Framework
ŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻ
- Bodywidth of 960px with auto margins
- Sidebar (for menus) 200px + 10 RHS padding
- Main (main output) 750px + 0 padding {750 +210 = 960}
Header
ŻŻŻŻŻŻ
- Header div holds text {"Mike hart's Home Page"} {#header2 with height 45px;top-margin 10px}
- Header photograph (width of 960, height of 200)
- Header caption (italic, 0.8em,floated right)
Inner div
ŻŻŻŻŻŻŻŻŻ
- width of 960px, over-flow:hidden
To act as a 'container' for sidebar+main (helps to ensure that sidebar stretches to foot of menu column)
Sidebar
ŻŻŻŻŻŻŻ
Contains a menu with an example from http://www.cssportal.com/vertical-menus
One gif used (menu8.gif) of 200px but another has been constructed (menu8a.gif) of 150px
http://pixlr.com is very useful in resizing this gif correctly
Sidebar has padding-bottom: 32767; margin-bottom:-32767 in order to extend columns
The gif contains 3 coloured bars (arranged vertically so that ''hover' and 'active' select appropriate bar
(-32px,- 64px}
Advantages Only one gif is loaded Can be recoloured using http://sumopaint.com
~~~~~~~~~~
Main div
ŻŻŻŻŻŻŻŻ
At the top of the main div are a series of 'tabbed' menus. These are provided by Paul O'Briens website at:
http://www.pmob.co.uk/pob/rollovers.htm
These menus make use of a couple of gifs, loaded in the background, one of which is made transparent on hover (rollover2.gif) to reveal the other (rollover.gif) When selected, the rolloff2.gif is selected and then made transparent so that the default (light grey rollover2.gif) shows through...
This is clever! Also, can be resized in browser without breaking.
Boxed in Main div gives outline shape
Colours in Main div
ŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻ
Background - floralwhite {parchmenty look} Text: darkslategray (pale black?} Subheadings: black
Email address is 'javscripted' to defeat spammers!
ŻŻŻŻŻŻŻŻŻŻŻŻŻ
Footer
ŻŻŻŻŻŻ
- made 958px wide so that border of 1px makes it exactly 960px
- margin-top Pushed up by -0.8em so as to avoid the double line
- 8 nbsp + Ĥ character makes division between items
- Update for date put in a to keep it all on one line
Layout model
ŻŻŻŻŻŻŻŻŻŻŻŻ
Can be found here...
[F:\BackupDriveH\menu2\css_box_mch.html]
Latest version of a homepage
ŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻ
See: http://kesdon.info/mch/equal_mh3.html for the latest trial version of a homepage