Search the Community
Showing results for tags 'tabs'.
Found 21 results
-
Hey, So i'm using w3css to display data on a web page. I've tried to implement the tabs used here - W3.CSS Tabs (w3schools.com). The issue i've had, is if i try to use more than one tab section on a page, when i select a tab, it closes the other section. I want them to work as two individual tabs. Can anyone assist? I know very little knowledge of js unfortunately. Ive pasted the example of what im trying to do below. Thanks in advance. <!DOCTYPE html> <html> <title>W3.CSS</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <body> <div class="w3-container"> <h2>Tabs</h2> <p>Tabs are perfect for single page web applications, or for web pages capable of displaying different subjects. Click on the links below.</p> </div> <div class="w3-bar w3-black"> <button class="w3-bar-item w3-button" onclick="openCity('London1')">London1</button> <button class="w3-bar-item w3-button" onclick="openCity('Paris1')">Paris1</button> <button class="w3-bar-item w3-button" onclick="openCity('Tokyo1')">Tokyo1</button> </div> <div id="London1" class="w3-container city"> <h2>London1</h2> <p>London is the capital city of England.</p> </div> <div id="Paris1" class="w3-container city" style="display:none"> <h2>Paris1</h2> <p>Paris is the capital of France.</p> </div> <div id="Tokyo1" class="w3-container city" style="display:none"> <h2>Tokyo1</h2> <p>Tokyo is the capital of Japan.</p> </div> <div class="w3-bar w3-blue"> <button class="w3-bar-item w3-button" onclick="openCity('London2')">London2</button> <button class="w3-bar-item w3-button" onclick="openCity('Paris2')">Paris2</button> <button class="w3-bar-item w3-button" onclick="openCity('Tokyo2')">Tokyo2</button> </div> <div id="London2" class="w3-container city"> <h2>London2</h2> <p>London is the capital city of England.</p> </div> <div id="Paris2" class="w3-container city" style="display:none"> <h2>Paris2</h2> <p>Paris is the capital of France.</p> </div> <div id="Tokyo2" class="w3-container city" style="display:none"> <h2>Tokyo2</h2> <p>Tokyo is the capital of Japan.</p> </div> <div class="w3-container w3-red"> <h2>The Issue</h2> <p>I want the two tab sections to work indvidually of each other. I want to be able to click London 1 and it not close anything in tab bar 2 and vice versa.</p> </div> <script> function openCity(cityName) { var i; var x = document.getElementsByClassName("city"); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } document.getElementById(cityName).style.display = "block"; } </script> </body> </html>
-
I followed this tutorial https://www.w3schools.com/howto/howto_js_tabs.asp and it's working but how do I put subtabs inside the main tabs? For example, main tabs are tab 1, tab 2 and tab 3. I want to put sub tabs 4 and 5 inside tab 1, in a way that when you click tab 4 or 5 both of them stil stay appearing like the main ones, instead of disappearing if you click on one of them. I hope I'm not being confusing.
-
Hello! I've been trying to find a solution for this issue for the past few hours and couldn't, so I decided to open a topic myself. So basically, I'm trying to combine two types of tab coding. I'm using this How To as the "pages" and using ul.tabs format as "subtabs" within that content. Upon reloading the page, everything seems to be working perfectly at first glance. However, I'm getting a lot of issues that I can't understand as soon as I change from one "page" to another. "Subtab 1" is set as active / default. But when changing "pages", the tab loses its customization. From this -> to this. When changing pages, the only subtab that maintains the customization is the last one that was manually clicked, and only in the specific page where it was clicked. If I click on "subtab 2" in Page 1 and then go to Page 2, I will immediately see the content for its own "subtab 2" instead of what should be the default subtab for every page, a.k.a subtab 1. I know it's confusing but I'm hoping someone has any idea of what's going on here? Below are the codes I'm using for all of this. PAGES / THE "HOW TO" TABS SCRIPT: <script> function openCity(evt, cityName) { // Declare all variables var i, tabcontent, tablinks; // Get all elements with class="tabcontent" and hide them tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } // Get all elements with class="tablinks" and remove the class "active" tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } // Show the current tab, and add an "active" class to the button that opened the tab document.getElementById(cityName).style.display = "block"; evt.currentTarget.className += " active"; } // Get the element with id="defaultOpen" and click on it document.getElementById("defaultOpen").click(); </script> UL.TABS SCRIPT FOR "SUBTABS": <script> $(document).ready(function(){ $("ul.tabss li").click(function(e){ if (!$(this).hasClass("active")) { var tabNum = $(this).index(); var nthChild = tabNum+1; $("ul.tabss li.active").removeClass("active"); $(this).addClass("active"); $("ul.tabs li.active").removeClass("active"); $("ul.tabs li:nth-child("+nthChild+")").addClass("active"); } }); }); </script> CSS FOR BOTH FORMATS: /* SUBTABS */ ul.tabss { list-style-type: none; padding: 0; text-align: center; font-size:9px; letter-spacing:1px; text-transform: uppercase; } ul.tabss li { display: inline-block; background-color: #080808; padding-left: 20px; padding-right: 20px; padding-top: 5px; padding-bottom: 5px; margin: 5px; margin-bottom: 5px; color: #b77b8b; text-shadow: none; font-family: 'Courier Prime', monospace; font-weight: bold; letter-spacing: 3px; cursor: pointer; border-bottom: 2px solid #b77b8b; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } ul.tabss li:hover { color: #000; background-color: #b77b8b; text-shadow: none; border-bottom: 2px solid #b77b8b; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } ul.tabss li.active { color: #000; text-shadow: none; background-color: #b77b8b; border-bottom: 2px solid #b77b8b; } ul.tabs { list-style-type: none; margin: 0; padding: 0; } ul.tabs li { display: none; } ul.tabs li.active { display: block;} /* MAIN TABS */ .tab { list-style-type: none; padding: 0px; text-align: center; font-size:10px; } .tab a { background:transparent; height: 50px; width: 50px; display: inline-block; padding: 0px; margin: 5px; border: 0px solid transparent; outline: none; border-radius: 50%; -moz-transition-duration:.7s; -webkit-transition-duration:.7s; -o-transition-duration:.7s; -webkit-filter: blur(0px); } .tab a:hover { background:transparent; height: 50px; width: 50px; display: inline-block; padding: 0px; margin: 5px; border: 0px solid transparent; outline: none; border-radius: 50%; -moz-transition-duration:.7s; -webkit-transition-duration:.7s; -o-transition-duration:.7s; -webkit-filter: blur(0px); } .tab a.active { background:transparent; height: 50px; width: 50px; display: inline-block; padding: 0px; margin: 5px; border: 0px solid transparent; outline: none; border-radius: 50%; -moz-transition-duration:.7s; -webkit-transition-duration:.7s; -o-transition-duration:.7s; -webkit-filter: blur(0px); -webkit-filter: grayscale(0%); } .tab a.active img { -webkit-filter: grayscale(0%); } .tab img { max-width: 50px; max-height: 50px; border-radius: 50%; -webkit-filter: grayscale(70%); } .tab img:hover { -webkit-filter: grayscale(0%); } .tabcontent { display: none; padding: 5px; padding-top: 20px; } THE HTML: <div class="tab"> <a class="tablinks" onclick="openCity(event, 'PAGE 1')" title="page 1." id="defaultOpen"><img src="https://static.tumblr.com/yl55q4f/uKVq92olu/011.png"></a> <a class="tablinks" onclick="openCity(event, 'PAGE 2')" title="page 2."><img src="https://static.tumblr.com/yl55q4f/uKVq92olu/011.png"></a> </div> <div id="PAGE 1" class="tabcontent"> <ul class="tabss"><li class="active">tab 1</li> <li>tab 2</li> <li>tab 3</li></ul> <ul class="tabs"> <li class="active"> TAB 1 SECTION. </li> <li> TAB 2 SECTION. </li> <li> TAB 3 SECTION. </li> </ul> </div> <div id="PAGE 2" class="tabcontent"> <ul class="tabss"><li class="active">tab 1</li> <li>tab 2</li> <li>tab 3</li></ul> <ul class="tabs"> <li class="active"> TAB 1 SECTION. </li> <li> TAB 2 SECTION. </li> <li> TAB 3 SECTION. </li> </ul> </div> Thank you in advance!
-
Hello! I'm looking for some help with my Javascript code. I have a services page with 5 tabs. I used w3schools to obtain and tweak this code as needed. However, I need to link to a specific tab from my home page and I'm having trouble editing the Javascript to make this possible. Here's what I have thus far: Services Page HTML: <div class="col"> <button class="tablinks" onclick="openCity(event, 'nonclinical')"><div class="tab-wrap-blue"><div class="nonclinical" style="height: 90px;"> </div><div class="tablink-head stories mobile-no"><h4>Nonclinical Development</h4></div></div></button> </div> <div class="col"> <button class="tablinks" onclick="openCity(event, 'clinical')"><div class="tab-wrap-green"> <div class="clinical" style="height: 90px;"> </div><div class="tablink-head stories mobile-no"><h4>Clinical Development</h4></div> </div></button> </div> <div class="col"> <button class="tablinks" onclick="openCity(event, 'safety')"><div class="tab-wrap-dkgreen"><div class="safety" style="height: 90px;"> </div><div class="tablink-head stories mobile-no"><h4>Regulatory, Safety and Manufacturing</h4></div></div></button> </div> <div class="col"> <button class="tablinks" onclick="openCity(event, 'life')"><div class="tab-wrap-gray"><div class="life" style="height: 90px;"> </div><div class="tablink-head stories mobile-no"><h4>Life Science Enterprises</h4></div></div></button> </div> Current Javascript: <script> function openCity(evt, cityName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(cityName).style.display = "block"; evt.currentTarget.className += " active"; } // Get the element with id="defaultOpen" and click on it document.getElementById("defaultOpen").click(); }); </script> Home page link needs to go to both the services page, and open up a specific <button>. Ie. <button class="tablinks" onclick="openCity(event, 'clinical')"> I'm new to Javascript and W3Schools has been such a help! Hoping there is a simple solution from someone who knows this code well. Thanks so much!
-
Hello, I am using the How to Create Tabs tutorial (https://www.w3schools.com/howto/howto_js_tabs.asp), but I can't get the default tab to work. It seems to work in the Tryit Editor, but even pasting the code as is, it doesn't work. I am using Shopify and have a .js, .css, and a .liquid (page template) document. Other changes on the pages seem to take affect. {{ 'tabs.js' | asset_url | script_tag }} {{ 'tabs.css' | asset_url | stylesheet_tag }} {% include 'breadcrumb' %} <meta name="viewport" content="width=device-width, initial-scale=1"> <div class="grid"> <div class="grid-item large--two-thirds push--large--one-sixth"> <h1>{{ page.title }}</h1> <div class="rte"> <h2>Tabs</h2> <p>Click on the x button in the top right corner to close the current tab:</p> <div class="tab"> <button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button> <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button> <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button> </div> <div id="London" class="tabcontent"> <span onclick="this.parentElement.style.display='none'" class="topright">×</span> <h3>London</h3> <p>London is the capital city of England.</p> </div> <div id="Paris" class="tabcontent"> <span onclick="this.parentElement.style.display='none'" class="topright">×</span> <h3>Paris</h3> <p>Paris is the capital of France.</p> </div> <div id="Tokyo" class="tabcontent"> <span onclick="this.parentElement.style.display='none'" class="topright">×</span> <h3>Tokyo</h3> <p>Tokyo is the capital of Japan.</p> </div> {{ page.content }} </div> </div> </div> function openCity(evt, cityName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(cityName).style.display = "block"; evt.currentTarget.className += " active"; } // Get the element with id="defaultOpen" and click on it document.getElementById("defaultOpen").click(); /* Change background color of buttons on hover */ .tab button:hover { background-color: #ddd; } /* Create an active/current tablink class */ .tab button.active { background-color: #ccc; } /* Style the tab content */ .tabcontent { display: none; padding: 6px 12px; border: 1px solid #ccc; border-top: none; } /* Style the close button */ .topright { float: right; cursor: pointer; font-size: 28px; } .topright:hover {color: red;}
-
I used the guide from this link https://www.w3schools.com/howto/howto_js_tabs.asp I would like to center the buttons. I currently have 22 buttons. The second line is arranged to the left. I want them to be in the middle. I tried several ways but unfortunately to no avail. Thank you in advance for your help.
-
Hi all, I am trying to work with tabs and using the How to Create Tabs page on the w3 site below. I am unclear on one part. In the HTML code, what is the event parameter referring to in the onclick function. I've copied on of the relevant lines below. If someone could elaborate further it would be much appreciated. <button class="tablinks" onclick="openCity(event, 'London')">London</button> https://www.w3schools.com/howto/howto_js_tabs.asp
-
I am new to web development, so be patient please I am working with a tab navigation system. It happens to be bootstrap, but this question is not specific to bootstrap. There are four tabs; for the sake of simplicity we will call them tabs "A", "B", "C", and "D." I have a single SQL table and one of the columns --we will call it "Letter"-- identifies each row with one of the four letters. When a user clicks on "A" tab, they should see all the rows where "Letter" = "A". The same for tabs "B", "C", and "D." Right now I am running four separate queries, one for each tab. This seems ridiculous. There must be a way to grab all the data from the table with one query, sort the rows based on their "Letter" into four separate multi dimensional arrays, and then loop through the appropriate array to display the data for a particular "Letter" when a user selects that tab. I cannot figure out how to do this. Any suggestions would be most helpful. Thanks.
-
Is there any complete W3.JS solution for Tabs, Accordions, SlideShows etc?
-
Hi, I am using the w3.css tabs and have a customised cursor. However the cursor will not work over the tabs. What do I need to set to get it to work over the tabs also?
-
I'm using W3.CSS tabs and I have a class assigned so that the active tab is colored. However, when the page loads none of the tabs are open. I have to click on one. I'm wanting the 1st tab to be open and highlighted with the active color when the page is first loaded. Here's my code: <ul class="w3-navbar w3-grey"> <li><a href="javascript:void(0)" class="tablink" onclick="openTab(event, 'tab1');">TAB 1</a></li> <li><a href="javascript:void(0)" class="tablink" onclick="openTab(event, 'tab2');">TAB 1</a></li> <li><a href="javascript:void(0)" class="tablink" onclick="openTab(event, 'tab3');">TAB 3</a></li> </ul> <div id="tab1" class="tab"> <p>Tab 1 content</p> </div> <div id="tab2" class="tab"> <p>Tab 2 content</p> </div> <div id="tab3" class="tab"> <p>Tab 3 content</p> </div> <script> openTab("tab1") function openTab(evt, tabName) { var i, x, tablinks; var x = document.getElementsByClassName("tab"); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablink"); for (i = 0; i < x.length; i++){ tablinks[i].className = tablinks[i].className.replace(" w3-red", ""); } document.getElementById(tabName).style.display = "block"; evt.currentTarget.className += " w3-red"; } </script> Thanks!
-
Hello, I have a problem in my website. Recently, I'm using tabs to show my information but this is changing the place of some elements in my web. I would like to know how I can solve this. I've created and attached a little .html with .css where I show what happens with my tabs. You will see two tabs with information and two buttons (imbornales and tramos). Both buttons should be under the tabs, but imbornales appears on the right side. And when I open some tab, both buttons are hidden. I think it's a problem with the position: absolute; I've tried to change it but the tabs behaviour is not the same. Any ideas? Thank you very much! pestanias.css pestanas.html
-
Hello Internet, I have a basic textarea element written as follows: <textarea name="contact_feedback" id="contact_feedback" value “” rows="4" cols="26" style="border: 0px solid #000000;"></textarea> My dilemma is that Chrome/Safari they don’t place 7 tabs in the textarea when the window loads but IE8 does. Can I use in-line CSS or something else to eliminate these tabs when the window loads? Thanks! -
Hello: I'm trying to develop a web applications for maintaining database tables (Oracle tables and jsp). I use html, javascript, jquery and json. Notepad++ as editor.. And use the documentation of w3school. But I'd like to use an IDE which allow me to develop applications which include Menu, tabs and scrollable tables. The IDE I've tried include html tag and javascript code assistant, but not complex objets like tabs and applications menu. Can any tell me and IDE which include menu, tabs, ... Or, how can I create: - An application menu. - Tabs. in an easy way. Thanks
-
Hi everybody, I was able with some research to find documentation on tabbed navigation. I gathered all the information I found, and decided to make a code entirely with css and css3. The look is nice, however I am unable to control the height of the tabs. I set a value in the class .tablist inside the css sheet, but the height does not increase if I change this value. Moreover it seems it depends on the font-size and on the padding value in .tablist li a. I attached four html pages (page1.html ... page4.html): page1.html page2.html page3.html page4.html and the css sheet: style.css Does any of any idea of how can I take control over the height of the tabs? Many thanks in advance
-
Hello, I'm experiencing a little problem when trying to align different div sections. The page loads correctly in Safari/Chrome but when using other browsers, there is a little displacement (see image). I don't know what is causing the problem. Hope anyone of you can help me. Thanks in advance! <html><head>(...)<style>body{background-color:rgb(235,235,235);}.header{background-color:rgb(17,76,131);position:absolute;top:0px;left:0px;right:0px;height:120px;}.base{background-color:rgb(250,193,37);margin:auto;padding-bottom:15px;width:980px;padding-top:125px;height:auto;text-align:center;}.tabbed_box{margin:0px auto 0px auto;width:950px;}.tabbed_area{border:1px solid #494e52;background-color:#636d76;padding:8px;}ul.tabs{margin:0px;padding:0px;margin-top:5px;margin-bottom:5px;}ul.tabs li {list-style:none;display:inline;}ul.tabs li a{background-color:#464c54;color:#ffebb5;padding:8px 14px 8px 14px;text-decoration:none;font-size:9px;font-family:Verdana, Arial, Helvetica, sans-serif;font-weight:bold;text-transform:uppercase;border:1px solid #464c54;}ul.tabs li a:hover{background-color:#2f343a;border-color:#2f343a;}ul.tabs li a.active{background-color:#ffffff;color:#282e32;border:1px solid #464c54;border-bottom:1px solid red;}ul.list{list-style-type: square;font-family:"Segoe UI", sans-serif;font-size:14px;}.content{background-color:#ffffff;padding:10px;border:1px solid #464c54;text-align:left;font-size:12px;font-family:Verdana, Arial, Helvetica, sans-serif;}#content_2,#content_3,#content_4,#content_5,#content_6,#content_7,#content_8,#content_9 {display:none;}</style></head><body><div class="header">Test?</div><div class="base"> <div id="tabbed_box_1" class="tabbed_box"> <div class="tabbed_area"> <script src="js/functions.js" type="text/javascript"></script> <ul class="tabs"> <li><a href="javascript:tabSwitch_2(1,9,'tab_','content_');" id="tab_1" class="active">Ligging</a></li> <li><a href="javascript:tabSwitch_2(2,9,'tab_','content_');" id="tab_2">Faciliteiten</a></li> <li><a href="javascript:tabSwitch_2(3,9,'tab_','content_');" id="tab_3">Logies</a></li> <li><a href="javascript:tabSwitch_2(4,9,'tab_','content_');" id="tab_4">Eten & Drinken</a></li> <li><a href="javascript:tabSwitch_2(5,9,'tab_','content_');" id="tab_5">Sport</a></li> <li><a href="javascript:tabSwitch_2(6,9,'tab_','content_');" id="tab_6">Animatie</a></li> <li><a href="javascript:tabSwitch_2(7,9,'tab_','content_');" id="tab_7">Kinderen</a></li> <li><a href="javascript:tabSwitch_2(8,9,'tab_','content_');" id="tab_8">Extra</a></li> <li><a href="javascript:tabSwitch_2(9,9,'tab_','content_');" id="tab_9">Prijzen & Contact</a></li> </ul> <div id="content_1" class="content">Content for Tab 1</div> <div id="content_2" class="content">Content for Tab 2</div> <div id="content_3" class="content">Content for Tab 3</div> <div id="content_4" class="content">Content for Tab 4</div> <div id="content_5" class="content">Content for Tab 5</div> <div id="content_6" class="content">Content for Tab 6</div> <div id="content_7" class="content">Content for Tab 7</div> <div id="content_8" class="content">Content for Tab 8</div> <div id="content_9" class="content">Content for Tab 9</div> </div> </div></div></body></html>
-
Alright, my jQuery.tabs function goes over my custom div. I've tried to add z-index 0, 10, 500 to the custom div but tabs is still on the custom content. Any fix?
-
Im wondering how to select .tabs column on button click because anything i tried didin't work for me. I've tried methdows below. Lets imagine my tab would be <div id="tabs"><li><a href="#tabs-1">Page1</a></li><li><a href="#tabs-2">Page2</a></li><li><a href="#tabs-3">Page3</a></li><li><a href="#tabs-4">Page4</a></li><div id="tabs-1">Page1 content here <button type="submit" value="Clickme" id="clickme"></div><div id="tabs-2">Page2 content here</div><div id="tabs-3">Page3 content here</div><div id="tabs-4">Page4 content here</div></div> And jQuery $(function() {$("#tabs").tabs();$("#clickme").on('click', function() {alert("This works");$("#tabs").tabs({selected:3}); //Doesnt work$("#tabs").tabs("select", "#tabs2"); //Doesnt work});}); So the alert work but tabs select doesn't. Yes i have jQuery & jQuery-ui files linked. Prob tried all methods herehttp://stackoverflow.com/questions/5912762/jquery-ui-tabs-how-to-select-a-tab-based-on-its-id-not-based-on-index jquery-ui tabshttp://jqueryui.com/tabs/
-
I´m looking for a tutorial and how to make a menu with 3 tabs with different content each. one of the tabs will have a video. My question is, How can i achieve this?Will it be on html only, css, or both?Thanks in advance for your time. :)Currently im looking on google but nothing special on how to achieve this.
-
Hi all. I'm pretty new to web design with CSS, so bear with me if this is a really basic question. I'm having trouble getting my positioning right. Here's the webpage so far:http://studentaccess...site/index.html I want the tabs to sit on top of the image. Even though they are before the <div id="content"> part in my HTML, they are still overlapping the image, as you see.I also want them to be flush with the left edge of the image (which is centered). Here's the relevant part of the HTML:<body bgcolor="#EDEDED"> <div id="header"><p><span id="title"> AVA </span><br> my challenge for the 2013 year is to record one original song or musical piece per month.</p></div> <div id="Tabs"><ul><li><a href="Challenge.html">This month's song</a></li><li><a href="Compositions.html">Compositions </a></li><li><a href="Covers.html">Covers </a></li><li><a href="hire.html">Hire AVA to sing </a></li></ul> </div> <!– End of Tabs Div –> <div id="content"> <div id="Content_Area"><p>...the text...</p></div> <div id="followbox">links to RSS feeds, etc., here</div></div> <!-End of content-> </body> And the relevant CSS:body {font-family: "Mona Lisa Solid ITC TT","Modern No. 20",Garamond,Gabriola,serif;font-size: 1.4em;} #Tabs {display: block;position: relative;margin: 0;margin-right: auto;margin-left: auto;} #Tabs ul {padding: 0px;list-style-type: none;} #Tabs ul li {display: inline-block;clear: none;float: left;} #Tabs ul li a {position: relative;margin-top: 0px;display: block;margin-left: 5px;line-height: 1em;padding-left: 10px;background: #f6f6f6;border: 1px solid #ccc;border-bottom: 0px;-moz-border-radius-topleft: 4px;border-top-left-radius: 4px;-moz-border-radius-topright: 4px;border-top-right-radius: 4px;/* end of rounded borders */ width: 150px;height: 50px;color: #000000;text-decoration: none;font-style: italic;} #Tabs ul li a:hover {text-decoration: underline;} #content {background-image: url(images/bg_image_med.jpg);background-repeat: none;border: 1px solid #000000;height: 500px;width: 900px;margin-left: auto;margin-right: auto;} #Content_Area {padding: 15px;overflow: hidden;position: relative;width: 620px;height: 500px;overflow: hidden;} p { padding: 15px; } What am I doing wrong?Thanks in advance!
-
Hey everyone,This is my first post here, so please don't be too critical. Details: I'm coding a tabbed page and I have the basic layout set up as well as the javascript working to allow me to switch back and forth between tabs. Problem: The content I want to place in the Tabs are other HTML pages to be load and I'm totally oblivious on how to this. My code is below. What would I have to do in order to load the page without messing up any of the current functions or code? Much Thanks in advance <head><style type="text/css"> body { margin:40px; } #tabbed_box { margin: 0px auto 0px auto; width:300px; } .tabbed_box h4 { font-family:Arial, Helvetica, sans-serif; font-size:23px; color:#000000; letter-spacing:-1px; margin-bottom:10px; } .tabbed_box h4 small { color:#e3e9ec; font-weight:normal; font-size:9px; font-family:Verdana, Arial, Helvetica, sans-serif; text-transform:uppercase; position:relative; top:-4px; left:6px; letter-spacing:0px; } .tabbed_area { padding:8px; width:auto; } ul.tabs { margin:0px; padding:0px; } ul.tabs li { list-style:none; display:inline; } ul.tabs li a { background-color:#464c54; color:#ffffff; padding:8px 14px 7px 14px; text-decoration:none; font-size:12px; font-family:Verdana, Arial, Helvetica, sans-serif; font-weight:bold; text-transform:uppercase; border:2px solid #464c54; border-bottom: none; background-image:url(http://www.jbsbcorp.com/gabriel/gtl/tab_off.jpeg); background-repeat:repeat-x; background-position:bottombottom; } ul.tabs li a:hover { background-color:#2f343a; border-bottom: none; } ul.tabs li a.active { background-color:#ffffff; color:red; border:2px solid #464c54; border-bottom: 2px solid #ffffff; background-image:url(http://www.jbsbcorp.com/gabriel/gtl/tab_on.jpg); background-repeat:repeat-x; background-position:top; } .content { background-color:#ffffff; padding:10px; border:2px solid #464c54; background-image:url(http://www.jbsbcorp.com/gabriel/gtl/content_bottom.jpg); background-repeat:repeat-x; background-position:bottombottom; } #look_2, #look_3, #look_4{ display:none; } ul.tabs { margin:0px; padding:0px; margin-top:5px; margin-bottom:6px; } .content ul { margin:0px; padding:0px 20px 0px 20px; } .content ul li { list-style:none; border-bottom:1px solid #d6dde0; padding-top:15px; padding-bottom:15px; font-size:13px; } .content ul li a { text-decoration:none; color:#3e4346; } .content ul li a small { color:#8b959c; font-size:9px; text-transform:uppercase; font-family:Verdana, Arial, Helvetica, sans-serif; position:relative; left:4px; top:0px; } .content ul li:last-child { border-bottom:none; }</style><script type="text/javascript"> function tabSwitch(new_tab, new_content) { document.getElementById('look_1').style.display = 'none'; document.getElementById('look_2').style.display = 'none'; //document.getElementById('look_3').style.display = 'none'; //document.getElementById('look_4').style.display = 'none'; document.getElementById(new_content).style.display = 'block'; document.getElementById('tab_1').className = ''; document.getElementById('tab_2').className = ''; //document.getElementById('tab_3').className = ''; //document.getElementById('tab_4').className = ''; document.getElementById(new_tab).className = 'active'; } </script></head><body> <div class="tabbed_area"> <ul class="tabs"> <li><a href="javascript:tabSwitch('tab_1', 'look_1');" id="tab_1" class="active">LOOK 1</a></li> <li><a href="javascript:tabSwitch('tab_2', 'look_2');" id="tab_2">LOOK 2</a></li> <!-- <li><a href="javascript:tabSwitch('tab_3', 'look_3');" id="tab_3">LOOK 3</a></li> --> <!-- <li><a href="javascript:tabSwitch('tab_4', 'look_4');" id="tab_4">LOOK 4</a></li> --> </ul> <!-- LOOK ONE --> <div id="look_1" class="content"> <ul> <li><a href=""></a></li> </ul> </div> <!-- LOOK TWO --> <div id="look_2" class="content"> <ul> <li><a href="">December 2008 <small>6 Posts</small></a></li> </ul> </div> <!-- LOOK THREE <div id="look_3" class="content"> <ul> <li><a href="">Home</a></li> </ul> </div> --> <!-- LOOK FOUR <div id="look_4" class="content"> <ul> <li><a href="">dhgdh</a></li> </ul> </div> --> </div> </body>
