.selectedanchor{ /*CSS class that gets added to the currently selected anchor link (assuming it's a text link)*/
background: ;
}
/* ######### Default class for drop down menus ######### */
.anylinkmenu{
position: absolute;
left: 0;
top: 0;
visibility: hidden;
border: 0px solid black;
border-bottom-width: 0;
line-height: 18px;
z-index: 100; /* zIndex should be greater than that of shadow's below */
background: #fff;
width: 200px; /* default width for menu */
}
.anylinkmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}
.anylinkmenu ul li a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 2px 0;
text-decoration: none;
text-indent: 5px;
}
.anylinkmenu a:hover{ /*hover background color*/
background: black;
color: white;
}
/* ######### Alternate multi-column class for drop down menus ######### */
.anylinkmenucols{
position: absolute;
width: 350px;
left: 0;
top: 0;
visibility: hidden;
border: 1px solid black;
padding: 10px;
z-index: 100; /*zIndex should be greater than that of shadow's below*/
background: #E9E9E9;
}
.anylinkmenucols li{
padding-bottom: 3px;
}
.anylinkmenucols .column{
float: left;
padding: 3px 8px;
margin-right: 5px;
background: #E0E0E0;
}
.anylinkmenucols .column ul{
margin: 0;
padding: 0;
list-style-type: none;
}
ASKER
<div id="headerDiv">
<table cellpadding="0" cellspacing="0" style="width: 100%; height: 100%">
<tr>
<td style="width: 90px">
<a href="index.html">
<img alt="" height="105" longdesc="" src="images/logo.gif" width="90" /></a>
</td>
<td id="navCell">
<a href="#">Home</a> |
<a href="#" class="menuanchorclass" rel="anylinkmenu1">Info</a> |
<a href="#">Support</a> | Hey <a href="#" class="orrangeFont">Igor</a> (2
<a href="#"><img class="evelope" alt="" height="13" src="images/evelope.gif" width="21" /></a>)</td>
</tr>
</table>
</div>
ASKER
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="en-us" http-equiv="Content-Language" />
<title></title>
<link href="css/mainStyles.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/anylinkmenu.css" />
<script type="text/javascript" src="js/menucontents.js"></script>
<script type="text/javascript" src="js/anylinkmenu.js">
</script>
<script type="text/javascript">
//anylinkmenu.init("menu_anchors_class") //Pass in the CSS class of anchor links (that contain a sub menu)
anylinkmenu.init("menuanchorclass")
</script>
</head>
<body>
<div id="container">
<div id="headerDiv">
<table cellpadding="0" cellspacing="0" style="width: 100%; height: 100%">
<tr>
<td style="width: 90px">
</td>
<td id="navCell">
<a href="#">Home</a> |
<a href="#" class="menuanchorclass" rel="anylinkmenu1">Info</a> |
<a href="#">Support</a> | Hey <a href="#" class="orrangeFont">You</a> (2
<a href="#">
<img class="evelope" alt="" height="13" src="images/evelope.gif" width="21" /></a>)</td>
</tr>
</table>
</div>
</div>
</body>
</html>
ASKER
ASKER
body
{
margin: 0 auto;
font-family: comfortaa;
font-size: 12pt;
font-weight: normal;
color: #384d5a;
overflow-x:hidden;
overflow-y: scroll;
height: 100%;
}
a:link {border: 0px; text-decoration: none; color: #4b4b4b}
a:visited {border: 0px; text-decoration: none; color: #4b4b4b}
a:active {border: 0px; text-decoration: none; color: #4b4b4b}
a:hover {border: 0px; text-decoration: none; color: #4b4b4b}
@font-face
{
font-family: comfortaa;
src: url('../fonts/Comfortaa-Regular.ttf');
}
html, body, #container
{
width: 900px;
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
margin:0 auto;
}
body > #container
{
height: auto;
min-height: 100%;
}
#content {
padding-top: 3em;
padding-bottom: 3em;
}
#headerDiv
{
height: 105px;
width: 100%;
padding: 0px;
background-image:url('../images/header_bg.gif');
background-repeat: repeat-x;
}
#footer
{
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
text-align: center;
}
#logoCell
{
width: 90px;
text-align: left;
vertical-align: top;
}
#navCell
{
font-family: comfortaa;
font-size: 18pt;
color: #4b4b4b;
text-align: right;
padding-right: 8px;
padding-top: 10px;
text-decoration: none;
}
#horizontalDottedLine
{
background-image: url('../images/horizontal_dotted_31x16.gif');
background-repeat: repeat-y;
}
.handcursor{
cursor:hand;
cursor:pointer;
}
.headerOrrangeFont
{
color: #ff8c00;
font-size: 22pt;
}
.orrangeFont
{
color: #ff8c00;
}
a.orrangeFont { color: #ff8c00; }
a.orrangeFont:hover { text-decoration: underline; }
.greenFont
{
color: #677e23;
}
.evelope
{
vertical-align: middle;
}
img
{
border-width: 0;
}
ASKER
ASKER
html, body, #container {
height: 100%;
margin: 0 auto;
min-height: 100%;
padding: 0;
width: 900px;
}
body, #container {
height: 100%;
margin: 0 auto;
min-height: 100%;
padding: 0;
width: 900px;
}
#container {
height: 100%;
margin: 0 auto;
min-height: 100%;
padding: 0;
width: 900px;
}
ASKER
ASKER
html, body, #container {
height: 100%;
margin: 0pt auto;
min-height: 100%;
padding: 0;
}
#container {
width: 900px;
}
ASKER
ASKER
html, body, #container {
height: 100%;
margin: 0pt auto;
[i]min-height: 100%;[/i] REMOVE
padding: 0;
}
ASKER
ASKER
Cascading Style Sheets (CSS) is a language used for describing the look and formatting of a document written in a markup language. Usually used to change web pages and user interfaces written in HTML, it can also be applied to any kind of XML document. CSS is designed primarily to distinguish the content of a document from its presentation.
TRUSTED BY
:)