Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Jun 2011
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts

    tab not linking correctly

    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;


    }
    Attached Thumbnails Attached Thumbnails tab not linking correctly-website-copy.jpg  

  • #2
    New Coder
    Join Date
    Jun 2011
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    help please!!

  • #3
    New Coder
    Join Date
    Jun 2011
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    anyone?

  • #4
    New Coder
    Join Date
    Jun 2011
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I will pay $10 for whoever can help me answer this problem. no joke.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •