full page tab menu problems
hello
im having some trouble getting my menu to behave properly.
im new to css so my knowledge is limited & im beyond frustrated & could use some help.
using snippets i have found on the web i have a nice looking menu & for the most part works.
however, there are 3 things on the tabs menu i cant seem to get working right.
1. when any tab is selected it should change color. the hover works just not when its selected
2. the page needs to open to the middle div which is actually an image. right now, it opens on the first tab so additional content is showing.
3. the menu 'jumps' when a tab is clicked on. it should always be in the same position no matter what tab is clicked on.
code is below:
Code:
<!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="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>20th Anniversary</title>
<style>
body, html {
height: 100%;
margin: 0;
font-family: Georgia, "Times New Roman", Times, serif
}
#header {
background-color: #000000;
height: 50px;
position: relative;
margin: 75px auto 0 auto;
}
#header ul {
margin: 0 auto;
width: 999px;
padding: 0;
list-style: none;
}
#header ul li {
float: left;
width: 129px;
}
#header ul li:nth-of-type(4) {
margin-left: 216px;
}
#header ul li a {
text-decoration: none;
display: block;
text-align: center;
padding: 15px 0 0 0;
height: 40px;
color: white;
}
#header ul li a:hover {
background: #DB0409;
}
#header ul a:selected { color: #000; background-color: #DB0409; font-weight: bold; padding: 0.7em 0.3em 0.38em 0.3em; }
.logo {
position: absolute;
left: 50%;
margin: -48px 0 0 -108px;
}
div.tabContent { border: 1px solid #c9c3ba; padding: 0.5em; background-color: #f1f0ee;
}
div.tabContent.hide { display: none;
}
</style>
<script type="text/javascript">
//<![CDATA[
var tabLinks = new Array();
var contentDivs = new Array();
function init() {
// Grab the tab links and content divs from the page
var tabListItems = document.getElementById('tabs').childNodes;
for ( var i = 0; i < tabListItems.length; i++ ) {
if ( tabListItems[i].nodeName == "LI" ) {
var tabLink = getFirstChildWithTagName( tabListItems[i], 'A' );
var id = getHash( tabLink.getAttribute('href') );
tabLinks[id] = tabLink;
contentDivs[id] = document.getElementById( id );
}
}
// Assign onclick events to the tab links, and
// highlight the first tab
var i = 0;
for ( var id in tabLinks ) {
tabLinks[id].onclick = showTab;
tabLinks[id].onfocus = function() { this.blur() };
if ( i == 0 ) tabLinks[id].className = 'selected';
i++;
}
// Hide all content divs except the first
var i = 0;
for ( var id in contentDivs ) {
if ( i != 0 ) contentDivs[id].className = 'tabContent hide';
i++;
}
}
function showTab() {
var selectedId = getHash( this.getAttribute('href') );
// Highlight the selected tab, and dim all others.
// Also show the selected content div, and hide all others.
for ( var id in contentDivs ) {
if ( id == selectedId ) {
tabLinks[id].className = 'selected';
contentDivs[id].className = 'tabContent';
} else {
tabLinks[id].className = '';
contentDivs[id].className = 'tabContent hide';
}
}
// Stop the browser following the link
return false;
}
function getFirstChildWithTagName( element, tagName ) {
for ( var i = 0; i < element.childNodes.length; i++ ) {
if ( element.childNodes[i].nodeName == tagName ) return element.childNodes[i];
}
}
function getHash( url ) {
var hashPos = url.lastIndexOf ( '#' );
return url.substring( hashPos + 1 );
}
//]]>
</script>
</head>
<body onload="init()">
<div id="header">
<a class="logo" href="spade.html">
<img src="20th.png" height="149" width="214" class="auto-style1" /></a>
<ul id="tabs">
<li><a href="#rules">Event Rules</a></li>
<li><a href="#preregister">Pre-Register</a></li>
<li><a href="#formats">Formats</a></li>
<li><a href="#ticketgrid">Ticket Grid</a></li>
<li><a href="#prizedrawing">Prize Drawing</a></li>
<li><a href="#raffleticketlist">Raffle Ticket List</a></li>
</ul>
</div>
<div class="tabContent" id="logo">
<div>
<p>show when page loads</p>
</div>
</div>
<div class="tabContent" id="rules">
<div>
<p>show rules</p>
</div>
</div>
<div class="tabContent" id="preregister">
<div>
<p>shows on preregister</p>
</div>
</div>
<div class="tabContent" id="formats">
<div>
<p>show when formats load</p>
</div>
</div>
</body></html>
you can see the page here
thanks in advance for any help,
HippieChickie
