|
HTML - Tabs Using Div Problem
Hi
I created two tabs form, my code is just on one page, my goal is to divide my page into two tabs, I created it using ASP web and it works just fine, my problem is when I change it to HTML. when I change everything to HTML and run it on I.E, everything appears on One Page not on two tabs as intended. Here is my code below: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head><link rel="shortcut icon" href="image/save.jpg" type="image/jpg" /><title> Home Page </title><link href="Styles/Site.css" rel="stylesheet" type="text/css" /> <title>EasyTabs Demo</title> <script src="../vendor/jquery-1.7.1.min.js" type="text/javascript"></script> <script src="../vendor/jquery.hashchange.min.js" type="text/javascript"></script> <script src="../lib/jquery.easytabs.min.js" type="text/javascript"></script> <script type="text/javascript" src="thismust.js"></script> </script> </head> <body> <!--<form> --> <div id="tab-container" class='tab-container'> <ul class='etabs' style=""> <li class='tab'><a href="#CDD_page1">Page 1 of 2 Pages</a></li> <li class='tab'><a href="#CDD_page2">Page 2 of 2 Pages</a></li> </ul> <div class='panel-container'> <form name="form" method="post" action=""> <div id="CDD_page1"> <code> <fieldset><legend>DESCRIPTION OF CHANGE</legend> <table> <tr title="Brief Description of Change"><td class="style17"> Description of your Change Request <img src="req.gif" alt="Required" /> &nbs p; &n bsp; </td><!--<span title="Brief Description of Change">--> <td> <input name="BriefDescriptionofChange" type="text" id="MainContent_TextBox1" style="width:168px;" /> </td><!--</span>--></tr> <tr title="Change Reference Number And The Change Type"> <td class="style17"> Change Number <img src="req.gif" alt="Required" /> </td><!--<span title="Change Reference Number And The Change Type">--> <td class="style3"> <input name="ChangeNumberType" type="text" id="MainContent_TextBox3" value="" style="width:95px;" /> <select name="ChangeType" id="MainContent_DropDownList1" onchange="showEntry(this,this.value, 'Flare2')"> <option value="">-Select-</option> <option value="Flare">Flare</option> <option value="SR">SR</option> <option value="PAF">PAF</option> <option value="CR">CR</option> </select></td><!--</span>--></tr> <tr id="Flare" style="display: none;"> <td class="style17"> Hyperlink to Flare <img src="req.gif" alt="Required"/></td><td><input name="HyperlinktoFlare" type="text" id="MainContent_TextBox2" value="" style="width:168px;" /></td> </tr> <tr id="Flare2" style="display: none;"> <!--<span id="Flare2" style="display: none;">--> <td class="style17"> Flare Priority <img src="req.gif" alt="Required"/></td><td> <select name="FlarePriority" id="MainContent_DropDownList2" onchange="changePriority(this.selectedIndex)" style="width:168px;"> <option value="">-Select-</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select></td> <!--</span>--></tr><!--</span>--> <tr title="Dependency"> <td class="style17"> Dependency<img src="req.gif" alt="Required"/></td><td> <input name="Dependency" type="text" id="MainContent_TextBox4" value="" style="width:168px;" /> </td></tr> <tr title="Developer"> <td class="style17"> Developer <img src="req.gif" alt="Required" /> </td><!--<span title="Developer">--> <td> <input name="Developer" class="reqtext" type="text" id="Developer" value= "" style="width:168px;" /> </td><!--</span>--></tr> <tr title="Dependency"> <td class="style17"> Unit Tester <img src="req.gif" alt="Required" /> </td><!--span title="Dependency">--> <td> <input name="UnitTester" class="reqUnit" type="text" id="MainContent_TextBox6" value= "" style="width:168px;" /> </td><!--</span>--></tr> <tr title="Developer"> <td class="style17"> Project Manager <img src="req.gif" alt="Required" /> </td><!--<span title="Developer"> --> <td> <input name="ProjectManager" type="text" id="MainContent_TextBox7" value= "" style="width:168px;" /> </td><!--</span>--></tr> </div> <div id="CDD_page2"> <code> <fieldset><legend>TEST STATUS AND REQUIREMENT</legend> <table class="style6"> <tr title="Is the COMPILED CODE and SOURCE CODE correct?"> <td class="style9"> SIT Test Status <img src="req.gif" alt="Required"/> </td> <td class="style10"> <select name="SITStatus" id="DropDownSIT" onchange="showSITtxtField(this,this.value)" style="width:168px;"> <option value="">-Select-</option> <option value="Not Applicable">Not Applicable</option> <option value="In Progress">In Progress</option> <option value="On Hold">On Hold</option> <option value="Signed Off">Signed Off</option> </select> </td> </tr > <!-- <span id="SITN/A" style="display: none;">--> <tr title="Is the COMPILED CODE and SOURCE CODE correct?" id="SITN/A" style="display: none;"> <td class="style11"> What testing was done? <img src="req.gif" alt="Required"/></td> <td class="style4"> <input name="testingDone" id="Text13" type="text" value= "" style="width:168px;"/></td> </tr> <!-- </span> --> <span id="UAT" style="display: inline;"> <tr title="Is the COMPILED CODE and SOURCE CODE correct?"> <td class="style11"> UAT Test Status <img src="req.gif" alt="Required"/></td> <td class="style4"> <select name="UATTest" id="DropDownUAT" onchange="showUATtxtField(this,this.value)" style="width:168px;"> <option value="">-Select-</option> <option value="Not Applicable">Not Applicable</option> <option value="In Progress">In Progress</option> <option value="On Hold">On Hold</option> <option value="Signed Off">Signed Off</option> </select></td> </tr> </span> <tr > <td><a class="menuitem" href="#CDD_page1">Back</a></td><td><a class="menuitem" href="CDD_page1.aspx">Cancel</a> </td><td><input type="button" value="Submit" onclick="mySubmit();"/></td> </tr> </table> </code> </div> </form> </div> </div> </div> </div> </body> </html> Similar TutorialsHi, i'm trying to design a page with tabs and i got it, but the problem is, i have menu on the top of the tabs and when the drop down menu comes it is been getting overlapped with the tabs. and how do i attache my html file in here. please any one help me. Hi All, I am trying to find out some links where a demo is shown for the navigation between different tabs in HTML using CSS. I am able to find some demos but I dont want to use any image nor I want to use any other Tools like MOO TOOLS. Please share if you have the code for the HTML CSS Tabs or the links where I can find this info. Thanks in Advance, Gagan This might not be html at all, but how do you get the little icon on the page tabs on people's browsers (like the lightbulb on this page) ? Can't find the info anywhere. Thanks. Hi, I am designing a website and i am trying to achieve the following text1 _________text2 ________________text3 only where the ____ are just white spaces is there any way of doing this without resorting to  's? CSS? Thanks Gary Ok here is my dilemma, I have these tabs which are made in javascript and they are used for the user to navigate pages. See the code. However what I want is in one tab area or lets call it tab 1, I want an anchor link that takes us to tab 2 which is in tab 1. So someone could click on a link in page 1 or tab 1 and it will take them to tab 2. To get a better understanding of what I am talking about I have put the code here for you guys to check out: HTML Code: <!-- $Id: example.html,v 1.4 2006/03/27 02:44:36 pat Exp $ -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Simple Tabber Example</title>
<script type="text/javascript" src="../tabber/tabber.js"></script>
<link rel="stylesheet" href="../tabber/example.css" TYPE="text/css" MEDIA="screen">
<link rel="stylesheet" href="../tabber/example-print.css" TYPE="text/css" MEDIA="print">
<script type="text/javascript">
/* Optional: Temporarily hide the "tabber" class so it does not "flash"
on the page as plain HTML. After tabber runs, the class is changed
to "tabberlive" and it will appear. */
document.write('<style type="text/css">.tabber{display:none;}<\/style>');
</script>
<style type="text/css">
<!--
.header { FONT-WEIGHT: bolder; FONT-SIZE: 20px; COLOR: #ff6603; FONT-FAMILY: Arial, Helvetica, sans-serif
}
.smsubheader { FONT-WEIGHT: bolder; FONT-SIZE: 13px; COLOR: #ff6603; FONT-FAMILY: Arial, Helvetica, sans-serif
}
.subheader { FONT-WEIGHT: bolder; FONT-SIZE: 16px; COLOR: #ff6603; LINE-HEIGHT: 22px; FONT-FAMILY: Arial, Helvetica, sans-serif
}
.style48 {FONT-WEIGHT: bolder; FONT-SIZE: 20px; COLOR: #FF9933; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; }
.style50 {font-family: Verdana, Arial, Helvetica, sans-serif}
.style54 {
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
}
.style56 {color: #000000}
.style58 {color: #333333}
.style65 {FONT-SIZE: 20px; COLOR: #666666; FONT-FAMILY: Arial, Helvetica, sans-serif; font-weight: bold;}
.style69 {FONT-WEIGHT: bolder; FONT-SIZE: 13px; COLOR: #FF9933; FONT-FAMILY: Arial, Helvetica, sans-serif; }
.style70 {color: #FF9933}
.style71 {
COLOR: #FF9933;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight: bold;
}
.style73 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; }
.style74 {color: #333333; font-family: Verdana, Arial, Helvetica, sans-serif; }
.style75 {FONT-FAMILY: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 20px;}
.style76 {font-size: 14px}
.style77 {
color: #666666;
font-size: 18px;
}
.style80 {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
font-size: 11px;
}
-->
</style>
</head>
<body>
<h1>Tabber Example</h1>
<p>← <a href="http://www.barelyfitz.com/projects/tabber/">Tabber Home</a></p>
<div class="tabber">
<div class="tabbertab">
<h2>Tab 1</h2>
<p><a href="#lala">make me</a></p>
</div>
<div class="tabbertab">
<h2>Tab 2</h2>
<p>Tab 2 content.</p>
</div>
<div class="tabbertab"> <a name="lala"></a>
<h2>Tab 3</h2>
<p>Tab 3 content.</p>
</div>
</div>
</body>
</html>
Is there anyway to make a tab system like that and have links within tab one which take you to areas in tab 2? thanks. Hi There all, I have been looking around for tabs on the search engines. unfortunately all I can find is tabs with tabs . Below is 3 examples that I made with photoshop to give you an idea of what I am looking for. A tab type format without the tabs. The selector looks like a normal text type link line on top and on bottom but when the selected text is clicked it displays the content of the selected below/above (within the div box I think) it. I know that possibly <div>'s are involved but I have been struggling to figure out how to do this without the tabs that I see on the internet, and failed to design it so it looks like the images below. Can someone help me figure this out? Can this be done with just css or do I also need javascript as well?. As always, Thank you in Advance hello, I have a tabbed interface and I have four tabs. I only want one tab to show onload and then when the user clicks on a button, I want the other three tabs to show. Here's my code. I tried many things but it doesn't display right. HTML Code: <ul class="tabs">
<li><a href="#" title="content_1" class="tab">General</a></li>
<li><a href="#" title="content_2" class="tab">Functional</a></li>
<li><a href="#" title="content_3" class="tab">SLA</a></li>
<li><a href="#" title="content_4" class="tab">Pricing</a> </li>
</ul>
HTML Code: <a href="#" class="button"> <span>Click Here</span> </a> So, Im looking for some code that acts like dhtml tabs. I have a webpage that I want to add a column on the right that has like 5 tabs. Clicking on each tab you get different content without leaving the actual page. Like this I suppose: http://www.cnn.com/ In the "Watch Video" section. You can tab between Most Popular and Best Video. thats the idea. Any good solutions. The current solution I have works, but is sloppy. Im hoping for some better code. Any help would be appreciated. Thanks, Mac My site uses several "tabs" on some pages to help the reader find information of interest. Tabs are working just fine, except for the behavior described below. They are HTML based - essentially anchors using the # sign, using CSS to be pretty and located properly, and are defined like this: <ul> <li><a href="#tab-1">Specs</a></li> <li><a href="#tab-2">Features</a></li> <li><a href="#tab-3">Documents</a></li> etc etc </ul> I have 7 tabs PROBLEM: In some cases, additional code includes an href to another tab on the SAME page, but clicking the link fails to refresh the page and show the new tab. Example: Assume current URL page is: "www.mydomain.com/product.php#tab-5" On this same page, within tab-5, I want to include a link that simply points at tab-6. So my URL link would simply be: ...<a href = "www.mydomain.com/product.php#tab-6">Jump to the next tab</a>... Note the only change in the URL is the '#tab-6' portion. Upon clicking this link: 1) The Browser URL address DOES change to 'www.mydomain.com/product.php#tab-6' 2) The page itself DOES NOT refresh - it stays on the #tab-5 page. Wierd, huh? 3) If I then click on the browser refresh button, the page refreshes properly and it will display tab 6 If the link were to point at a different page - say "www.mydomain.com/services.php#tab-6" - it would work just fine. It only fails to refresh when I am linking to the same, current URL, but different tab. A web developer I know thought he could build a "custom handler" (in Javascript, maybe?) that would solve this; it just seems to me it should work as is. I'm open to any suggestions. My initial thought is that I need the href AND a way to force a refresh in the same step, but maybe there is something more elegant or appropriate out there. Befuddled in CA, tc All, I hope I'm in the right forum. I had already downloaded some very simple example of creating web page tabs some time ago, and now CANNOT find it anywhere for the life of me. I don't remember exactly what code language it was, and I don't think it was java. Not even vbscribt /asp. No controls either. I think it was HTML (if possible), but basically it showed Tab1, Tab2, Tab3, with data that said "this is the first tab", "this is the second", etc... I really need to use this example now, but have lost the original, and no example on the internet quite matches it. Can someone provide a very simple method for creating tabs, or relevant link? Thank you so much! Regards, asp_jr Reference Link: {website taken off for personal reasons} If you visit the link I posted, what I want to happen, is when you click on the tabs Home, Giving Programs, Leave A Legacy or Make a Gift, I want the content of them to appear in the green box that is below the tabs. When you click on the tabs to the right - Events, Home, Home, I want their content to appear in the box that is below those tabs. I have that much figured out - but my question is - when you click on the links on the left, or on the right, the information in the opposite box (from the previous link that was clicked) goes away. Is there anyway to keep the information up in both boxes at all times? Example: If you click on Make a Gift - Tab content 4 here Tab content 4 here shows up in the green box below the tabs. BUT... when you click on Events to the right - TOOOOOOOOOOLS shows up - but 'Tab content 4 here' goes away. PROBLEM - I want 'Tab content 4 here' to stay up. Thanks so much in advance!! Hello I am creating a table of contents using the <p> tag for each title. Each title is clickable and takes you to a section of the website relative to the title clicked. My problem is that I want everything to line up nicely and this is problematic using the <p> tag - for example: ARTICLE 1 - BLAH BLAH BLAH BLAH ARTICLE 10 - BLAH BLAH BLAH BLAH I want to look like this. (Actually scratch that this forum suffers the same problem I get when trying it on my own site, but you can comprehend what I'm talking about =] ). I realize there are cheap fixes such as just adding a bunch of spaces and what not but it still doesn't work. I could explain why but just trust me it doesn't work. My idea was to just use a table with 2 columns: 1 column = ARTICLE # - 2 column = BLAH BLAH BLAH however I can't extend a clickable title across 2 columns. Also I should note that I'm using DRUPAL. Thanks for your time. Is there a browser safe way to have tabs on a page with different content on each tab, but not refresh to another page? If there is, is it compatible with search spiders? If not a tab, what about a way to collapse the text down to a bullet, and then expand when they click the bullet again? I'm trying to condense alot of text/data into a page, but I don't want to inundate the user with too much stuff all at once. I also want the data inside to be readable by google, etal. I have some buttons that open new pages in new windows. How do I tell or force the browser to open them in new tabs, instead of in new windows or the same window? My page loads correctly, but when I open a new tab in IE7 so the tab bar appears, my page shifts to the left, and the menu overlaps/ obscures parts of the images. I can't find a reason why this happens, can anyone help? A screenshot of the error can be found below: http://www.onetopsoccer.com/error.jpg The page itself is at http://www.onetopsoccer.com/index.shtml Hello everyone. I am building a website and am on my final stage of building the "tabs" at the top of the page and the html is driving me nuts I will attach the source code below. The tabs that are currently present (the ones included in the free template) are the following: Home About Templates Flash Contact The ones that I need are Home About Us Pics Multimedia Drag Racing Tech Articles For Sale Contact Us Can anyone steer me in the right direction? I don't want to manually have to make these tabs and risk having the letters not line up. Oh, and I am using Frontpage to build the site I would like to have an image that takes 2 url like the following image... is it possible? if so, can someone please tell me how this could be done? Thank you very much.. NOTE: I tried doing this... <map name= 'url1' > <area shape= 'poly' coords= ' 0 , 0 , 50 , 0 , 0 , 50 ' href= 'url1.html' > </map> <a href= 'url2.html' > <img src= 'img.jpg' width= 50 height= 50 usemap= '#url1' > </a> but this only get 'url1' woring... Okay, I know that this problem is going to be really really easy, but I forgot how to do it. I use to own an older website and forgot the code. Anyways, I only know how to describe it. When I minimize the screen, it is minimizing the whole thing and collapsing it making the iframes smaller and the text fit into a smaller space. Most websites have a code (i don't know what it is) so that when someone minimizes their browser, it just makes the browser smaller and not the actual page. Here's what it looks like: http://www.freewebs.com/noeylani94/index.htm Try minimizing that and see how it looks. It collapses the whole page right? Can someone tell me the code how to fix it? Thanks =D My daughter is building a website for some kind of school competition and is having a problem with how a table is displaying in IE 9. It displays properly in Chrome and FF though so I'm not sure what the problem is. Keep in mind, she's just a junior in HS and used, by all accounts, some antiquated methods in constructing the page. That said, I'm hoping someone could offer some insight into the issue. The table should be centered and the same the width of the banner and menu. For Chrome and FF, the table is centered on the page when the viewing resolution allows all the content to fit without the need for a scroll bar. On the pages where a scroll bar is needed, the table is shifted to the left to accommodate the scroll bar and thus becomes off-centered. I was thinking that an i-frame could take care of this since the scroll bar would then be located on the inside of the i-frame. In Chrome and FF, maybe it would. However, in IE, the table is displaced to the left on all pages. Interestingly enough, the displacement is the same with and without a scroll bar. Sooooo, I would humbly ask those with knowledge of such things to offer advice or a solution to this problem. Much appreciation is extended in advance. Here is the link to the site: http://www.newtonyouth.zxq.net everything to the same site as my previous one (http://brett.unixpod.com) looks fine in IE but in firefox and safari (the only other 2 browsers i have) its missing the main table background and the main table background-color. what could be rong??? |
|||||||