In this example I have embedded all the CSS rules/code within the page. I am presuming that you have some knowledge of how to use CSS and place styles within the page. If not, check the web for basic tutorials on CSS.
The primary control for the page is:
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #DDDDAA;
font-size: 11px;
color: #555522;
text-align: center;
}
The above code controls the overall appearance of the page. It sets the color and font style. The text centering is not used within this example. Dreamweaver MX was used to build the CSS specification. The BODY tag was redefined within the document. In DW within the Design panel under the CSS Styles tab create a new style by redefining an HTML tag and selecting BODY. Use whatever settings you want as these settings only control general appearance.
#menu {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
background-color: #999966;
text-align: left;
padding: 5px;
border: medium groove #FFFFCC;
position: absolute;
width: 145px;
left: 5px;
top: 70px;
}
The above code controls the menu location and appearance. Notice I used absolute positioning. The menu movement was obtained with JavaScript with the help of DMX Zone's Persistent Layers software. MSIE 6 does not support the FIXED positioning of CSS, which would provide the sliding menu feature.
The '#" symbol is used to define a style for a named element. In this case a DIV tag was used to allow Persistent Layers to animate the menu. Notice within the page code the menu's DIV tag contains the attribute id="menu". ID is the same as an element name and should only be used once within the document. Repeated use of the ID 'menu' can cause document structure problems and create major problems for dynamic pages and JavaScript.
#content {
background-color: #bbbb77;
text-align: left;
margin: auto 30px auto 150px;
padding: 3px;
border: thin dashed #ffffcc;
}
Above, again the '#' is used to define a CSS style for a specific element, content. Using DW will allow one to set the margins without having to remember the order (i.e., Top, Right, Bottom and Left). Also all of the features for Border are shown and easily selected from the DW dialog.
Placing a DIV in the page with the ID 'content' creates the place for page content. Text, tables, image and other eliments can be placed with the 'content' DIV tags and will properly position.
That completes the basic page layout.
Making the Link Roll Over's
No JavaScript used for the roll over's. They are Pure CSS too.
.mLink {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
background-color: #aaaa77;
padding: 2px;
width: 110px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 3px;
border: thin outset #FFFFCC;
}
a.mLink:hover {
border: thin inset #FFFFCC;
}
First I defined a style named mLink. The initial DOT defines the style as a definition for a CLASS of elements. In DW the options are scattered through the CSS dialog. The button appearance is created within the Border section. I use the Box options to define a Width for uniform button size. Padding takes care of space inside the button and Margin takes care of the space outside the button.
Next I use a Pseudo class for the Hover Effect. These two-state buttons are quick to define and easy to change.
These buttons work well within Opera and Internet Explorer. Netscape 7.1 still has problems with them. They work within Netscape but it handles the margin and padding differently.
|
