...

View Full Version : tab not linking correctly



youngnooblet
07-31-2011, 09:30 PM
Hi,
I have an index page, which I have a link to another page with a tabbed navigation menu. I want my index page to navigate to a specific tab on the page with the tabbed navigation menu. When the index page links to this tab, I want the banner on my website to be shown.

Right now, the link to my index page navigates to a section below the banner.

I attached a picture of of my tabbed navigation page so you can get an idea of what I'm talking about (the tabbed navigation is below the banner)


I am linking from the index page to "services.htm#tab1".

This is the html for my tabbed page (you search for "tab1" to find any problems):


<!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" xml:lang="en">
<head>
<title>Web site</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="title" content="Web site" />
<meta name="description" content="Site description here" />
<meta name="keywords" content="keywords here" />
<meta name="language" content="en" />
<meta name="subject" content="Site subject here" />
<meta name="robots" content="All" />
<meta name="copyright" content="Your company" />
<meta name="abstract" content="Site description here" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<link id="theme" rel="stylesheet" type="text/css" href="style.css" title="theme" />
<script src="pro_dropdown_2/stuHover.js" type="text/javascript"></script>

<!--JQUERY-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<!--TABs-->
<script type="text/javascript">
$(document).ready(function(){
var tabContainers = $('div#tab_wrapper > div');
tabContainers.hide().filter(':first').show();
$('#tab_nav ul li a').click(function () {
tabContainers.hide();
tabContainers.filter(this.hash).show();
$('#tab_nav ul li a').removeClass('active');
$(this).addClass('active');
return false;
}).filter(':first').click();
var bookmark = location.href.substr(location.href.lastIndexOf('#'));
$('#tab_nav ul li a[href="' + bookmark + '"]').click();
});
</script>

</head>
<!--Window position-->

<!-- top wrapper -->
<div id="topBannerWrapper">
<div id="topBanner">
<div id="hmenuWrapper">
<div id="hmenu">
<ul>
<li> <a href="index.html" shape="rect">Home</a> </li>
<li> <a href="about.htm" shape="rect">About</a> </li>
<li id="current" style="border:none"> <a href="services.htm" shape="rect">Services</a>
</li>
<li> <a href="media.htm" shape="rect">Media</a> </li>
<li> <a href="contact.htm" shape="rect">Contact Us</a> </li>
</ul>
</div>
</div>
</div>
</div>
<font color="#000000"><br />
<br />
<!-- end top wrapper -->
</font>
<div id="wrapper">
<div id="container">
<div id="content">
<div id="tab_nav" class="big">
<ul>
<li class="big"><font color="#000000" size="3"><a href="#tab1">Complete
Application Package</a></font></li>
<li class="big"><font color="#000000" size="3"><a href="#tab2">Partial
Application Services</a></font></li>
<li class="big"><font color="#000000" size="3"><a href="#tab3">Pre-College
Counseling</a></font></li>
<li class="big"><font color="#000000" size="3"><a href="#tab4">Seminars</a></font></li>
<li class="big"><font color="#000000" size="3"><a href="#tab5">Elite
Tutoring</a></font></li>
</ul>
</div>
<div id="tab_wrapper">
<div class="tab" id="tab1">

</div>

<div class="tab" id="tab2">

</div>

<div class="tab" id="tab3">

</div>


<div class="tab" id="tab4">

</div>



<div class="tab" id="tab5">

</div>


</div>
</div>
</div>
</div>
</div>
<font color="#000000"></div> </font>
</body>
</html>






This is my external css (you can search "tab" to go to the relevant css properties:





/*
----------------------------------------------------------------------------------------

Copyright 2010 - Thierry Ruiz - www.dotemplate.com - All rights reserved.

THIS TEMPLATE IS FREE AS LONG AS YOU KEEP THE LINK TO WWW.DOTEMPLATE.COM IN THE FOOTER
TO REMOVE THE LINK, PLEASE MAKE A 10 DOLLARS DONATION at www.dotemplate.com/#donate

----------------------------------------------------------------------------------------
*/


html {
background: $bottomWrapper.bg.color;
margin:0 0 0 -1px;
padding:0;
overflow-Y: scroll;
}


body {
padding:0;
margin :0;
display:table;
width:100%;
}




#wrapper {
margin:0 auto ;
width:100%;
}

body {
background-color:#FFFFFF;
}

#wrapper {
border-top: 1px solid #ffffff;
}




#topBannerWrapper {
width:100%;
height:116px;
background-color:#878988;

}



#topBanner {
width:920px;
margin:0 auto;
height:116px;
background-image:url(images/css/topBanner.jpg);
background-repeat:no-repeat;
}



#hmenuWrapper {
width:100%;
margin:0 auto ;
}

#hmenu {
position:relative;
top:45px;
float:right;
}



#hmenu ul {
list-style:none inside none;
margin:0;
padding:0;
text-transform:uppercase;
font-size:14px;
font-family:Arial,sans-serif;
}

#hmenu ul li {
float:left;
}

#hmenu ul li a {
border:0 none;
color:#660d05;
display:block;
float:left;
font-size:14px;
font-weight:bold;
height:2em;
line-height:2em;
text-align:center;
padding:0 20px;
}


#hmenu ul li a:hover {
background-color:#660d05;
color:#FFFFFF;
}

#hmenu ul li a:link {
text-decoration:none;
}

#hmenu ul li a:visited {
text-decoration:none;
}

#hmenu ul li a:active {
text-decoration:none;
}


#hmenu li#current a {
background-color:#660d05;
color:#FFFFFF;
}



#topSlideshowWrapper {
width:100%;
height:300px;
background-color:#660d05;

}

#random {
padding: 0;
margin-left:10px;
width:50px;
height:300px;
}


#sliderContainer {
width: 920px;
margin:0 auto;
}


#slider1 {
width:100%;
height: 300px;
position: relative;
overflow: hidden; /* important */
}


#slider1 img {
padding: 0;
margin:0;
width:600px;
height:300px;
}


#slider1 a img { border:none }


#slider1Content {
margin:0;
padding:0;
height:300px;
font-size:0;
width:100%;
position: relative;
}


.slider1Image {
display:none;
float:left;
position:relative;
margin:0;
padding-left:0px;
}

.slider1Image span {
position: absolute;
left:0;
font-family:Tahoma, Arial;
font-size:14px;
padding: 0px;
width:920px;
background-color:#660d05;
color: #fff;
display: none;
z-index:20;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
}


.slider1Image .bottom {
bottom: 0;
left: 0;
height: 70px;
}


#sliderLeftMask {
height:300px;
position:absolute;
top:0;
left:0px;
width:180px;
z-index:10;
background:url('images/css/sliderLeftMask.png') no-repeat scroll center center transparent;
}



#sliderRightMask {
height:300px;
position:absolute;
top:0;
left:640px;
width:350px;
z-index:10;
background:url('images/css/sliderRightMask.png') no-repeat scroll center center transparent;
}







#container {
margin:0 auto;
width:930px;

}




#content {
width:920px;
margin:0 auto ;
text-align:left;
}

#content p {
text-align:justify;
width: 820px;
}





#main {
width:610px;
float:left;
margin-right:40px ;
}

#sidebar {
float:left;
width:270px;
}

.bloc h3 {
margin-top:10px;
}

.bloc {
padding:15px;
background-color:#EEEEEE;
}



#content a:link, #content a:visited {

}


#content p {
margin-top:10px;
text-align:justify;
}


.padd15 {
padding:15px;
}

.padd20 {
padding:20px;
}


body {
color:#444444;
overflow: visible;

}

p {
letter-spacing: normal;

}


h1 {
color:#000000;
margin:20px 0 10px 0;
clear:both;
}


h2 {
color:#000000;
margin:20px 0 10px 0;
clear:both;
}


h3 {
color:#000000;
margin:10px 0 5px 0;
clear:both;
}


a:link, a:visited {
color:#1E1D1D;
text-decoration:none;
}


a:hover {
text-decoration:underline;
}



#bottomWrapper {
background-color:#000000;
background-image:url(images/css/bottomWrapper-bg.png);
background-position:center top ;
background-repeat:repeat-x;
text-align:center;
color:#70806D;
text-align:center;
width:100%;
clear:both;
}


#bottomWrapper a:link, #bottomWrapper a:visited {
color:#e7ded9;
}



#bottomWrapper a:hover{
color:#cdb380;
text-decoration:none;
}


#footer {
min-height:260px;
width:920px;
margin:0 auto;
background-color:#000000;
background-image:url(images/css/footer-bg.png);
background-position:center top ;
background-repeat:no-repeat;
}




.footer-last {
margin-right:0 !important;
clear:right;
}

.footer-one-third {
float:left;
margin:20px 100px 20px 0;
width:240px;
position:relative;
text-align:left;
overflow:hidden;
}

.footer-one-third h3 {
margin-top:10px;
}

.footer-one-third ul{
border-top:1px solid #0a0a0a;
padding:0 ;
}

.footer-one-third ul, .footer-one-third li {
list-style: none ;
margin-left:0 ;
}

.footer-one-third li {
border-bottom:1px solid #0a0a0a;
padding: 5px 0 ;
}



#bottom-links {
height:60px;
background:#000000 url('images/css/bottomLinks-bg.png') center top repeat-x;
}


a img {
border:none;
}


.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}




#tab_nav {
height: 60px;
background-repeat: no-repeat;
background-position: left 35px;
background-image: url(images/tab_bg.jpg);
width: 680px;
padding-left: 20px;
}

#tab_nav.big {
height: 60px;
background-repeat: no-repeat;
background-position: 0px 59px;
background-image: url(images/tab_bg.jpg);
width: 910px;
padding-left: 0px;
}

#tab_nav ul {
}
#tab_nav ul li {
list-style-type: none;
float: left;
}
#tab_nav ul li a {
display: block;
height: 26px;
text-align: center;
padding-top: 10px;
outline: none;
background-image: url(images/bg-tab.gif);
background-position: top;
background-repeat: no-repeat;
width: 135px;
}


#tab_nav ul li.big a {
display: block;
height: 60px;
text-align: center;
padding-top: 10px;
outline: none;
background-image: url(images/bg-tab-big.gif);
background-position: top;
background-repeat: no-repeat;
width: 173px;
}


#tab_nav ul li a:hover {
color: #333;
text-decoration: none;

}

#tab_nav ul li a.active {
text-align: center;
outline: none;
color: #333;
background-image: url(images/bg-tab-active.gif);
background-position: top;
background-repeat: no-repeat;
}

#tab_nav ul li.big a.active {
text-align: center;
outline: none;
color: #333;
background-image: url(images/bg-tab-active-big.gif);
background-position: top;
background-repeat: no-repeat;
}


#tab_wrapper {
width: 700px;

}


.tab {
width: 860px;
margin-left: 20px;
}

/* blocks */




#block {
background-color: #E9E9E9;
padding: 20px;


}

youngnooblet
07-31-2011, 09:31 PM
help please!!

youngnooblet
08-01-2011, 12:37 AM
anyone?

youngnooblet
08-01-2011, 02:27 AM
I will pay $10 for whoever can help me answer this problem. no joke.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum