SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 50
  1. #1
    SitePoint Enthusiast SteveMif's Avatar
    Join Date
    Aug 2013
    Location
    Malta
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can't get the tabs right (almost there)

    Please, have a look at this webpage which makes use of tabs with java-script.
    http://www.maltanaturetours.com/comments.php#

    The colours, borders and layout is all based on css





    Code CSS:
    <style>
    #Tabs ul {
    padding: 0px;
    margin: 0px;
    margin-left: 10px;
    list-style-type: none;
    }
     
    #Tabs ul li {
    display: inline-block;
    clear: none;
    float: left;
    height: 24px;
    width: 80px;
    border-bottom: 0px;
    }
     
    #Tabs ul li a {
    position: relative;
    margin-top: 16px;
    display: block;
    margin-left: 6px;
    line-height: 24px;
    padding-left: 10px;
    background: #DFF161;
    z-index: 9999;
    border: 2px solid #ccc;
     
    -moz-border-radius-topleft: 6px;
    border-top-left-radius: 6px;
    -moz-border-radius-topright: 6px;
    border-top-right-radius: 6px;
     
    width: 130px;
    color: #000000;
    text-decoration: none;
    font-weight: bold;
    }
     
    #Tabs ul li a:hover {
    text-decoration: underline;
    background-color: #FFFFFF;
    border-bottom: none;
    }
     
    #Tabs ul li a:selected { color: #000; background-color: #f1f0ee; font-weight: bold; }
     
     
     
    #Tabs #Content_Area { // this is the css class for the content displayed in each tab
    padding: 15px;
    margin: 24px;
    clear:both;
    line-height:19px;
    position: relative;
    top: 20px;
    z-index: 5;
    width: 800px;
    height: 800px;
    overflow:auto;
    border: 2px solid #ccc;
    border-top: 0px;
    display:block}
     
    </style>


    I want to achieve the following layout effects:

    1) I would like the width of tabs are either set individually (not all equally spaced) or have a width according to the text they have, so as for instance the years 2007-2012 have a smaller width while the first tab is wider, therefore all text is visible.

    When the tab is hovered, the botom-border goes away (but only part of it goes away). Can't figure out the problem.

    I would like that when a tab is clicked, the background colour changes (even if mouse is not over) so as to show which tab is being read. I tried with a:selected but without success.

    These are the main problems; hope I can find your kind help for a solution

    Thanks

    Stepen

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,533
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    You can try this. There is a slight jog when the longer words are hovered because you change the font style to italic. You might consider a different font that does not change character width or word spacing when italicized.

    I was unable to understand whether the presence or absence of the bottom border was the problem, so that remains unchanged (the border goes away).

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width">
        <title>template</title>
    <!--
    http://www.sitepoint.com/forums/showthread.php?1166029-Can-t-get-the-tabs-right-(almost-there)
    Thread: Can't get the tabs right (almost there)
    2013.08.25 14:20
    SteveMif
    
    You might consider a different font that does not change character width when italicized, or simply not italicize the text on :hover.
    -->
        <style type="text/css">
    
    #Tabs ul {
        list-style-type:none;
        padding-left:24px;
        margin:0;
    }
    
    #Tabs ul li {
        float:left;
        clear:none;
        border-bottom:0;
    }
    
    #Tabs ul li a {
        position:relative;
    /*  z-index:1; /* */
        display:block;
        line-height:24px;
        background:#dff161;
        border:2px solid #ccc;
        -moz-border-radius-topleft:6px;
        border-top-left-radius:6px;
        -moz-border-radius-topright:6px;
        border-top-right-radius:6px;
        color:#000;
        font-weight:bold;
        text-decoration:none;
        padding:1px 10px;
        margin-top:16px;
    /*  margin-left: 1px; /* */
    }
    
    #Tabs ul li a:hover {
        text-decoration: underline;
        background-color: #fff;
        border-bottom: none;
    }
    
    #Tabs ul li a:selected {
        color:#000;
        background-color:#f100ee;
        font-weight:bold;
        padding:14px 6px 8px 6px;
    }
    
        </style>
    </head>
    <body>
    
    <div id="Tabs">
        <ul>
            <li id="li_tab1" onclick="tab('form')"><a href="#">Feedback Form</a></li>
            <li id="li_tab2" onclick="tab('2012')"><a href="#">2012</a></li>
            <li id="li_tab3" onclick="tab('2011')"><a href="#">2011</a></li>
            <li id="li_tab4" onclick="tab('2010')"><a href="#">2010</a></li>
            <li id="li_tab5" onclick="tab('2009')"><a href="#">2009</a></li>
            <li id="li_tab6" onclick="tab('2008')"><a href="#">2008</a></li>
            <li id="li_tab7" onclick="tab('2007')"><a href="#">2007</a></li>
            <li id="li_tab8" onclick="tab('news')"><a href="#"> Newspaper</a></li>
        </ul>
    </div>
    
    </body>
    </html>
    And you may want to set the margin-top of #Content_Area to zero.

  3. #3
    SitePoint Enthusiast Belsnickle's Avatar
    Join Date
    Feb 2012
    Location
    Chico, CA
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, first things first. Don't needlessly inconvenience your users, the copyright protection script you're running does that in spades since it will block copy and past, bookmarking, etc all because you're trying to protect html source that anyone that knows what they're doing can access anyway. You're basically just making people go through an extra step or throw up their hands and say why even bother or how ridiculous.

    Code:
    #Tabs ul li {
    display: inline-block;
    clear: none;
    float: left;
    height: 24px;
    width: 80px;
    border-bottom: 0px;
    }
    #Tabs ul li a {
    position: relative;
    margin-top: 16px;
    display: block;
    margin-left: 6px;
    line-height: 24px;
    padding-left: 10px;
    background: #DFF161;
    z-index: 9999;
    border: 2px solid #ccc;
     
    -moz-border-radius-topleft: 6px;
    border-top-left-radius: 6px;
    -moz-border-radius-topright: 6px;
    border-top-right-radius: 6px;
     
    width: 130px;
    color: #000000;
    text-decoration: none;
    font-weight: bold;
    }
    Remove the width, one is fixing the width of the text/link area in each tab the other is fixing the width of the tabs themselves. The default width setting for the inner area of each tab is auto in that case and it manually adjusts based on length of text like you want. If you need upper or lower limits just use min-width or max-width. This will also fix your bottom border issue becuase what you're seeing is the overlapping borders from the other tab elements.

    Your margin-left, in the red, will cause spacing in your tabs once you remove the width, it's not doing anything for you otherwise and for the effect you want should probably be removed. If what you were trying to do is align the tabs with the table replacing it with left:24px should do that, because you're using positioning top, left, right, or bottom can adjust it's position offset.

    :selected applies to form elements, what you are looking for is most likely :active, make sure you place it below :hover in your style sheet.


    and seriously, no one is going to steal your site's look and feel.

  4. #4
    SitePoint Enthusiast SteveMif's Avatar
    Join Date
    Aug 2013
    Location
    Malta
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Belsnickie and RonPat, thanks to you, things have improved a lot. I also did more tweaking to have a smoother tab.

    Everything is working well now except:

    1) The selected tab (the one the user is reading) changes colour when clicked on (via the active link) but then it goes to the original colour after clcicking and hoverout. I want that the colour remains, like this example but using different tabs:
    http://www.maltawildplants.com/


    2) A minor thing and probably impossible, but the top border of the contents area is missing at the part where there is no tabs. Could it be included?

    The script now looks like this:
    Code CSS:
    <style>
    #Tabs ul {
        list-style-type:none;
        padding-left:24px;
        margin:0;
    }
     
    #Tabs ul li {
        float:left;
        clear:none;
        border-bottom:0;
    }
     
    #Tabs ul li a {
        position:relative;
    /*  z-index:1; /* */
        display:block;
        line-height:24px;
        background:#E0d040;
        border:2px solid #ccc;
        -moz-border-radius-topleft:6px;
        border-top-left-radius:6px;
        -moz-border-radius-topright:6px;
        border-top-right-radius:6px;
        color:#000;
        font-weight:bold;
        text-decoration:none;
        padding:1px 10px;
        margin-top:16px;
    /*  margin-left: 1px; /* */
    }
     
    #Tabs ul li a:hover {
        text-decoration: underline;
    	 font-style:normal;
        background-color: #FFF090;	 
        border-bottom-color: #FFF090;
    }
     
    #Tabs ul li a:active {
        color:#000;
        background-color:#fff;
        font-weight:bold;
    }
     
    #Tabs #Content_Area { // this is the css class for the content displayed in each tab
    		padding: 15px;
    		margin: 24px;
    		clear:both;
    		line-height:19px;
    		position: relative;
    		z-index: 5;
    		width: 700px;
    		height: 600px;
    		overflow:auto;
    		border: 2px solid #ccc;
    		border-top: 2px;
    		display:block;
    		background-color:#FFF090;
    }
    </style>

    I removed the right click deactivation script. It was meant for other webpages on the same style.

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,206
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    The script that controls this isn' set up properly. It's meant to set a class of "active" on the tab that's currently showing. If it wre doing that, you would set a style for the pab with a class of "active". The script is far from doing that, though, so needs a JS person to fix it. Perhaps @Pullo can help with that.

  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,533
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by ralph.m View Post
    The script that controls this isn' set up properly. It's meant to set a class of "active" on the tab that's currently showing. If it wre doing that, you would set a style for the pab with a class of "active". The script is far from doing that, though, so needs a JS person to fix it. Perhaps @Pullo can help with that.
    Seems to me that the styles of the anchors ought to be handled entire with CSS. So far, I can see no advantage to having JavaScript control these styles other than highlighting the current tab. If JavaScript is overriding the CSS, then that's a different story.

    I should be able to offer a CSS solution within a few minutes... maybe... if needless JavaScript doesn't interfere.

  7. #7
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,533
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    Change the on-page styles to this:
    Code:
    <style>
    
    #Tabs ul {
        list-style:none;
        overflow:hidden;
        padding:16px 0 0 24px;
        margin:0;
    }
    
    #Tabs ul li {
        float:left;
    }
    
    #Tabs ul li a {
        display:block;
        line-height:24px;
        background:#e0d040;
        border:2px solid #ccc;
        -moz-border-radius-topleft:6px;
        border-top-left-radius:6px;
        -moz-border-radius-topright:6px;
        border-top-right-radius:6px;
        color:#000;
        font-weight:bold;
        text-decoration:none;
        padding:1px 10px;
    }
    
    #Tabs ul li a:hover {
        font-style:normal;
        text-decoration:underline;
        background-color:#fff090;
        border-bottom:2px solid transparent;    /* add me */
    }
    
    #Tabs ul li a:active {
        background-color:#fff;
     }
    
    #Tabs #Content_Area {  // this is the css class for the content displayed in each tab
        width:700px;
        height:600px;
        line-height:19px;
        overflow:auto;
        border:2px solid #ccc;
        background-color:#fff090;
        padding:15px;
        margin:-2px 24px 24px;    /* add me */
    }
     
    </style>
    Please NOTE:
    The comments page shows 50 HTML validation errors.
    The ecology page shows 106 HTML validation errors.
    Both could use some serious TLC.
    http://validator.w3.org/

  8. #8
    SitePoint Enthusiast Belsnickle's Avatar
    Join Date
    Feb 2012
    Location
    Chico, CA
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is probably because he's using old old outdated table formatting, etc.

  9. #9
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,533
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Belsnickle View Post
    This is probably because he's using old old outdated table formatting, etc.
    I disagree. Outdated, old table code can and should be essentially error free. Unfortunately, these days, many new coders underestimate the value of writing good HTML code, then wonder why their equally squirrely CSS doesn't work. :sigh: It's a learning curve.

  10. #10
    SitePoint Enthusiast Belsnickle's Avatar
    Join Date
    Feb 2012
    Location
    Chico, CA
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The problem is though that depending on your validator settings it will flag is as invalid code even if it's functionally not an issue. Particularly if you have it set to HTML 5 or HTML. It also has a tendency to flag valid encoding as invalid depending on the HTML setting it's validating as and on what looks to be a largely html3 codding conventions site I'd imagine you'd get more than a fair bit of those.

    Keep in mind I haven't actually looked at it in the validator yet.

    Edit: in his case there's a bit of that, like absmiddles and margin's on those elements but most of it is typos and invalid chars and such so yeah, plenty of TLC needed

  11. #11
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,533
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    The validators are tools. They flag as invalid the things that they have been programmed to flag. Part of the learning curve is learning how to use the tools that make your code better. One can write perfectly valid code that totally fails to render as desired. One can also write pages that are marginally invalid that render just fine.. New technologies sometimes use techniques that validators do not recognize. Nevertheless, one cannot lose by validating his code. Squeaky clean valid code is not necessarily a sign of success; but understanding exactly why the code is not valid is very important to writing stable, durable, cross-browser compatible code. The validators are just tools to help a coder reach that goal.

    Old table code can be perfectly valid and stable.

    With a bad doctype, though, all bets are off

    This poster's code is a learning lab of errors. Good stuff.

  12. #12
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Hey Ralph,

    Quote Originally Posted by ralph.m View Post
    The script that controls this isn' set up properly. It's meant to set a class of "active" on the tab that's currently showing. If it wre doing that, you would set a style for the pab with a class of "active". The script is far from doing that, though, so needs a JS person to fix it.
    This bit of JS is setting a class of "selected" on the link that is currently selected:

    Code:
    if ( id == selectedId ) {
      tabLinks[id].className = 'selected';
      contentDivs[id].className = 'tabContent';
    } else {
      tabLinks[id].className = '';
      contentDivs[id].className = 'tabContent hide';
    }
    So the markup looks like:

    Code:
    <ul id="tabs">
      ...
      <li><a href="#endemics" class="selected">Endemics</a></li>
      ...
    </ul>
    If you wanted an additional class name of "active" to be added to the <li> elements, you'd just do this:

    Code:
    if ( id == selectedId ) {
      tabLinks[id].className = 'selected';
      tabLinks[id].parentNode.className = 'active';
      contentDivs[id].className = 'tabContent';
    } else {
      tabLinks[id].className = '';
      tabLinks[id].parentNode.className = '';
      contentDivs[id].className = 'tabContent hide';
    }
    Then the markup would be:

    Code:
    <ul id="tabs">
      ...
      <li class="active"><a href="#endemics" class="selected">Endemics</a></li>
      ...
    </ul>
    Does that help?

  13. #13
    SitePoint Enthusiast SteveMif's Avatar
    Join Date
    Aug 2013
    Location
    Malta
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Belsnickle View Post
    This is probably because he's using old old outdated table formatting, etc.
    I know, I have created this website in 2006-7 and I am not a coder by profession. When I started to make my first html website in 1999 (I remember the prog was called hotdog) , the way at that time was table design and I kept that mentality all over this time. I know coders say it is outdated/old, but it is easy and works most of the time. Is there a link discussing the disadvantages of table-design. Nevertheless, I thought about the possibility of nested tables might be a problem here and I have tried the tabs & content out of any table and still it did not work.

  14. #14
    SitePoint Enthusiast SteveMif's Avatar
    Join Date
    Aug 2013
    Location
    Malta
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Pullo, thanks for your time. I see that you are optimizing the code for www.maltawildplants.com (MWP) which at present I am happy about as it does the job, but the code in question is that on www.MaltaNatureTours.com/comments.php (MNT) where I wish to have the selected tab to stand out by being coloured differently or the same as the content area. Some suggested it can be done via java-script, some said it can be solved via css. (probably it's both!)

  15. #15
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,206
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Pullo View Post
    This bit of JS is setting a class of "selected" on the link that is currently selected ...
    Thanks Pullo. Blimey, that's not happening in my browser. There are no classes on any tab when it's selected.

  16. #16
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,533
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Thanks Pullo. Blimey, that's not happening in my browser. There are no classes on any tab when it's selected.
    Hi, Ralph,

    The page, http://www.maltawildplants.com/ , for which Pullo wrote the JavaScript, seems to be working just fine in my browser.

    The first page, http://www.maltanaturetours.com/comments.php#tp, doesn't have the CSS to support the class, yet. (Actually, I think the class was coded as a pseudoclass and the OP removed it.)

  17. #17
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by SteveMif View Post
    Hi Pullo, thanks for your time. I see that you are optimizing the code for www.maltawildplants.com (MWP) which at present I am happy about as it does the job, but the code in question is that on www.MaltaNatureTours.com/comments.php (MNT) where I wish to have the selected tab to stand out by being coloured differently or the same as the content area.
    Oh dear. Sorry about that!
    I'll sort that out now. Hang fire!

  18. #18
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,533
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by SteveMif View Post
    Hi Pullo, thanks for your time. I see that you are optimizing the code for www.maltawildplants.com (MWP) which at present I am happy about as it does the job, but the code in question is that on www.MaltaNatureTours.com/comments.php (MNT) where I wish to have the selected tab to stand out by being coloured differently or the same as the content area. Some suggested it can be done via java-script, some said it can be solved via css. (probably it's both!)
    Yes, it's both. The CSS that I posted in #7 should fix the top border on #Content_Area and allow the bottom of the active tab to flow through to #Content_Area. You will need to write a similar JavaScript for the comments page and set a CSS class for .selected and describe it.
    Code:
    #Tabs ul li a.selected {
        font-style:normal;
        text-decoration:underline;
        background-color:#fff090;
        border-bottom:2px solid transparent;
    }

  19. #19
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    So, this'll work for the page: http://www.maltanaturetours.com/comments.php

    Replace this:

    HTML Code:
    <ul>
      <li id="li_tab1" onclick="tab('form')"><a href="#tp">Feedback Form</a></li>
      <li id="li_tab2" onclick="tab('2012')"><a href="#tp">2012</a></li>
      <li id="li_tab3" onclick="tab('2011')"><a href="#tp">2011</a></li>
      <li id="li_tab4" onclick="tab('2010')"><a href="#tp">2010</a></li>
      <li id="li_tab5" onclick="tab('2009')"><a href="#tp">2009</a></li>
      <li id="li_tab6" onclick="tab('2008')"><a href="#tp">2008</a></li>
      <li id="li_tab7" onclick="tab('2007')"><a href="#tp">2007</a></li>
      <li id="li_tab8" onclick="tab('news')"><a href="#tp">Newspaper</a></li>
    </ul>
    With this:

    HTML Code:
    <ul id="tab-nav">
      <li class="active"><a href="#form">Feedback Form</a></li>
       <li><a href="#2012">2012</a></li>
       <li><a href="#2011">2011</a></li>
       <li><a href="#2010">2010</a></li>
       <li><a href="#2009">2009</a></li>
       <li><a href="#2008">2008</a></li>
       <li><a href="#2007">2007</a></li>
       <li><a href="#news">Newspaper</a></li>
    </ul>
    And this:

    Code JavaScript:
    function tab(tab) {
      document.getElementById('form').style.display = 'none';  
      document.getElementById('2012').style.display = 'none';
      document.getElementById('2011').style.display = 'none';
      document.getElementById('2010').style.display = 'none';
      document.getElementById('2009').style.display = 'none';
      document.getElementById('2008').style.display = 'none';
      document.getElementById('2007').style.display = 'none';
      document.getElementById('news').style.display = 'none';
      document.getElementById('li_tab1').setAttribute("class", "");
      document.getElementById('li_tab2').setAttribute("class", "");
      document.getElementById('li_tab3').setAttribute("class", "");
      document.getElementById('li_tab4').setAttribute("class", "");
      document.getElementById('li_tab5').setAttribute("class", "");
      document.getElementById('li_tab6').setAttribute("class", "");
      document.getElementById('li_tab7').setAttribute("class", "");
      document.getElementById('li_tab8').setAttribute("class", "");
      document.getElementById(tab).style.display = 'block';
      document.getElementById('li_'+tab).setAttribute("class", "active");
    }

    With this:

    Code JavaScript:
    var tabList = document.getElementById("tab-nav"),
        tabs = tabList.getElementsByTagName("li");
     
    for (var i=0, l = tabs.length; i < l; i++){
      tabs[i].onclick = function(e){
        handleTabClick(e, this);
      }
    }
     
    function handleTabClick(e, tab){
      var activeTab = document.getElementsByClassName("active")[0],
          activeContentId = activeTab.childNodes[0].getAttribute("href").replace(/#/, ""),
          activeContent = document.getElementById(activeContentId),
          contentId = tab.childNodes[0].getAttribute("href").replace(/#/, ""),
          contentDiv = document.getElementById(contentId);
     
      activeContent.style.display = "none";
      contentDiv.style.display = "block";
      activeTab.className = '';
      tab.className = 'active';
      e.preventDefault();
    }

    It's a bit clunky, but'll work.
    Let me know if you decide to go with this and I'll look at tidying things up a little.

    Here's a demo.

  20. #20
    SitePoint Enthusiast SteveMif's Avatar
    Join Date
    Aug 2013
    Location
    Malta
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am soon off to the library, but have enough time to reply RonPat about the border.


    TabsExampleMNT.jpg

    The content area css at #7 did not work well for me. Apparently the Clear:both was essential. Anyway, your code generated a grey line border below the tabs which was permanent. I want that the colour of the tab and the content area background be the same and merge as one body. Since I am not good to explain in words, here I attach an image example. However the bottom pic lacks the grey border were there are no tabs. I think the border has to stay (the way you suggested) but the selected tab (at the moment working on hoover) has to get 2pix larger so as to overlay and cover the top border of the content area.

    The image below was taken with the mouse over the tab. I want to stay like that when selected (Just to remove any doubts of what I wish to achieve)

    A big thank you to all

  21. #21
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,533
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by SteveMif View Post
    I am soon off to the library, but have enough time to reply RonPat about the border.


    TabsExampleMNT.jpg

    The content area css at #7 did not work well for me. Apparently the Clear:both was essential. Anyway, your code generated a grey line border below the tabs which was permanent. I want that the colour of the tab and the content area background be the same and merge as one body. Since I am not good to explain in words, here I attach an image example. However the bottom pic lacks the grey border were there are no tabs. I think the border has to stay (the way you suggested) but the selected tab (at the moment working on hoover) has to get 2pix larger so as to overlay and cover the top border of the content area.

    The image below was taken with the mouse over the tab. I want to stay like that when selected (Just to remove any doubts of what I wish to achieve)

    A big thank you to all
    I just checked the link in post #1 and do not see where my code has been added, so I cannot accurately diagnose the problem. If you can post the working code, I'll give it another look. The size of the tab should not have to be increased.

  22. #22
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,206
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Nice work, Pullo. I hope SteveMif will give this a go!

  23. #23
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,533
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    Steve, there was nothing wrong with my code. (Well, there was, but nothing that you noticed.) Your CSS has an error that is still there. I asked you to replace your CSS with my CSS, but your didn't. Instead you copied parts of mine. That left the error in your CSS. You do not need {clear:both} in #Content_Area. But you DO need to delete this bad "comment":
    Code:
    #Tabs #Content_Area { // this is the css class for the content displayed in each tab
    Now that Pullo has completed the JavaScript to control the tabs and display the divs on your page, I have finished the CSS... again.

    I copied this code from Pullo's server and replaced the on-page CSS with a better version (I think Pullo used my CSS from post #7). You can copy this entire code to a file and run it on your PC. The borders and the tabs work as expected, or so I believe

    You can style the colors of the tabs and text to suit yourself. The borders work.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <head>
    <!-- http://www.sitepoint.com/forums/showthread.php?1166029-Can-t-get-the-tabs-right-(almost-there) -->
        <title> Malta Nature Tours - Quality guided walks through Maltese nature [ Comments & Feedback Form ]</title>
        <style>
    
    #Tabs ul {
        list-style-type:none;
        overflow:hidden;   /* required because the list items are floated */
        padding:16px 0 0 24px;  /* top and left padding as desired */
        margin:0;
    }
    
    #Tabs ul li {
        float:left;
    }
    
    #Tabs ul li a {
        display:block;
        line-height:24px;
        background:#e0d040;
        border:2px solid #ccc;
        border-radius:6px 6px 0 0;
        color:#000;
        font-weight:bold;
        text-decoration:none;
        padding:1px 10px;
    }
    
    #Tabs ul li a:hover {
        background-color:#fff090;
        font-style:normal;
        text-decoration:underline;
    }
    
    #Tabs ul li a:active {
        color:#000;
        background-color:#fff;
    }
    
    #Tabs li.active a {
        color:#000;
        text-decoration:none !important;
        background-color:#fff090;
        border-bottom:2px solid transparent;
        cursor:default;
    }
    
    #Tabs #Content_Area {
        line-height:19px;
        width:700px;
        height:600px;
        overflow:auto;
        border:2px solid #ccc;
        background-color:#fff090;
        margin:-2px 24px 24px;    /* this {margin-top:-2px} raises #Content_Area under #Tabs so borders overlap */
    }
    
        </style>
    </head>
    <body leftmargin="0" topmargin="5">
    <table width="98%" align="center" cellpadding="00" cellspacing="0">
        <tr>
            <td>
                <table width="100%" cellspacing="0" cellpadding="0">
                    <tr>
                        <td width="55" height="43" valign="top">&nbsp;</td>
                    </tr>
                </table>
            </td>
        </tr>
    <!--- - - Row 2 - -->
        <tr>
            <td>
                <table width="100%" cellspacing="0" cellpadding="0">
    <!--- - -SubRow 1 : Logo and Title and Intro  -->
    <!--- - -SubRow 2 : Links and body -->
                    <tr>
                        <td width="220" valign="top" class="leftcolumn"></td>
    <!--- - -SubRow 2 : Body -->
                        <td valign="top" class="rightcolumn">
                            <table width="92%" align="center" cellpadding="0" cellspacing="0">
    <!-- Table 2 Row 1 -->
                                <tr>
                                    <td valign="top">&nbsp;</td>
                                </tr>
    <!-- Table 2 Row 2 -->
                                <tr>
                                    <td class="rightcolumn">
                                        <table width="100%" cellspacing="0" cellpadding="0">
                                            <tr>
                                                <td width="4" class="leftcolumn">&nbsp;</td>
                                                <td width="756" valign="top">
    <!--- - - - - - - - - Start of Data - - - - - - - - - -->
                                                    <div id="Tabs">
                                                        <ul id="tab-nav">
                                                            <li class="active"><a href="#form">Feedback Form</a></li>
                                                            <li><a href="#2012">2012</a></li>
                                                            <li><a href="#2011">2011</a></li>
                                                            <li><a href="#2010">2010</a></li>
                                                            <li><a href="#2009">2009</a></li>
                                                            <li><a href="#2008">2008</a></li>
                                                            <li><a href="#2007">2007</a></li>
                                                            <li><a href="#news"> Newspaper</a></li>
                                                        </ul>
                                                        <div id="Content_Area">
        <div id="form">
        <table align=center>
        <tr>
        <td width="90%" align="left">
        <h3>
        It would be appreciated if you can leave some comments about your experience in one of our tours. Fields marked with * are obligatory and you can press tab to move from filed to the next. This will help to improve anyting which could have been better. Thank you for your time. </h3>
        </td>
        </tr>
        <tr>
        <td align="center" ><h2>Feedback Form </h2></td>
        </tr>
        <tr>
        <td colspan=2 align="center">
        <form enctype="multipart/form-data" action="forms/commentproc.php" method="post">
        <table cellspacing="5">
        <tr>
            <td align="center">Your name  * </td>
            <td align="center">Country you come from  * </td>
            <td align="char">Email (only for contacting you back) * </td>
        </tr>
        <tr>
            <td><input type="text" size="20" align="left" title="Enter your name" name="name"></td>
            <td><input type="text" size="20" align="left" titlet="Enter the country you are from" name="country"></td>
            <td><input type="text" size="36" align="left" title="Enter your email" name="email"></td>
          </tr>
        </table>
        <br>
        Which tour have you taken? * &nbsp;&nbsp;&nbsp;  <input type="text" size="50" align="left" title="Enter the place/locality of the tour you have taken" name="tour"><br><br>
        When was your tour with Malta Nature Tours (or period of your holiday in Malta)? <br>
        <input type="text" size="30" align="left" title="When was your holiday in Malta? (or which date you came for the tour)" name="tourdate"><br><br>
        Write your comments about your experience during your tour with MaltaNatureTours.com * <br>
        <textarea  rows="5" cols="60" title="Write your comments about MaltaNatureTours.com" name="comment"></textarea><br><br>
        Antispam verification question: Choose the correct answer from the drop down menu. <h2>
        Where do Malta Nature tours take place:
        <select name="spam" title="Choose answer from drop down menu">
        <option value="0" selected>Choose answer: </option>
        <option value="1">CANADA</option>
        <option value="2">ZIMBABWE</option>
        <option value="3">MALTA</option>
        <option value="4">USA</option>
        <option value="5">MARS</option>
        <option value="6"> </option>
        </select>
        </h2>
        <center>
        <input value="Clear Entry" name="Reset Input" align="left" type="reset">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input value="Send Data" name="Send comment" align="right" type="submit">
        </center>
        </form>
        <br>
        <img src="maltanaturetours_files/index_divider.gif" width=450>
        </td>
        </tr>
        </table>
        </div>
        <div id="news"  style="display: none;">
        <br><img src="gfx/Newspaper_cutting.gif" alt="Comments on our Tours published on the Times of Malta (2006)" width="495" height="802" vspace="12" border="1" align="middle">
        </div>
        <div id="2012"  style="display: none;">
        <h2> Selected Tourists' Feedback - 2012 </h2>
        <p class=faq1> Neil, Sandra and Dylan, UK </p>
        <p class=faq2> It was a fantastic tour, well-organised tour in a very beautiful country with many wild plants even in the small cracks of rock. The views of Selmun were fantastic and I particularly found the battered barrack interesting, despite fouled by trash. I suggest that Fort Campbell shall be restored as it can offer a high touristic site.
        <br><br>
        Jan 2012</p>
        <br>
        <p class=faq1> Elise and Arlyene, Belgium </p>
        <p class=faq2> Despite some showers, the walk was excellent and had most of our flowers identified for out photobook. We emailed Stefan for the identification of some few more photos back in Brussels and he gave us the answers very quick. We really liked the water stream and its small cascades and then a walk along the Victoria wall. The lunch was superb.
        <br><br>
        Mar 2012</p>
        <br>
        <p class=faq1> The Deutsch group, (Berlin) </p>
        <p class=faq2> I highly recommend this tours, with several themes packed in and well explained by the tour leader. It is not the standard walk along the pathway, but we had some adventure fun climbing down those rock-hewn stairs and a very climb to Selmun Palace. The wild Iris were fantastic, and I captures some great photos despite we could not o beside them. The only thing I do not like in Malta is the wind (or maybe we were just unlucky during our stay!>
        <br><br>
        Mar 2012</p>
        <br>
        <p class=faq1> Garcia and Navarro (Spain) </p>
        <p class=faq2> Despite Malta and Spain are not that far away, the biodiversity is very different. The garrigue and maquis were at a glance the same and while a number of species are common, a good number were new to us. I liked the tour because it was private and we could spend as much time as we wanted to take photos of the Maltese species. The smell of the Chiliadenus was really impressive, pity it was not in flower.>
        <br><br>
        Apr 2012</p>
        <br>
        <p class=faq1> Tina and David (UK) </p>
        <p class=faq2> What a lovely day we had at Gozo thanks to the well-organised tour-leader. We have been at this hilly island few years ago, and I was in doubt if we would see other interesting sites, but we trusted Stephen. We have been to a number of  new sites that are pretty away from the normal touristic route and so we could enjoy these natural spots in peace and without that sense of rush. Next time we opt for a picnic, because the lunch took an hour plus, though I have to admit that it was delicious and there was such a nice view over Comino! It was a miracle that we were the last three cars to fit in the ferry. Transport from hotel to Malta and back, for a total of 10hours at rather cheap price.
        <br><br>
        May 2012</p>
        <br>
        </div>
        <div id="2011" style="display: none;">
        <h2> Selected Tourists' Feedback - 2011 </h2>
        <p class=faq1> Charlotte and Julien / France </p>
        <p class=faq2> We really enjoyed this tour and the many information provided by Stephen. He really knows his stuff well and explained us a lot about Malta's nature. Moreover, Stephen is very nice and friendly and made the tour very pleasant. The tour was instructive and Stephen did care about each person's physical capabilities. We highly recommend a tour with him!
        <br><br>
        May 2011</p>
        <br>
        <p class=faq1> Sandra, Matilda and Heather / Scotland</p>
        <p class=faq2> Despite in our sounded 60s, we have enjoyed this nature excursion very much, thanks to the knowledge of Steven, the well organised track, and the fact we were a very small group and thus personal attention and stops-on-demand were possible for us. I will not forget easily the fragrance of the  Maltese fleabane.  We also think that the price was very reasonable and well spent for us. We will definitely book a dfferent tour, maybe the one in Gozo. Highly recommended behalf of us.
        <br><br>
        Apr 2011</p>
        <br>
        <p class=faq1> Steff Steinwant / Austria </p>
        <p class=faq2> thank you for 2 real interesting Orchid Tours on the end of March 2011. We enjoyed it very much, especially the new variety Ophrys bombyliflora parviflora; it looks real cute :-) I will soon post some pics on Facebook... Greetings from Vienna, Austria - Steff
        <br><br>
        Mar 2011</p>
        <br>
        <p class=faq1>Chris and Anne Jones / Chester, UK</p>
        <p class=faq2> Stephen, you looked after us so well and we were amazed by the wild flowers and the scenery on our exploration of a beautiful part of Gozo.  It was a pleasure to be shown this by such a knowledgeable person.  Not only botany but geology, history, and local customs. Without your tour, we would never get so much from Mgarr.
        <br><br>
        Feb 2011</p>
        <br>
        <p class=faq1>Rob, Jo, Fred & Cath - (Viv's visitors) / Coventry, England</p>
        <p class=faq2> We have now had the pleasure of enjoying two 'tours' with STEPHEN and on both occasions we found them to be both well organised and informative.
        Stephen's local geographic, as well as his botanical knowledge seems limitless. We will certainly look at the possibility of joining him again for another tour next time we visit Malta.
        <br><br>
        Jan 2011</p>
        <br>
        </div>
        <div id="2010" style="display: none;">
        <h2> Selected Tourists' Feedback - 2010 </h2>
        <p class=faq1> Karl Renz and family / Deutschland </p>
        <p class=faq2> We came 'unexpected' to Malta in November after winning 2 tickets and I was afraid that there is not much to see in this out-of-season period. Apart Valletta and Mdina, the nature walk provided by Stefan was a beautiful surprise, because while in Munich nature is dying away, in Malta it is the start. The weather was warm and sunny (in November) and the Mista tour was perfect in all senses - views, info, biodiversity, excercise and a careful good guide. For the very first time my children enjoyed a tour thanks also to the fact that it was flexible and stopped often for them to take photos, rest or play around. My wife was impressed by the size and taste of the bread  included in the tour. I look foward to visit Malta again some time in Spring when the nature is at its peak.  Very satisfied all of us.
        <br><br>
        November 2010</p>
        <br>
        <p class=faq1> Team "birthday present" from France/Germany/Switzerland/Ireland</p>
        <p class=faq2> With a few friends we did the botanical research tour. It was really a great experience.
        The guide was really kind, friendly and he knew a lot ! It was really flexible and relaxed, the guide adapted the tour completely on our request and demands. Beautiful views, precise explications, interesting stories......just great :) Thanks
        <br><br>
        April 2010</p>
        <br>
        <p class=faq1> Ekaterina Rostova, Russian living for a while in Malta</p>
        <p class=faq2> I and my family chosen this tour and it was very interesting and beautiful. It was surprising that there are a good number of plants which are common or almost similar in Moscow. I really like the fragrance of the Maltese plant fleabane and the thyme, while the orkids are so strange beautiful plants. This guided nature walk had a bit of everything, and our kids enjoyed it a lot and had one of their longest sleeps at night that I remeber of! My husband liked a lot to see the river-like water and waterfalls over the walls and the speciel vegetation that grew at the sides of the water and under the trees. A special tour that you are really in touch with nature and well explained by the leader.
        <br><br>
        February 2010
        </p>
        <br>
        <p class=faq1> Dr  Jan Cerovsky, President Emeritus Planta Europa, Honorary Member of IUCN</p>
        <p class=faq2>Mz wife Jarmila and me visited Malta in March 2010 with the intention to observe the local flora and vegetation, orchids in particular. Our plan would not be a success, if we had not establish a contact with Stephen Mifsud. Stephen is an outstanding expert in botany and conservation. He was as kind as to guide us during two whole-day tours: one through the main island, one to Gozo. We admired his competence and ejoyed the friendship of him. We also had the possibility to visit some amazing cultural monuments. We will keep the knowledge and impressions gained. I intend also to write some article about the plants in Malta for some of the Czech biological/conservation journals. Many thanks to Stephen!
        <br><br>
        March 2010
        </p>
        <br>
        <p class=faq1> Anthony Hamilton,  UK</p>
        <p class=faq2> I am Anthony Hamilton, a professional botanist who has retired from the post of Senior Lecturer in Plant Sciences at the University of East London (U.K.).  I have also been involved in writing and publishing various publications (books and articles) principally about Mediterranean plants, including Walks and Flowers of Gibraltar, Andalusian Flowers and Countryside and the Gladiolus accounts of Flora Europaea (Vol.V) and Flora of Turkey (Vol.8).
        <br><br>
        I took one of the tours organised by Stephen Mifsud in April 2010 who introduced me to the floras of Malta and Gozo.
        <br><br>
        I was particularly impressed, as a professional, by the enormous depth of knowledge of Stephen Mifsud and particularly  by his photographic memory as to exactly where he'd found a plant several years before !
        <br><br>
        He showed me very competently around the islands and he was very patient in answering questions, particularly persistent and fiddly ones, as I tried to elicit the finer points.  Nothing was too much trouble for him.
        <br><br>
        Had I not had Stephen as I guide, I would never have learned as much as I did.
        <br><br>
        I am certainly coming back to Malta for another session as soon as time allows.
        <br><br>
        June 2010
        </p>
        <br>
        </div>
        <div id="2009" style="display: none;">
        <h2> Selected Tourists' Feedback - 2009 </h2>
        <p class=faq1> Bill Barlow, United Kingdom</p>
        <p class=faq2> Thank you for all the patience you have taken with me and all the plant identifications. I was amazed about the biodiversity of the islands. It was not difficult to book a second tour from you during my 2 week stay on the islands after the excellent tour you have given me in Buskett / Fauwara / Dingli area. Hopefully we meet again next year.   </p>
        <br>
        <p class=faq1> Trish and James, Canada</p>
        <p class=faq2> A very well-guided tour which kept our camera and mind busy all way long. The scenes were marvelous and we are happy to have numerous great nature-related photos in our album, with plants and butterflies being labeled. Without you we could never achieve this. Well done steven - a highly recommended tour in Malta.  </p>
        <br>
        <p class=faq1> Julian and Erica. USA</p>
        <p class=faq2> We selected the private Gozo tour to stay on our own and that was a great idea. We could travel wherever we liked to and stay as long as we wished without any rush. The huge cave over the beach was impressive. The guide did an excellent job and offered for free overtime hours since we were enjoying Gozo so much. Tips well deserved Steven, thank you for making another unforgettable day in our honeymoon trip in Malta and Italy. PS- I just hated to see those men catching birds in small cages - so cruel practice.  </p>
        <br>
        <p class=faq1> Hanna Stenberg, Germany</p>
        <p class=faq2> The nature of Malta is fantastic, and this tour highlights it very well. Money well spent compared to other tours I taken on the islands. The combination of a half-day tour in the morning at Chadwick Lakes and a deserved lunch at the nearby old 0city of Mdina worked really well.   </p>
        <br>
        <p class=faq1> Mario Meyer, Switzerland</p>
        <p class=faq2> A great experience for my family. Kids got very excited and happy to see and photograph the lizards. I liked the scenes over the cliffs , while my wife is now busy with the seeds she got during the walk.  </p>
        <br>
        <p class=faq1> Veronique Wisdon, USA</p>
        <p class=faq2> A very well organised tour with lots of information given about the wild plants and historic sites we met along the tour in Selmoon. I really liked the fact that the tour was relaxed with no feeling of rush as in other tours I have taken. The views were incredible and the fresh air was delightful. Thank you for offering this walk -  I have passed your contact cards to my friends and relatives here in Chicago.   </p>
        <br>
        </div>
        <div id="2008" style="display: none;">
        <h2> Tourists' Feedback - 2008 </h2>
        <p class=faq1> Robin, The netherlands</p>
        <p class=faq2> I will never forget this walk in the countryside of Malta. In one day I have seen plenty of spectacular wild flowers (the daffodil was my best), beautiful coastal areas some 100m above sea level, learnt some history of the Maltese islands, seen a World War II embankment, got a nice tan, and probably lost some weight! Congratulations to Malta Nature Tours. </p>
        <p class=faq1> Emilie & Jonas, Germany</p>
        <p class=faq2> A superb tour in nature giving us a good break from shopping, museums and city walks. What stands out was that the pace of the tour was easy and with plenty of time to relax and have breaks on demand, that is no rush for time. 12 points for the tour leader. </p>
        <p class=faq1>Anna and Yuri, Moscow</p>
        <p class=faq2> The private tour in Gozo was the best day for our Honeymoon vacation in Malta. Affordable, relaxing and friendly escort leader. Pity it could not be extended to 2 days. I will tell my friends how interesting Malta is. </p>
        <p class=faq1> US Science Academy Group</p>
        <p class=faq2> Stephen, you really showed us wonderful sites in Malta and gozo, and were amazed by the natural highlights of your country. We pass a good word about your service at the Academy for future services. Well done.  </p>
        <p class=faq1> Stefana Diaconescu,  Romania</p>
        <p class=faq2> It was very nice touring Gozo with the two of you. Thanks for giving me time to have a short swim during the tour.    </p>
        <br>
        <p class=faq1> Catherine and John,  UK</p>
        <p class=faq2> What I liked most about this tour, apart the beautiful natural sites,  was the fact that the group was small and so the tour was quite flexible according to our likings. We ended the tour nearly 1 hour later and the guide was still explaining and smiling. Well done!! </p>
        <br>
        </div>
        <div id="2007" style="display: none;">
        <h2> Tourists' Feedback - 2007 </h2>
        <p class=faq1>Dean Gugler and Fleur-Ange Lamothe, Canada</p>
        <p class=faq2> Read their letter on Sunday Times of Malta: [<a href="gfx/Newspaper_cutting.gif">click here</a>] </p>
        <p class=faq1>Capricorn, The netherlands</p>
        <p class=faq2> I really enjoyed this tour, observing all these flowers with detailed explanations from the expert tour leader. Despite a bit long, time flied quickly because there is always something new to see, and if not there are some interesting flower to keep our ears listening. The scenery was spectacular most of the way. Pity we got dull clouds at the end. </p>
        <p class=faq1>Olaf and Niklas, Stockholm</p>
        <p class=faq2>Malta is really nice, and this selected area is probably one of the best on the islands. What made the tour superior from others was the tour leader who knows a little of everything and a lot on wild flowers and geography. He also helped me to take some great photos from his keen knowledge on photography and kept us all motivated with his cheerful and explorative manner. There should be more different tours when I come next year!  </p>
        <p class=faq1>Patricia Johnson, UK</p>
        <p class=faq2> If I was rich I would buy a farm house in Mistra as I really liked the views and landscape+seascape. I did not know that there are so much different flowers on a small island, including one named for my country (England). The up-slope was quite tough, but rewarded by the views and daffodil fragrance.  </p>
        <p class=faq1>Jeremy and Susan, Ireland</p>
        <p class=faq2> This was an enjoyable tour mostly because there was no time pressure. The tour leader gave us enough time to take our photos, have small rests and remove some thistles from our socks. We had to finish at 4:30 but we took till 5:15 due the numerous breaks, mostly because of me and my wife. Despite that, the guide and the rest of the tourists where not angry at us and felt as one big group of friends. The restaurant was great - pity we could not stay more!  </p>
        <p class=faq1> Karl & Anna Struber,  Austria</p>
        <p class=faq2> I was skeptical about this walk, but my wife carried me with her. It turned out to be the best day of our holiday, thanks also to the fine weather. It made me feel young again and not fond to go back to snowy Austria. The guy organising the walk was very involving to make the best for all the group.   </p>
        <br>
        <p class=faq1> Svetlana,  Moscow</p>
        <p class=faq2> While moscow is snow, Malta is full of flowers and warm sun. I got nice red skin from this beautiful walk. Pity I could not understand much English as the guide was full of information to us.   </p>
        <br>
        </div>
                                                        </div> <! End of Content_Area Div >
                                                    </div> <! End of Tabs Div >
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
    <!-- Table 2 Row 3 -->
                                <tr height="15">
                                    <td valign="top">
                                        <table width="100%" cellspacing="0" cellpadding="0">
                                            <tr>
                                                <td width="55" valign="top"><img src="maltanaturetours_files/index_bottom_left2.gif" moduleid="Default (Project)\index_bottom_left2.xws" border="0" /></td>
                                                <td valign="top" class="footer">&nbsp;</td>
                                                <td width="55" valign="top"><img src="maltanaturetours_files/index_bottom_right.gif" moduleid="Default (Project)\index_bottom_right.xws" border="0" /></td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                                <tr>
                                    <td>&nbsp;</td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    <!--- - - Row 3 -->
        <tr>
            <td valign="top">
                <table width="100%" cellspacing="0" cellpadding="0">
                    <tr>
                        <td width="55" valign="top">&nbsp;</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    <script type="text/javascript">
    /*
    function tab(tab) {
      document.getElementById('form').style.display = 'none';
      document.getElementById('2012').style.display = 'none';
      document.getElementById('2011').style.display = 'none';
      document.getElementById('2010').style.display = 'none';
      document.getElementById('2009').style.display = 'none';
      document.getElementById('2008').style.display = 'none';
      document.getElementById('2007').style.display = 'none';
      document.getElementById('news').style.display = 'none';
      document.getElementById('li_tab1').setAttribute("class", "");
      document.getElementById('li_tab2').setAttribute("class", "");
      document.getElementById('li_tab3').setAttribute("class", "");
      document.getElementById('li_tab4').setAttribute("class", "");
      document.getElementById('li_tab5').setAttribute("class", "");
      document.getElementById('li_tab6').setAttribute("class", "");
      document.getElementById('li_tab7').setAttribute("class", "");
      document.getElementById('li_tab8').setAttribute("class", "");
      document.getElementById(tab).style.display = 'block';
      document.getElementById('li_'+tab).setAttribute("class", "active");
    }
    */
    var tabList = document.getElementById("tab-nav"),
        tabs = tabList.getElementsByTagName("li");
    
    for (var i=0, l = tabs.length; i < l; i++){
      tabs[i].onclick = function(e){
        handleTabClick(e, this);
      }
    }
    
    function handleTabClick(e, tab){
      var activeTab = document.getElementsByClassName("active")[0],
          activeContentId = activeTab.childNodes[0].getAttribute("href").replace(/#/, ""),
          activeContent = document.getElementById(activeContentId),
          contentId = tab.childNodes[0].getAttribute("href").replace(/#/, ""),
          contentDiv = document.getElementById(contentId);
    
      activeContent.style.display = "none";
      contentDiv.style.display = "block";
      activeTab.className = '';
      tab.className = 'active';
      e.preventDefault();
    }
    </script>
    
    <!--
    <ul>
      <li id="li_tab1" onclick="tab('form')"><a href="#tp">Feedback Form</a></li>
      <li id="li_tab2" onclick="tab('2012')"><a href="#tp">2012</a></li>
      <li id="li_tab3" onclick="tab('2011')"><a href="#tp">2011</a></li>
      <li id="li_tab4" onclick="tab('2010')"><a href="#tp">2010</a></li>
      <li id="li_tab5" onclick="tab('2009')"><a href="#tp">2009</a></li>
      <li id="li_tab6" onclick="tab('2008')"><a href="#tp">2008</a></li>
      <li id="li_tab7" onclick="tab('2007')"><a href="#tp">2007</a></li>
      <li id="li_tab8" onclick="tab('news')"><a href="#tp"> Newspaper</a></li>
    </ul>
    -->
    
    </body>
    </html>
    Pullo's JavaScript is smashing!

  24. #24
    SitePoint Enthusiast SteveMif's Avatar
    Join Date
    Aug 2013
    Location
    Malta
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I came home right now and will test Pullos and Ronpat's suggested code.

  25. #25
    SitePoint Enthusiast SteveMif's Avatar
    Join Date
    Aug 2013
    Location
    Malta
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Pullo and RonPat.. The tabs are working well except that they have a very srange sprite-like blob on each tab. UFOs? Sorry Ronpat, I may have copied the wrong code or something went wrong while experimenting with code. Your css works fine. So hope you can find a fix for these blobs.


Bookmarks

Posting Permissions

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