Nogs
22 Mar 2008, 11:19 PM
I'm trying to revamp a website right now and I've hit a brick wall. I'm trying to design the site navigation using tabs. It's all fine and dandy until you realize that the background image doesn't show through. I've been racking my brain over this for the better part of 6+ hours. I've tried multiple techniques and I can't seem to get what I want. I've tried straight up HTML with buttons, and various javascripts. Here is what I got so far.
This is the original that I made using flat out HTML. It looks okay at first, except that the border isn't working correctly. If I could get it to stop just at the "home" tab, this design would work perfectly fine for what I need. But I can't seem to figure out how to stop a border correctly.
https://netfiles.umn.edu/users/smit2231/www/TKD%20Design/TKD%20Web%20Design.html
<!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 http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>University of Minnesota Tae Kwon Do Club</title>
<style type="text/css">
<!--
.style1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #D4D0C8;
}
body {
background-color: #660000;
margin:0;
text-align:left;
}
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12pt;
color: #660000;
}
#container{
position:relative;
width:753px;
text-align:left;
margin:0 auto 0;
background-color:#660000;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body onload="MM_preloadImages('images/btn_instructors-over.gif','images/btn_gallery-over.gif','images/btn_info-over.gif','images/btn_links-over.gif','images/btn_contact-over.gif')"><span class="style1"></span><!-- Top Banner -->
<div id="container"><img src="images/umn_logo.gif" alt="UMN Homepage" width="115" height="90" border="0" /><img src="images/top_banner.gif" alt="Tae Kwon Do Banner" width="622" height="90" border="0" /><!-- Left Banner --><img src="images/left_banner.gif" alt="TKD Hangul" width="97" height="295" align="left" /><img src="images/btn_home-over.gif" alt="Home" width="91" height="35" align="top" style="margin-left: 8px;" /><img src="images/spacer.gif" alt=" " width="1" height="1" align="top" style="margin-right: 8px; margin-left: 8px;" /><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Instructors', '','images/btn_instructors-over.gif',1)"><img src="images/btn_instructors.gif" alt="Instructors" name="Instructors" width="91" height="35" border="0" align="top" id="Instructors" /></a><img src="images/vu_leg.gif" width="17" height="35" align="top" /><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Gallery','','images/btn_gallery-over.gif',1)"><img src="images/btn_gallery.gif" alt="Gallery" name="Gallery" width="91" height="35" border="0" align="top" id="Gallery" /></a><img src="images/spacer.gif" alt=" " width="1" height="1" align="top" style="margin-right: 8px; margin-left: 8px;" /><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Info','','images/btn_info-over.gif',1)"><img src="images/btn_info.gif" alt="Info" name="Info" width="91" height="35" border="0" align="top" id="Info" /></a><img src="images/dan_leg.gif" width="17" height="35" align="top" /><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Links','','images/btn_links-over.gif',1)"><img src="images/btn_links.gif" alt="Links" name="Links" width="91" height="35" border="0" align="top" id="Links" /></a><img src="images/aaron_leg.gif" width="17" height="35" align="top" /><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','images/btn_contact-over.gif',1)"><img src="images/btn_contact.gif" alt="Contact" name="Contact" width="91" height="35" border="0" align="top" id="Contact" /></a><img src="images/vu_form.gif" width="14" height="35" align="top" />
<table width="648" height="400" border="0" align="right" bordercolor="#000000" bgcolor="#FEDC99" style="margin-right: 8px; border:1px solid black;">
<tr>
<td width="648" valign="top" bordercolor="#000000"> </td>
</tr>
</table>
</div>
</body>
</html>
The second design I tried was trying a javascript tabbed design. This fixed the border problem with the tabs. However, it created a new problem by interfering with the background. There seems to be a maroon band that runs horizontal of the tabs, thus cutting of the legs of many of the people on the top banner. I tried turning down the opacity in certain spots, but they all just resulted in the whole tabbed area becoming transparent. Here is that design:
https://netfiles.umn.edu/users/smit2231/www/TKD%20Design/indexTESTING1.html
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>University of Minnesota Tae Kwon Do Club</title>
<style type="text/css">
<!--
.style1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #D4D0C8;
}
body {
background-color: #660000;
margin:0;
text-align:left;
background-image: url(images/background.gif);
background-repeat: no-repeat;
background-position: top;
}
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12pt;
color: #660000;
}
#container{
position:relative;
width:737px;
text-align:left;
margin:0 auto 0;
background-color:#660000;
}
-->
</style>
<script type="text/javascript" src="tabber.js"></script>
<link rel="stylesheet" href="example.css" type="text/css" media="screen" />
</head>
<body>
<div id="container">
<div class="tabber">
<div class="tabbertab">
<h2>Home</h2>
<p>Tab 1 content.</p>
</div>
<div class="tabbertab">
<h2>Instructors</h2>
<p>Tab 2 content.</p>
</div>
<div class="tabbertab">
<h2>Gallery</h2>
<p>Tab 3 content.</p>
</div>
<div class="tabbertab">
<h2>Info</h2>
<p>Tab 3 content.</p>
</div>
<div class="tabbertab">
<h2>Links</h2>
<p>Tab 3 content.</p>
</div>
<div class="tabbertab">
<h2>Contact</h2>
<p>Tab 3 content.</p>
</div>
</div>
</div>
</body>
</html>
I just can't figure out how to make the background image merge correctly with the rest of the page. Any help would be much appreciated.
This is the original that I made using flat out HTML. It looks okay at first, except that the border isn't working correctly. If I could get it to stop just at the "home" tab, this design would work perfectly fine for what I need. But I can't seem to figure out how to stop a border correctly.
https://netfiles.umn.edu/users/smit2231/www/TKD%20Design/TKD%20Web%20Design.html
<!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 http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>University of Minnesota Tae Kwon Do Club</title>
<style type="text/css">
<!--
.style1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #D4D0C8;
}
body {
background-color: #660000;
margin:0;
text-align:left;
}
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12pt;
color: #660000;
}
#container{
position:relative;
width:753px;
text-align:left;
margin:0 auto 0;
background-color:#660000;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body onload="MM_preloadImages('images/btn_instructors-over.gif','images/btn_gallery-over.gif','images/btn_info-over.gif','images/btn_links-over.gif','images/btn_contact-over.gif')"><span class="style1"></span><!-- Top Banner -->
<div id="container"><img src="images/umn_logo.gif" alt="UMN Homepage" width="115" height="90" border="0" /><img src="images/top_banner.gif" alt="Tae Kwon Do Banner" width="622" height="90" border="0" /><!-- Left Banner --><img src="images/left_banner.gif" alt="TKD Hangul" width="97" height="295" align="left" /><img src="images/btn_home-over.gif" alt="Home" width="91" height="35" align="top" style="margin-left: 8px;" /><img src="images/spacer.gif" alt=" " width="1" height="1" align="top" style="margin-right: 8px; margin-left: 8px;" /><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Instructors', '','images/btn_instructors-over.gif',1)"><img src="images/btn_instructors.gif" alt="Instructors" name="Instructors" width="91" height="35" border="0" align="top" id="Instructors" /></a><img src="images/vu_leg.gif" width="17" height="35" align="top" /><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Gallery','','images/btn_gallery-over.gif',1)"><img src="images/btn_gallery.gif" alt="Gallery" name="Gallery" width="91" height="35" border="0" align="top" id="Gallery" /></a><img src="images/spacer.gif" alt=" " width="1" height="1" align="top" style="margin-right: 8px; margin-left: 8px;" /><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Info','','images/btn_info-over.gif',1)"><img src="images/btn_info.gif" alt="Info" name="Info" width="91" height="35" border="0" align="top" id="Info" /></a><img src="images/dan_leg.gif" width="17" height="35" align="top" /><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Links','','images/btn_links-over.gif',1)"><img src="images/btn_links.gif" alt="Links" name="Links" width="91" height="35" border="0" align="top" id="Links" /></a><img src="images/aaron_leg.gif" width="17" height="35" align="top" /><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','images/btn_contact-over.gif',1)"><img src="images/btn_contact.gif" alt="Contact" name="Contact" width="91" height="35" border="0" align="top" id="Contact" /></a><img src="images/vu_form.gif" width="14" height="35" align="top" />
<table width="648" height="400" border="0" align="right" bordercolor="#000000" bgcolor="#FEDC99" style="margin-right: 8px; border:1px solid black;">
<tr>
<td width="648" valign="top" bordercolor="#000000"> </td>
</tr>
</table>
</div>
</body>
</html>
The second design I tried was trying a javascript tabbed design. This fixed the border problem with the tabs. However, it created a new problem by interfering with the background. There seems to be a maroon band that runs horizontal of the tabs, thus cutting of the legs of many of the people on the top banner. I tried turning down the opacity in certain spots, but they all just resulted in the whole tabbed area becoming transparent. Here is that design:
https://netfiles.umn.edu/users/smit2231/www/TKD%20Design/indexTESTING1.html
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>University of Minnesota Tae Kwon Do Club</title>
<style type="text/css">
<!--
.style1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #D4D0C8;
}
body {
background-color: #660000;
margin:0;
text-align:left;
background-image: url(images/background.gif);
background-repeat: no-repeat;
background-position: top;
}
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12pt;
color: #660000;
}
#container{
position:relative;
width:737px;
text-align:left;
margin:0 auto 0;
background-color:#660000;
}
-->
</style>
<script type="text/javascript" src="tabber.js"></script>
<link rel="stylesheet" href="example.css" type="text/css" media="screen" />
</head>
<body>
<div id="container">
<div class="tabber">
<div class="tabbertab">
<h2>Home</h2>
<p>Tab 1 content.</p>
</div>
<div class="tabbertab">
<h2>Instructors</h2>
<p>Tab 2 content.</p>
</div>
<div class="tabbertab">
<h2>Gallery</h2>
<p>Tab 3 content.</p>
</div>
<div class="tabbertab">
<h2>Info</h2>
<p>Tab 3 content.</p>
</div>
<div class="tabbertab">
<h2>Links</h2>
<p>Tab 3 content.</p>
</div>
<div class="tabbertab">
<h2>Contact</h2>
<p>Tab 3 content.</p>
</div>
</div>
</div>
</body>
</html>
I just can't figure out how to make the background image merge correctly with the rest of the page. Any help would be much appreciated.