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.
Nice work, Pullo. I hope SteveMif will give this a go!
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”:
#Tabs #Content_Area { [color=red]// this is the css class for the content displayed in each tab[/color]
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.
<!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"> </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"> </td>
</tr>
<!-- Table 2 Row 2 -->
<tr>
<td class="rightcolumn">
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="4" class="leftcolumn"> </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? * <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">
<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"> </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> </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"> </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!
I came home right now and will test Pullos and Ronpat’s suggested code.
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.
My error. The ul MUST be defined like this code shows. It CANNOT be defined as “list-style-type:none”
#Tabs ul {
list-style: none;
I will give you a detailed explanation if you wish.
In this snippit, the CSS specifies !important so the :hover underline will be turned off in the active tab.
#Tabs li.active a {
color:#000;
text-decoration:none [color=blue]!important[/color];
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:
#Tabs [color=blue]ul[/color] li.active a {
Both accomplish the same thing. This second choice is probably better because it affects all of the properties.
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.
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
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
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!)
- 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 { }
- Why we put # (for js handling ?)
- What is governed by ul and by li (ul: the whole set of tabs, li: each specific tab ?)
- 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
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:
<!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"> </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.
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/showthread.php?660198-JavaScript-Books-Help
Just let me know if you have any questions.
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.
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.
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.”
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)
#Tabs [color=blue]ul[/color] 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.
Ideally, you should also remove the inline CSS and use my updated HTML and JS (as per post 32)
@James_Hibbard’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:
<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,
.content {display:none;}
I have bad news that it is not working.
<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>
<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>
<div id="yr2013" >
<h2> Selected Tourists' Feedback - 2013 </h2>
More text ....
</div>
<div id="yr2012" >
<h2> Selected Tourists' Feedback - 2012 </h2>
More text.....
</div>
<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