SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 50 of 50
  1. #26
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,469
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    My error. The ul MUST be defined like this code shows. It CANNOT be defined as "list-style-type:none"

    Code:
    #Tabs ul {
        list-style: none;
    I will give you a detailed explanation if you wish.

  2. #27
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,469
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    In this snippit, the CSS specifies !important so the :hover underline will be turned off in the active tab.
    Code:
    #Tabs li.active a {
        color:#000;
        text-decoration:none !important;
        background-color:#fff090;
        border-bottom:2px solid transparent;
        cursor:default;
    }
    I do not see it in your code.

    If you wish to turn off the underline in the active tab, you can add !important as shown above OR make the selector more specific by adding "ul" as shown below:
    Code:
    #Tabs ul li.active a {
    Both accomplish the same thing. This second choice is probably better because it affects all of the properties.

  3. #28
    SitePoint Enthusiast SteveMif's Avatar
    Join Date
    Aug 2013
    Location
    Malta
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I did not have the faintest idea that the red-marked (in dreamweaver) !important twas part of the code (lloked as comment). Now I have placed it back. I am too tired to think on coding, but tomorrow I want to understand the code since I would use these tabs routine in other webpages. Hope you are in the mood to explain the css part. It is working real beautiful and I may add some fading yellow backgrounds to the tab (for experiment). Thank you so much guys - very important work for me.

  4. #29
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,469
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    The JavaScript by Pullo was instrumental in pulling everything together. I'm glad that we finally got the CSS working as desired. Yes, we can talk about the CSS whenever you wish. I'm not very knowledgable about transitions, so perhaps someone else will jump in. It might be wise to start a new thread about the new topic.

    Best wishes

  5. #30
    SitePoint Enthusiast SteveMif's Avatar
    Join Date
    Aug 2013
    Location
    Malta
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Pullo: thanks so much for your time in coding this. You are eidently talented in java-script. It seems that it is inevitable that I need to put hands on this code, so I ask yo uwaht book or (web?) you suggest to read so I can learn the basics. This forum will be helpful in more specific advanced things.

    Thanks

  6. #31
    SitePoint Enthusiast SteveMif's Avatar
    Join Date
    Aug 2013
    Location
    Malta
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    What controls what (css)

    Ronpat: Can we go over the css and explain me what each css segment controls what. Some are obvious, such as the content area, but others I need an extra guide from the expert (you!)

    1) Can you comment the below to explain what each controls?

    #Tabs ul { }

    #Tabs ul li { }

    #Tabs ul li a { }

    #Tabs ul li a:hover { }

    #Tabs ul li a:active { }

    #Tabs li.active a { }

    #Tabs #Content_Area { }


    2) Why we put # (for js handling ?)
    3) What is governed by ul and by li (ul: the whole set of tabs, li: each specific tab ?)
    4) This might be a basic question but when in the css code there is this situation:

    #Tabs ul li a:active { }
    #Tabs li.active a { }

    Does the first line sets the attributes to ul and li active link, and the one below sets additional attributes to li active link only, kind of instead 1=xxxx + 2=xxxxy you coded 1 = 2 = xxxx, 2=2+y (1=ul, 2=li).

    Take your time and a big thank you.

    xxx God send this forum xxx
    Last edited by SteveMif; Aug 27, 2013 at 00:16. Reason: grammar correcton

  7. #32
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,901
    Mentioned
    212 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by ronpat View Post
    Pullo's JavaScript is smashing!
    Thanks Ron!

    As this seems to be the accepted solution now, I reworked my JS as promised.

    One important thing I did was to pull the style="display:none" declarations from the individual tabs into a class.

    In the code below, I also removed all of the tab content, so you can get a better idea of what's going on.

    Hope this helps. Just let me know if you have any questions:

    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) -->
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Malta tabs</title>
        <style>
          .content{ display: none; }
    
          #Tabs ul li.active a{
            background:red;
          }
          
          #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;
            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;
          }
          
          #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 {
            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>
      </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="220" valign="top" class="leftcolumn">
                </td>
                <td valign="top" class="rightcolumn">  
                  <table width="92%" align="center" cellpadding="0" cellspacing="0" >
                    <tr>
                      <td valign="top">&nbsp;</td>
                    </tr>
                    <tr>
                      <td class="rightcolumn">
                        <table width="100%" cellspacing="0" cellpadding="0" >
                          <tr>
                            <td width="756" valign="top">
                              <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" class="content">Form</div>
                                  <div id="2012" class="content">2012</div>
                                  <div id="2011" class="content">2011</div>
                                  <div id="2010" class="content">2010</div>
                                  <div id="2009" class="content">2009</div>
                                  <div id="2008" class="content">2008</div>
                                  <div id="2007" class="content">2007</div>
                                  <div id="news" class="content">News</div>
                                </div>
                              </div>    
                            </td>
                          </tr>
                        </table>
                      </td>  
                    </tr>
                  </table>
                </td>
              </table>
            </td>
          </tr>
        </table>
                
        <script type="text/javascript">
          var tabs = function(){
            var tabList = $I("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 $I(id){
              return document.getElementById(id);
            }
            
            function getId(el){
              return el.getAttribute("href").replace(/#/, "")
            }
            
            function handleTabClick(e, tab){
              var activeTab = document.querySelector(".active"),
                  activeContent = $I(getId(activeTab.childNodes[0])),
                  newActiveContent = $I(getId(tab.childNodes[0]));
              
              activeContent.style.display = 'none';
              activeTab.className = '';
              newActiveContent.style.display = 'block';
              tab.className = 'active';
               
              e.preventDefault();
            }
            
            document.querySelector(".active").click();
          }();
        </script>
      </body>
    </html>
    @SteveMif - don't take this the wrong way, but do you realise that your markup is totally shot? I'm not talking about using tables over divs or whatever, rather that you have stray tags in your markup all over the place.

  8. #33
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,901
    Mentioned
    212 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by SteveMif View Post
    Pullo: thanks so much for your time in coding this. I ask you what book or (web?) you suggest to read so I can learn the basics.
    Hi Steve,

    No problem.
    Although I haven't read it, this is supposed to be quite good: http://www.sitepoint.com/books/jsjavascript1/
    As is this: http://eloquentjavascript.net/

    Also, there is quite a helpful thread on this topic in the JS forum: http://www.sitepoint.com/forums/show...ipt-Books-Help

    Just let me know if you have any questions.

  9. #34
    SitePoint Enthusiast SteveMif's Avatar
    Join Date
    Aug 2013
    Location
    Malta
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again. No more questions from me, have a rest my friend :-)

    I know that the nested tables are crap, that's why I am not going to submit this website to a coding competition :-) It is based on static information for about 2k visitors per page per year, so it is pointless to dedicate more energy on it. html was taken from a template and I've modified it. The update I am currently doing is just enough. I'm trying to code new pages with css instead tables, but things can get complex and I just revert to the old tables that I am familiar with: I am mentally fighting it to use css as much as possible.

  10. #35
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,469
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Steve, for the second time, tableware is "old fashioned" but very stable. The problem that Pullo mention is the same one that I mentioned earler when I suggested giving the page a run through the validator. It has NOTHING to do with tables, nested or otherwise. It has EVERYTHING to do with missing or improperly placed tags, misspelled properties that aren't working, etc. The use of tables for framing the page will not win awards nowadays, but they still work just fine when coded correctly.

    Your challenge is to learn to write correct code. Upgrading the page so it does not contain tables will not accomplish anything if you do not learn about proper tag matching and attributes, including CSS properties.

    No one here is complaining about the nested tables. We are interested in fixing the poorly matched HTML tags, misspelled attributes, and so on... basic stuff.

    Believe it or not, some of us wrote HTML tableware, too.

    I will address your CSS question list later tonight (my time).

    Cheers, Steve.

  11. #36
    SitePoint Enthusiast SteveMif's Avatar
    Join Date
    Aug 2013
    Location
    Malta
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks RonPat, you are really a great person for this first class help. I have now ran validation tool in Dreamweaver and fixed most of the stuff. I was surprised that tr does no have the height attribute, it is given as an option in Dreamweaver when typing code on the fly, but I just read and confirmed that it is not accepted attribute. If you like run a validation check on your side to see if there are other critical issues except "tables will not accomplish anything."

  12. #37
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,469
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Steve,

    We need to make some changes on the comments.php page. Let us start with this one. There will be more.

    Please insert "ul" in the selector as shown in blue:

    (line 71)
    Code:
    #Tabs ul li.active a {
        color:#000;
        text-decoration:none;
        background-color:#fff090;
        border-bottom:2px solid transparent;
        cursor:default;
    }

    Next:

    Lines 407 through 447 start with
    <div id="2012" style="display: none;">

    They are a duplicate of lines 448 through 489 which also starts with
    <div id="2012" style="display: none;">

    Please delete either group of lines.


    After this is finished, we will do more.

  13. #38
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,901
    Mentioned
    212 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by ronpat View Post
    Lines 407 through 447 start with
    <div id="2012" style="display: none;">

    They are a duplicate of lines 448 through 489 which also starts with
    <div id="2012" style="display: none;">

    Please delete either group of lines.
    Ideally, you should also remove the inline CSS and use my updated HTML and JS (as per post 32)

  14. #39
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,469
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Pullo View Post
    Ideally, you should also remove the inline CSS and use my updated HTML and JS (as per post 32)
    @Pullo 's reminder is a timely lead-in to our next ToDo item.

    While you are deleting the unnecessary inline style="display:none", you can also repair the invalid ID names.

    ID names cannot begin with a number. id="2012" is invalid. I recommend changing these IDs by adding a letter such as "y" in front of the year, like this id="y2012". ("y" is the first letter in the word "year"; you could choose a different letter, of course )

    These invalid IDs are found between lines 374 and 632 (assuming the duplicate code mentioned in post #37 has been deleted).

    The anchors that call these IDs must also be changed. They are located in lines 274 through 280.
    For example, change <a href="#2012"> to <a href="#y2012">.

    After making these changes, the relevent HTML in Pullo's post will look like this:
    Code:
                            <div id="Tabs">
                              <ul id="tab-nav">
                                <li class="active"><a href="#form">Feedback Form</a></li>
                                <li><a href="#y2012">2012</a></li>
                                <li><a href="#y2011">2011</a></li>
                                <li><a href="#y2010">2010</a></li>
                                <li><a href="#y2009">2009</a></li>
                                <li><a href="#y2008">2008</a></li>
                                <li><a href="#y2007">2007</a></li>
                                <li><a href="#news">Newspaper</a></li>
                              </ul>
                              <div id="Content_Area">
                                <div id="form" class="content">Form</div>
                                <div id="y2012" class="content">2012</div>
                                <div id="y2011" class="content">2011</div>
                                <div id="y2010" class="content">2010</div>
                                <div id="y2009" class="content">2009</div>
                                <div id="y2008" class="content">2008</div>
                                <div id="y2007" class="content">2007</div>
                                <div id="news" class="content">News</div>
                              </div>
    The only item that you should take from Pullo's CSS is the new class on the top line,
    Code:
    .content {display:none;}

  15. #40
    SitePoint Enthusiast SteveMif's Avatar
    Join Date
    Aug 2013
    Location
    Malta
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have bad news that it is not working.


    Code CSS:
    <style>
     
    .content{ display: none; }
     
    #Tabs ul {
        list-style: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 ul li.active a {
        color:#000;
        text-decoration:none !important;
        background-color:#fff090;
        border-bottom:2px solid transparent;
        cursor:default;
    }
     
    #Tabs #Content_Area {
        padding: 15px;
    	 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>

    Code HTML4Strict:
    		 <div id="Tabs">
                                <ul id="tab-nav">
     
                                  <li class="active"><a href="#form">Feedback Form</a></li>
    										<li><a href="#yr2013">2013</a></li>
                                  <li><a href="#yr2012">2012</a></li>
                                  <li><a href="#yr2011">2011</a></li>
                                  <li><a href="#yr2010">2010</a></li>
                                  <li><a href="#yr2009">2009</a></li>
                                  <li><a href="#yr2008">2008</a></li>
                                  <li><a href="#yr2007">2007</a></li>
                                  <li><a href="#news">Newspaper</a></li>
                                </ul>
     
                                <div id="Content_Area">
                                  <div id="form" class="content">Form</div>
    			      <div id="yr2013" class="content">2013</div>
                                  <div id="yr2012" class="content">2012</div>
                                  <div id="yr2011" class="content">2011</div>
                                  <div id="yr2010" class="content">2010</div>
                                  <div id="yr2009" class="content">2009</div>
                                  <div id="yr2008" class="content">2008</div>
                                  <div id="yr2007" class="content">2007</div>
                                  <div id="news" class="content">News</div>
                              </div>
                     </div>


    Code HTML4Strict:
    <div id="yr2013" >
    		<h2> Selected Tourists' Feedback - 2013 </h2>
    		More text ....
    </div>
     
    <div id="yr2012" >
    		<h2> Selected Tourists' Feedback - 2012 </h2>
                    More text.....
    </div>





    Code JavaScript:
    <script type="text/javascript">
          var tabs = function(){
            var tabList = $I("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 $I(id){
              return document.getElementById(id);
            }
     
            function getId(el){
              return el.getAttribute("href").replace(/#/, "")
            }
     
            function handleTabClick(e, tab){
              var activeTab = document.querySelector(".active"),
                  activeContent = $I(getId(activeTab.childNodes[0])),
                  newActiveContent = $I(getId(tab.childNodes[0]));
     
              activeContent.style.display = 'none';
              activeTab.className = '';
              newActiveContent.style.display = 'block';
              tab.className = 'active';
     
              e.preventDefault();
            }
     
            document.querySelector(".active").click();
          }();
        </script>


    Might be another creepy typo, but I think the last working version was that with the <div id="2012" style="display: none;"> type of hiding content code. The working version was still without the upper block of code with a list of <div id="yr2013" class="content">2013</div>.

    CSS looks fine, so maybe is Pullo's turn
    I have the faulty webpage online to see the effects
    Maltanaturetours.com/comments.php

  16. #41
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,901
    Mentioned
    212 Post(s)
    Tagged
    12 Thread(s)
    CSS looks fine, so maybe is Pullo's turn
    I have the faulty webpage online to see the effects
    The page you link to works fine for me.
    Did you post the wrong link?

    I'm off to bed now. I'll pick this up in the morning.

  17. #42
    SitePoint Enthusiast SteveMif's Avatar
    Join Date
    Aug 2013
    Location
    Malta
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    MNT_notworking.jpg

    This is what I have, with all the content (all years) below the content tab (yellow) box

    ?!
    I tried the remote page on chrome, Firefox and IE8 and all the same

  18. #43
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,469
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by SteveMif View Post
    I have bad news that it is not working.
    It is a simple misunderstanding about what should have been copied and pasted on the page. Give me a few minutes to see if I can explain it without us having to revert to the previous working code.

    I'll be back shortly.

  19. #44
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,469
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    On the comments.php page, delete lines 290 through 303:

    Code:
                                  <div id="form" class="content">Form</div>
                                  <div id="yr2013" class="content">2013</div>
                                  <div id="yr2012" class="content">2012</div>
                                  <div id="yr2011" class="content">2011</div>
                                  <div id="yr2010" class="content">2010</div>
                                  <div id="yr2009" class="content">2009</div>
                                  <div id="yr2008" class="content">2008</div>
                                  <div id="yr2007" class="content">2007</div>
                                  <div id="news" class="content">News</div>
                                </div>
                              </div>
    If doing this does not fix the problem, then lets return to the last working code and go from there.

  20. #45
    SitePoint Enthusiast SteveMif's Avatar
    Join Date
    Aug 2013
    Location
    Malta
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I reverted to last working version and replaced 2012, 2011.... with yr2012, yr2011...

    [EDIT : Up to post #37 is fine.... when I removed the inline and added the .content - first line of the script, I got problems...]
    [ EDIT 2: Yeah, when I removed the style="display: none;" (and included the .content at first line of the script), I had all content showing in every tab selection]

  21. #46
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,469
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    You did a nice job of setting up comments.php for us to troubleshoot

    I copied the current page, http://maltanaturetours.com/comments.php, and made the following changes and they worked for me.

    comments.php

    Please replace the JavaScript at the bottom of the page with Pullo's new JavaScript.
    Code:
    var tabs = function(){
      var tabList = $I("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 $I(id){
        return document.getElementById(id);
      }
    
      function getId(el){
        return el.getAttribute("href").replace(/#/, "")
      }
    
      function handleTabClick(e, tab){
        var activeTab = document.querySelector(".active"),
            activeContent = $I(getId(activeTab.childNodes[0])),
            newActiveContent = $I(getId(tab.childNodes[0]));
    
        activeContent.style.display = 'none';
        activeTab.className = '';
        newActiveContent.style.display = 'block';
        tab.className = 'active';
    
        e.preventDefault();
      }
    
      document.querySelector(".active").click();
    }();
    (Note: Be aware that line 590 is missing "yr" in the ID. The following changes fix it.)

    Then change the following lines to read exactly as follows:
    Code:
    (line 368)
    <div id="news" class="content" align="center">
    
    (line 377)
    <div id="yr2013" class="content">
    
    (line 409)
    <div id="yr2012" class="content">
    
    (line 449)
    <div id="yr2011" class="content">
    
    (line 496)
    <div id="yr2010" class="content">
    
    (line 553)
    <div id="yr2009" class="content">
    
    (line 590)
    <div id="yr2008" class="content">
    
    (line 622)
    <div id="yr2007" class="content">
    Let us know if this works.

  22. #47
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,901
    Mentioned
    212 Post(s)
    Tagged
    12 Thread(s)
    I'm not going to meddle too much more in this thread, as too many cooks and all that ...

    However, here: http://maltanaturetours.com/comments.php

    the 2008 tab is not working - you forgot the "yr" prefix.

    <div id="2008" style="display: none;">

  23. #48
    SitePoint Enthusiast SteveMif's Avatar
    Join Date
    Aug 2013
    Location
    Malta
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for everything, it is working fine. The missing yr in the 2008 was a symptom leak of tiredness yesterday. Maybe you have time to reply post #31. Thanks.

  24. #49
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,469
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by SteveMif View Post
    1) Can you comment the below to explain what each controls?

    #Tabs ul { }
    Code:
    #Tabs ul {
        list-style:none;        /* Lists, "ul" and "ol", have default styles; this shorthand overrides default and inherited styles such as the bullets that were being applied in an ancestoral container. */
        overflow:hidden;        /* {overflow:hidden} is required because the list items are floated.  Other methods are available. */
        padding:16px 0 0 24px;  /* List boxes have default padding-left for bullets.  This changes the padding values. */
        margin:0;               /* Like paragraphs, lists have default top and bottom margins.  This sets them to zero. */
    }
    Quote Originally Posted by SteveMif View Post
    #Tabs ul li { }
    Code:
    #Tabs ul li {               /* The "li" tag assigns the same styles to all list item boxes below this ul; add classnames or IDs to target individual list items.  Other targeting methods are available.  */
        float:left;             /* float:left causes the list item boxes to align to the left and "shrink-wrap" around their contents */
    }
    Quote Originally Posted by SteveMif View Post
    #Tabs ul li a { }
    Code:
    #Tabs ul li a {             /* The "a" tag targets all anchors below this list item.  Default properties for all anchors should be set here. */
        display:block;          /* display:block expands the anchor to the width of the li */
        line-height:24px;       /* line-height sets the height of the tab via the anchor.  This method may be undesirable if text wraps. */
        background:#e0d040;     /* The background color of anchors */
        border:2px solid #ccc;    /* A border around anchors */
        border-radius:6px 6px 0 0;   /* The border-radius of anchors */
        color:#000;             /* Default text color for all anchors */
        font-weight:bold;       /* Sets the font-weight to bold for all anchors */
        text-decoration:none;   /* Removes the HTML default underline from all anchors */
        padding:1px 10px;       /* Applies padding to all anchors thereby affecting the width of the tabs */
    }
    Quote Originally Posted by SteveMif View Post
    #Tabs ul li a:hover { }
    Code:
    #Tabs ul li a:hover {       /* Only contains the properties that should change on :hover */
        background-color:#fff090;   /* Changes the background-color on :hover */
        font-style:normal;      /* Overrides a font-style setting somewhere earlier in the CSS */
        text-decoration:underline;  /* Applies an underline to the anchor on :hover */
    }
    Quote Originally Posted by SteveMif View Post
    #Tabs ul li a:active { }
    Code:
    #Tabs ul li a:active {      /* Only contains the properties that should change on :active */
        color:#000;             /* Sets the font-color to black (should not be necessary because font color is set in the anchor and never changed) */
        background-color:#fff;  /* Changes the background-color on :active */
    }
    Quote Originally Posted by SteveMif View Post
    #Tabs li.active a { }
    Code:
    #Tabs ul li.active a {      /* Styles the anchor when the list item has the class of .active .  These styles override the :hover and :active pseudoclasses */
        color:#000;             /* Sets the font-color to black when the list item has class .active (should not be necessary because font color is set in the anchor and never changed) */
        text-decoration:none;     /* Removes the underline from the anchor when the list item has class .active */
        background-color:#fff090;  /* Sets the background-color when the list item has class .active */
        border-bottom:2px solid transparent;  /* Allows the background-color to fill the border-bottom area of the anchor and give the illusion of being one with #Content_Area. */
        cursor:default;         /* Stops the cursor from turning into a pointer when the list item has class .active */
    }
    Quote Originally Posted by SteveMif View Post
    #Tabs #Content_Area { }
    Code:
    #Tabs #Content_Area {       /* These styles define the box, #Content_Area */
        line-height:19px;       /* line-height will be inherited by paragraphs */
        width:700px;            /* Assigns a fixed width to #Content_Area */
        height:600px;           /* Assigns a fixed height to #Content_Area.  Used in conjunction with overflow:auto to allow long content.  An uncommon technique. */
        overflow:auto;          /* Generates scroll bars if the content exceeds the height or width of #Content_Area. */
        border:2px solid #ccc;  /* Styles a border around #Content_Area. */
        background-color:#fff090;  /* Styles a background-color for #Content_Area. */
        margin:-2px 24px 24px;  /* this {margin-top:-2px} raises #Content_Area under #Tabs so borders overlap */
    }
    Quote Originally Posted by SteveMif View Post
    2) Why we put # (for js handling ?)
    Code:
    The "#" in front of #Tabs and #Control_Area identifies them as IDs.
    
    However, because an ID can be used only ONCE on a page, they are often used by JavaScript to target specific objects.  For example, JavaScript targets the individual content blocks by way of their ID.  Also, an ID is used as a fragment identifier.
    Quote Originally Posted by SteveMif View Post
    3) What is governed by ul and by li (ul: the whole set of tabs, li: each specific tab ?)
    Code:
    Please see the comments above beside #Tabs ul  and  #Tabs ul li .
    Used alone, ul and li target all list and list item boxes respectively.  To target specific list items, add a classname or ID to the list item or use another targeting technique.
    Quote Originally Posted by SteveMif View Post
    4) This might be a basic question but when in the css code there is this situation:
    #Tabs ul li a:active { }
    #Tabs li.active a { }
    Code:
    #Tabs ul li a:active { }
    This selector styles the :active state of all anchors in these list items and anchors in any children of these list items.
    
    #Tabs ul li.active a { }  (Please note that I added "ul" within this selector to add weight to specificity.)
    This selector styles all anchors in the list item that has a class of "active" and all anchors in any children of this list item.  This overrides previous "#Tabs ul li a" styles.

    1. I am not a quotable authority on HTML or CSS specifications. Please refer to an authoritative source.
    2. My comments in the code boxes are probably easier to read if copied to a text file and displayed with a mono-spaced font so they can wrap.

  25. #50
    SitePoint Enthusiast SteveMif's Avatar
    Join Date
    Aug 2013
    Location
    Malta
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh! This is lovely - the post even became a tutorial. Thanks very much mate, it was very very helpful. I can see the thought behind the script and what controls what!


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
  •