Very interesting discussion, since this is about design, usability and visibility.
- Here is a simple CSS styling that I like.
body {
background-color: #F0F0EC;
}
#navigation {
width: 100%;
text-align:center;
font-family: Arial, Helvetica, sans-serif;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
}
#navigation li {
border-bottom: 1px solid #ED9F9F;
}
#navigation li a:link, #navigation li a:visited {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 12px solid #711515;
border-right: 1px solid #711515;
background-color: #B51032;
color: #FFFFFF;
text-decoration: none;
}
#navigation li a:hover {
background-color: #711515;
color: #FFFFFF;
}
- Here is another, more complex Adobe (former Macromedia) Dreamweaver template that I like. I have bolded the link schemes to make it easier for comments:
a:link, a:visited{
color: #005FA9;
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
************************************************** **************
#utility a{
color: #ffffff;
}
#utility a:hover{
text-decoration: underline;
}
#globalLink{
position: absolute;
top: 6px;
height: 22px;
min-width: 640px;
padding: 0px;
margin: 0px;
left: 10px;
z-index: 100;
}
************************************************** ************************
a.glink, a.glink:visited{
font-size: small;
color: #000000;
font-weight: bold;
margin: 0px;
padding: 2px 5px 4px 5px;
border-right: 1px solid #8FB8BC;
}
a.glink:hover{
background-image: url("glblnav_selected.gif");
text-decoration: none;
}
.skipLinks {display: none;}
************************************************** ************
.subglobalNav{
position: absolute;
top: 84px;
left: 0px;
/*width: 100%;*/
min-width: 640px;
height: 20px;
padding: 0px 0px 0px 10px;
visibility: hidden;
color: #ffffff;
}
.subglobalNav a:link, .subglobalNav a:visited {
font-size: 80%;
color: #ffffff;
}
.subglobalNav a:hover{
color: #cccccc;
}
************************************************** ************
#search{
position: absolute;
top: 2px;
right: 0px;
z-index: 101;
}
#search input{
font-size: 70%;
margin: 0px 0px 0px 10px;
}
#search a:link, #search a:visited {
font-size: 80%;
font-weight: bold;
}
#search a:hover{
margin: 0px;
}
************************************************** **************************
#breadCrumb{
padding: 5px 0px 5px 10px;
font: small Verdana,sans-serif;
color: #AAAAAA;
}
#breadCrumb a{
color: #AAAAAA;
}
#breadCrumb a:hover{
color: #005FA9;
text-decoration: underline;
}
************************************************** ************************
.story a.capsule{
font: bold 1em Arial,sans-serif;
color: #005FA9;
display:block;
padding-bottom: 5px;
}
.story a.capsule:hover{
text-decoration: underline;
}
td.storyLeft{
padding-right: 12px;
}
************************************************** *************************
#sectionLinks a:link, #sectionLinks a:visited {
display: block;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #cccccc;
background-image: url("bg_nav.jpg");
font-weight: bold;
padding: 3px 0px 3px 10px;
color: #21536A;
}
#sectionLinks a:hover{
border-top: 1px solid #cccccc;
background-color: #DDEEFF;
background-image: none;
font-weight: bold;
text-decoration: none;
Any comments?