CSS development.
All of the main elements are positioned individually on the screen using Cascading Style Sheets. The techniques used range from virtually no positioning information at all to absolute positioning.
#content {
MARGIN: 0 190px 0 190px;
Z-INDEX: 3;
WIDTH: auto;
POSITION: relative;
min-width: 120px;
}
#leftmenu {
WIDTH: 170px;
POSITION: absolute;
Z-INDEX: 2;
TOP: 100px;
voice-family: inherit;
left: 20px
}
#rightmenu {
Z-INDEX: 1;
RIGHT: 20px;
WIDTH: 170px;
POSITION: absolute;
TOP: 100px;
voice-family: inherit;
}
#header {
width: auto;
padding: 10px 0 5px 0;
margin: 0 0 20px 0;
BACKGROUND-COLOR: #ffffff;
border: 2px solid #ff9900
}
The heading is not positioned directly. It is simply the first element in the <html> document so it is rendered at the top of the page. Its width is set to auto so it fills the entire width of the screen and its margins and padding are set. One point here is that the bottom padding is 5 pixels lower than the top. This is because of the descender on the “g” in the graphical element of the logo. If the padding is equal the descender creates too much white space and disrupts the symmetry of the layout.
The navigation and additional information elements are absolutely positioned the correct distance from the respective margin and down from the top of the page.
The content container is positioned between these two elements by the browser as it does not have a specific “top” value set. Its margins are set so that the content is displayed between the two side columns.
None of these three elements contain any information on backgrounds or borders. All of this is handled by the "subsection" elements contained within them. This allows each column to have multiple sections within it. Each subsection element has a bottom margin of 20px to provide the white space.
The padding for each subsection is set to 10px 10px 0 10px. This is beacuse the margin for the <p> element is set to 0 0 10px 0 to provide the additional space between paragraphs. If the padding was uniformly set to 10px then there would appear to be a double return at the end of each subsection.
.subsection {
margin: 0 0 20px 0;
padding: 10px 10px 0 10px;
background-color: #ffffff;
border: 2px solid #ff9900;
}
There is a reason for using different CSS selectors for the main elements of the page and the subsections. The "#" selector matches any element with an id attribute set to its value. Id attributes have to be unique within a document. As the design cannot have more than one right hand menu it is best to use this selector.
The "." selector matches any element with the class attribute set to its value. This does not have to be unique within the document. As there are many subsections within the document this is the best selector to use in this case.
In actual fact all the browsers I have tested this site in allow non unique id attributes. It would have been possible to use id="subsection" and #subsection {...} or class="rightmenu" and .rightmenu {...}.
However the two attributes represent a semantic difference in the content and if in future I decided to use javascript functions with these elements it important that they are named correctly.
