About the Site
Cascading Style Sheets
Cascading Style Sheets (CSS) were used for the layout and presentation of this site. This method was selected because it is intended to be far more accessible, for example to users with disabilities who have specialised programs for reading websites.
CSS Files
Two CSS files are used for the site - basic.css and fancy.css.
basic.css provides the vast majority of the look and feel of the website, whilst fancy.css provides some 'finishing touches'. The two have to be separated because some of the finishing touches do not work well with earlier browsers, such as Netscape Navigator 4. For this reason, those elements are put in a separate style sheet, which the pages link to in a way that prevents it from appearing in those browsers.
Layout
The code snippets below are taken from the basic.css style sheet. These styles, of a type called "IDs" (denoted by a "#" at the start of their names) form layout instructions for the page, and are invoked using <div> tag within the HTML pages. #content defines the main white content area of the page, #titleleft and #titletop and #titleleft hold the two parts of the main brain logo and title (see About Graphics), and #nav holds the navigation buttons.
#content {
background : #FFFFFF;
border : 1px solid #000000;
color : #333333;
font-family : Verdana, Arial, sans-serif;
margin-bottom : 10px;
margin-left : 150px;
margin-right : 20px;
margin-top : 105px;
padding : 10px;
}
#titleleft{
height : 300px;
left : 0px;
position : absolute;
top : 100px;
width : 110px;
z-index : 1;
}
#titletop{
height : 100px;
left : 0px;
position : absolute;
top : 0px;
width : 400px;
z-index : 1;
}
#nav{
height : 200px;
left : 5px;
position : absolute;
top : 150px;
width : 145px;
z-index : 10;
}
Note the z-index figure in #nav ensures that this element sits on top of others (i.e. the 'spinal cord' motif).
Two slightly different versions of the body class are in the two CSS files:
body{
background : url(images/title_top_extended.jpg);
background-color : #C2CCFF;
background-repeat : repeat-x;
color : #333333;
font : 12px Verdana,Arial,sans-serif;
margin : 0px;
}
body{
background : url(images/title_top_extended.jpg);
background-color : #C2CCFF;
background-repeat : repeat-x;
color : #333333;
font : 12px Verdana,Arial,sans-serif;
margin : -10px;
}
The first of these is taken from fancy.css, and the second from basic.css. The difference in the margin definition is due to a bug in Netscape Navigator 4, which requires a negative margin to be defined in order to get the desired margin of zero. Since fancy.css is called from the HTML pages after basic.css, its definition of body overwrites the basic.css version for those browsers that understand it.
The background-repeat statement in the body definition ensures that the background image (images/title_top_extended.jpg) is repeated only horizontally, across the top of the page. This image is the extended 'flare' from the logo.
Navigation Buttons
The navigation buttons on the left side of each page are also produced using CSS. basic.css includes some simple definitions for the buttons, with more elaborate ones being defined in fancy.css:
.nav1 {
background-color : #E1E1FF;
border : 2px ridge #5E5EBB;
font-family : Verdana, Arial, sans-serif;
font-size : 15px;
font-weight : 600;
margin-bottom : 2px;
margin-top : 5px;
padding : 0;
width : 135px;
}
.nav1 a{
background-color : #E1E1FF;
color : #2F4F4F;
display : block;
padding-bottom : 1px;
padding-left : 3px;
padding-top : 1px;
text-decoration : none;
width : 133px;
}
.nav1 a:hover{
background-color : #5E5EBB;
color : #FFFFFF;
text-decoration : none;
}
The "." at the start of each of these definitions indicates that the style is a "Class", which can be used repeatedly through a page, not just once like the IDs. The first definition lays out the box of the button, while the other two provide more details of how the text is formed, and the behaviour of the button when the mouse is hovering over it. The line "display : block;" allows the whole button to act as a link, rather than just the text.
Similar definitions exist for the sub-section navigation buttons, which are defined as .nav2.
Content Display
The main content on the page is displayed according to instructions in the CSS files, such as the examples below. Note that "p" does not start with a "." because it is redefining a standard HTML tag, whereas .box (which defines the boxes the code samples are displayed in) does because it is a new class:
p{
color : #333333;
font-family : Verdana, Arial, sans-serif;
font-size : 12px;
line-height : 18px;
}
.box{
border : thin solid #d6c79a;
font : 12px Verdana,Arial,sans-serif;
margin-left : 10px;
margin-right : 10px;
padding-bottom : 5px;
padding-left : 10px;
padding-right : 10px;
padding-top : 5px;
}
