The new forums will be named Coin Return (based on the most recent vote)! You can check on the status and timeline of the transition to the new forums here.
The Guiding Principles and New Rules document is now in effect.
Web Design: Tab-nav & bg image problems [FIXED]
Nogs
Crap, crap, mega crap.Crap, crap, mega crap.Registered User regular
Crap, crap, mega crap.Crap, crap, mega crap.Registered User regular
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
[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)&&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.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
}
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[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.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))!=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>
[/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
[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>
[/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
[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)&&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.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
}
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[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.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))!=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>
[/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
[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>
[/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.
Nogs on
0
Posts
The tabs should only have top left and right borders. The content box should have a top border. Overlap the tabs on top of the content box by however thick your borders are.
The active tab should have a z-index greater than the content box, and just make the other tabs have a z-index less than the content box.
thank you so much!
PARKER, YOU'RE FIRED! <-- My comic book podcast! Satan look here!