Menu
Hi everyone,
I need some help with setting up my dropdown menu within a grid-based web design. The issue is when I use my javascript and other css file (both external) my design goes completely wrong. I am using the 16grid system from the 960grid website. Could you please help? If I forgot to add some info please ask for it if it will help me. Thanks, Randy
[CODE]window.onload = initAll;
function initAll() {
var allLinks = document.getElementsByTagName(“a”);
for (var i=0; i<allLinks.length; i++) {
if (allLinks[i].className.indexOf(“menuLink”) > -1) {
allLinks[i].onmouseover = toggleMenu;
allLinks[i].onclick = clickHandler;
}
}
}
function clickHandler(evt) {
if (evt) {
if (typeof evt.target == “string”) {
toggleMenu(evt,evt.target);
}
else {
toggleMenu(evt,evt.target.toString());
}
}
else {
toggleMenu(evt,window.event.srcElement.href);
}
return false;
}
function toggleMenu(evt,currMenu) {
if (toggleMenu.arguments.length < 2) {
var currMenu = this.href;
}
var startMenu = currMenu.lastIndexOf(“/”)+1;
var stopMenu = currMenu.lastIndexOf(“.”);
var thisMenuName = currMenu.substring(startMenu,stopMenu);
var thisMenu = document.getElementById(thisMenuName);
thisMenu.style.display = “block”;
thisMenu.parentNode.className = thisMenuName;
thisMenu.parentNode.onmouseout = function() {
document.getElementById(this.className).style.display = “none”;
}
thisMenu.parentNode.onmouseover = function() {
document.getElementById(this.className).style.display = “block”;
}
}
This is one of two css files:
[CODE]body {
background-color: white;
color: black;
}
div {
margin-bottom: 10px;
width: 20em;
background-color: #9CF;
float: left;
}
ul.menu {
display: none;
list-style-type: none;
margin: 0;
padding: 0;
}
ul.menu li {
font: 1em arial, helvetica, sans-serif;
padding-left: 10px;
}
a.menuLink, li a {
text-decoration: none;
color: #006;
}
a.menuLink {
font-size: 1.2em;
font-weight: bold;
}
ul.menu li a:hover {
background-color: #006;
color: white;
padding-right: 10px;
}
This is css file two of two:
[CODE]body{ }
#header
{
margin-top:1%;
margin-bottom:1%;
}
#header h1
{
background-image: url(“./images/gradients/headergradient.jpg”);
margin-bottom: -5px;
width:940px;
font-size:48px;
color: #b1bfc8;
letter-spacing:2px;
text-indent: 25px;
}
#tplogopic
{
position: absolute;
left: 58%;
}
#navbartop
{
text-align:center;
display:inline;
background-image: url(“./images/backgrounds/ice.gif”);
color:#FFFFFF;
border-color:”#0033FF”;
font-size:22px;
text-indent: 15px;
font-weight:bold;
word-spacing: 10px;
}
#navbartop span
{
font-size: 12.5px;
margin-top:1%;
color:#000000;
}
#yelblabanner
{
position:absolute;
top:40px;
left:930px;
}
#secondcontainer
{
margin-top: 20px;
}
#maincontentleft
{
font-size:18px;
}
#maincontentleft h4 img
{
padding-bottom:3px;
}
#maincontentleft h4
{
background-image: url(“./images/backgrounds/ice.gif”);
border: solid 4px #000080;
text-align:center;
}
#maincontentright h4
{
background-image: url(“./images/backgrounds/ice.gif”);
border: solid 4px #000080;
text-align:center;
}
#footer
{
margin-top: 25px;
text-align:center;
}
#maincontentleft h4 a
{
border: solid 1px black;
}
And finally, the html:
[CODE]<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 transitional//EN”>
<HTML><HEAD>
<TITLE>text</TITLE>
<META HTTP-EQUIV=”Content-Type” CONTENT=”text”>
<META NAME=”DESCRIPTION” CONTENT=”text”>
<META NAME=”KEYWORDS” CONTENT=”text”>
<meta name=”generator” content=”” >
<link rel=”StyleSheet” type=”text/css” href=”960.css”>
<link rel=”StyleSheet” type=”text/css” href=”reset.css”>
<link rel=”StyleSheet” type=”text/css” href=”text.css”>
<link rel=”StyleSheet” type=”text/css” href=”tap.css”>
</HEAD>
<BODY>
<div id=”maincontatiner” class=”container_16″>
<div id=”top” class=”container_16″>
<div id=”header” class=”grid_8″>
<h1>Tux and Pucks</h1>
</div>
<div id=”tplogopic”><img src=”./images/tplogo76x100.png”></div>
<div id=”yelblabanner”><img src=”./images/yellowblackbanner.gif”></div>
<div id=”rinkpicture” class=”grid_16″>
<div id=”navbartop”>
<span>We Love Linux</span>
<a href=”index.htm”><img src=”./images/buttons/home.png”></a><a href=”linux.htm”><img src=”./images/buttons/linux.png”></a><a href=”hockey.htm”><img src=”./images/buttons/hockey.png”></a>
<a href=”poetry.htm”><img src=”./images/buttons/poetry.png”></a><a href=blogs.htm><img src=”./images/buttons/blogs.png”></a>
<span>We Love Hockey</span>
</div>
<img src=”./images/tuxandrink.jpg” />
</div><!–tuxandrink–>
<div class=”clear”></div>
<div id=”secondcontainer” class=”container_16″>