Styling FrontPage Navigation
Adding Style to FrontPage navigation bars
The CSS for the Vertical and Horizontal Navigation bars
Vertical Navigation Bar
#rightnav {
font-family: Arial, Helvetica, sans-serif;
font-size: small;
color: black;
font-weight: bold;
width:135px;
float: right;
padding-top:100px;
}
#rightnav a {
background: #ffff00;
display: block;
text-decoration: none;
width: 125px;
margin-top: 3px;
margin-bottom: -1em;
padding: 0;
border: none;
border-bottom: 2px solid red;
}
Horizontal Navigation Bar
#botnav {
font-size: 1px;
color: white;
background: white;
margin: 0;
text-align: center;
}
#botnav a {
text-decoration: none;
background:#ffff00;
margin: 0;
padding: .25em;
border: 2px solid red;
font-weight: bold;
font-size: x-small;
display: block;
width: 18%;
white-space: nowrap;
float: left;
}
#botnav a:hover {
color: green;
border: 2px solid green;
}
Both navigation bars on this page use Children Under Home. If this page were included in the navigation bars, the horizontal bar would show it as a blip - the font is sized as 1px, which would appear (if it appears at all) as a very thin line. The horizontal bar may look satisfactory, but its use is limited.