Menu Positioning
CSS Code
...
div.menu {
width: 20%;
float: left;
margin: 0;
}
h2.navbar {
visibility: hidden;
font-size: xx-small;
border: none;
margin: 0;
padding: 0;
}
ul.navbar {
margin: 0;
margin-right: 1em;
padding: 0;
list-style-type: none;
font-weight: bold;
font-size: 12px;
}
li.navbar {
margin: 0;
padding: 0;
list-style-type: none;
font-weight: bold;
font-size: 12px;
}
a.navbar {
padding-left: 1em;
padding-right: .25em;
padding-top: .25em;
padding-bottom: .25em;
text-decoration: none;
display: block;
width: 100%;
}
a.navbar_selected {
padding-left: 1em;
padding-right: .25em;
padding-top: .25em;
padding-bottom: .25em;
text-decoration: none;
display: block;
width: 100%;
}
a.navbar:link{
color: #000000;
}
a.navbar:visited{
color: #000000;
}
a.navbar:hover{
color: white;
background: #CC3300;
text-decoration: underline;
}
a.navbar:active{
color: white;
background: #CC3300;
text-decoration: underline;
}
a.navbar_selected:link {
color: white;
background: #CC3300;
}
a.navbar_selected:visited {
color: white;
background: #CC3300;
}
a.navbar_selected:hover;
text-decoration: underline;
}
a.navbar_selected:active;
text-decoration: underline;
}
...
div.menu {
width: 20%;
float: left;
margin: 0;
}
h2.navbar {
visibility: hidden;
font-size: xx-small;
border: none;
margin: 0;
padding: 0;
}
ul.navbar {
margin: 0;
margin-right: 1em;
padding: 0;
list-style-type: none;
font-weight: bold;
font-size: 12px;
}
li.navbar {
margin: 0;
padding: 0;
list-style-type: none;
font-weight: bold;
font-size: 12px;
}
a.navbar {
padding-left: 1em;
padding-right: .25em;
padding-top: .25em;
padding-bottom: .25em;
text-decoration: none;
display: block;
width: 100%;
}
a.navbar_selected {
padding-left: 1em;
padding-right: .25em;
padding-top: .25em;
padding-bottom: .25em;
text-decoration: none;
display: block;
width: 100%;
}
a.navbar:link{
color: #000000;
}
a.navbar:visited{
color: #000000;
}
a.navbar:hover{
color: white;
background: #CC3300;
text-decoration: underline;
}
a.navbar:active{
color: white;
background: #CC3300;
text-decoration: underline;
}
a.navbar_selected:link {
color: white;
background: #CC3300;
}
a.navbar_selected:visited {
color: white;
background: #CC3300;
}
a.navbar_selected:hover;
text-decoration: underline;
}
a.navbar_selected:active;
text-decoration: underline;
}
...
HTML Code
...
<div class="menu">
<h2 class="navbar">Main Menu</h2>
<ul class="navbar">
<li class="navbar"><a class="navbar_selected" href="schedule.htm">Schedule</a></li>
<li class="navbar"><a class="navbar" href="presenters.htm">Presenters</a></li>
<li class="navbar"><a class="navbar" href="resources.htm">Resources</a></li>
</ul>
</div>
...
<div class="menu">
<h2 class="navbar">Main Menu</h2>
<ul class="navbar">
<li class="navbar"><a class="navbar_selected" href="schedule.htm">Schedule</a></li>
<li class="navbar"><a class="navbar" href="presenters.htm">Presenters</a></li>
<li class="navbar"><a class="navbar" href="resources.htm">Resources</a></li>
</ul>
</div>
...