|
HTML - Odd Request Help For Tabs
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 Similar TutorialsThis 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 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> 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, 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. 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 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> 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. 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 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!! 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? 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. 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 I need just a small text box and a submit button, when the text is written in the box, and submit pressed, it would change a code value. For example, if my code is: <input type="hidden" name="return_url_target" value="1"> I type in the text box 3, and press submit, then code is: <input type="hidden" name="return_url_target" value="3"> Lastly, it would need to be pre defined values (but not visibly), so for example, it would change target code value to 3, but not 4 even if you tried. If it is not too much trouble, i would love to have a version without a pre defined value, and one with a visible pre determined values (for example, shows all possible values when clicked, if you can just tell me the code, i can change it myself). Is this doable? This is the only thing that I need for my website, and I dont want to spend hours to learn a language, that I'm only going to use once. I would be truly grateful if someone would help me just a bit So Ive been working on an HTML website and everything is going the way I want, except one thing. Everytime my pages load, a message pops up as shown in my attachment in this post. If anyone could help me get rid of this pop up message, I'd appreciate it a lot. I figure it has something to do with my HTML code. Do let me know if you need any other information to help me out thanks Dear group: My html skills are, according to the programmers on USENET, "circa 1987." And I'm sure this is true; I'm self-taught and have not learned CSS yet. Yet my pages seem to work, and I'm making an okay income. However, on some of my pages there is a line in the right margin of the central box and I'm not able to remove it, no matter what I try. I tried changing the size of the main, central box, and also tried adding centers. Nothing seems to work. This doesn't occur on my other 300 or so pages, so it's some small thing I'm not seeing. Could someone help me with this? I'm stuck. Page is at: http://beststudentviolins.com/resources.html <gnashing of teeth> Thanks!!! Hi, I've been searching for a forum where I can request a web template and was directed to this one. There are so many categories that I'm not sure if i posted in the right one. So may someone please create or find me a template resembling this one http://ezdocfiler.com. it will be greatly appreciated. Theres not much to it, i have the flash object already i just need the outer template. The Flash Hey all, New user here, wanted to ask a bit of help from some of you web gurus. I am currently assisting my company at work to make some modifications to our website. What I need done is probably really simple for some of you advanced guys on here, but I am not a web master by trade and it's really got me stumped! You see, I have a simple table with some image thumbnails on it. Above this table is a slightly larger view of one of the thumbs. (See attached code example) Now when I hover my mouse over one of the smaller thumbs, I would like the larger image above the table to change to whatever image is being hovered over. So if the user hovers the '3' on the thumbnail table, the top most image will change accordingly to display the '3' in the larger view. I have also attached the html document if it is any assistance.. And here's a snippet of my code: <html> <head> <meta http-equiv="Content-Language" content="en-us"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> </head> <body> <p> <a style="text-decoration: none" href="../mysite/somewhere.html"> <img src="1.jpg" width="350" height="233" align="middle" border="0" /></a></p> <table border="1" width="31%"> <tr> <td width="99"> <a style="text-decoration: none" href="../mysite/somewhere"> <img border="0" src="1.jpg" width="243" height="162" id="img2"></a></td> <td width="107"> <a style="text-decoration: none" href="../mysite/somewhere"> <img border="0" src="2.jpg" width="243" height="162"></a></td> <td> <a style="text-decoration: none" href="../mysite/somewhere.html"> <img border="0" src="3.jpg" width="243" height="162"></a></td> </tr> <tr> <td width="99"> <a style="text-decoration: none" href="../mysite/somewhere.html"> <img border="0" src="4.jpg" width="243" height="162"></a></td> <td width="107"> <a style="text-decoration: none" href="../mysite/Somewhere.html"> <img border="0" src="5.jpg" width="243" height="162"></a></td> <td> <a href="../mysite/somewhere.html"> <img border="0" src="6.jpg" width="243" height="162"></a></td> </tr> <tr> <td width="99"> <a style="text-decoration: none" href="../mysite/somewhere.html"> <img border="0" src="7.jpg" width="243" height="162"></a></td> <td width="107"> <a style="text-decoration: none" href="../mysite/somewhere.html"> <img border="0" src="8.jpg" width="243" height="162"></a></td> <td> <a style="text-decoration: none" href="../mysite/somewhere.html"> <img border="0" src="9.jpg" width="243" height="162"></a></td> </tr> </table> </body> </html> Thank you guys for your time! |
|||||||