|
HTML - Tabbed Panels Not Working?
So, I'm using Dreamweaver to build this site.
I know a bit about HTML, but really not very much. I used the built in tabbed panels, which I'm going to be editing to look better soon, one I get it working. For whatever reason, it's not working......that is, the tabs aren't separate. I'm guessing I have overlooked something, but it would be helpful if someone could point it out to me. The correct CSS and JS files are mentioned, and the files themselves are in the correct place. Yeah.....comments on the site are welcome too, though it is still under construction for awhile. Similar TutorialsHi!I designed a webpage,started coding it,but now I need help.Let's say my "panel's" height is 200px,and my text height is 400px.Obvyously(don't know how to spell this word ;D) the text will go out of the image.But I need that image would expand with the text.And that's my problem.I don't know if I need to cut that panel somehow or s***,but I just can't figure it out Srry fo my bad english. Could someone please give me some sample code to show how to create a tabbed panel in html>? thanks a lot! My first post what a beautiful forum .......anyway ........i know i can use and anchor tag and set it to open in a _blank window, but how do i make it so that the window which opens ....... opens in a new tab in IE 7 or Firefox 2.0 ? Hello friends, As a Newbie.. I got a live project and im bowled in a part Attached is the target/goal image Need to be done in html/css format Attached is my work. can anyone help me in creating tabbed pane like in screen shot image? regards I have a tabbed content box using jQuery, but I want to show HTML upon loading that is not one of the actual tabs. Here is my code so far. Code: <div id="tabs_container">
<ul id="tabs">
<li><a class="imgrep exceed" href="#tab1">tab1</a></li>
<li><a class="imgrep fun" href="#tab2">tab2</a></li>
<li><a class="imgrep envelope" href="#tab3">tab3</a></li>
<li><a class="imgrep love" href="#tab4">tab4</a></li>
<li><a class="imgrep ceo" href="#tab5">tab5</a></li>
<li><a class="imgrep embrace" href="#tab6">tab6</a></li>
<li><a class="imgrep shoes" href="#tab7">tab7</a></li>
<li><a class="imgrep celebrate" href="#tab8">tab8</a></li>
</ul>
</div>
<div id="tabs_content_container">
<!-- code I want to show as the default slide -->
<div class="tab_content" style="display: block;">
<div id="inside_content">
<p class="inside_h"><span style="color: #00a7d1;">Our Recipes for Success</span></p>
<p class="inside_p">Whether it's a simple assignment or basic interaction with one of the members, our goal is not to just be good, but be better than great.</p>
</div>
</div>
<!-- end default code -->
<!-- Tab 1 -->
<div id="tab1" class="tab_content">
<div id="inside_content">
<p class="inside_h"><span style="color: #00a7d1;">Exceed Expectations everyday.</span></p>
<p class="inside_p">Whether it's a simple assignment or basic interaction with one of the members, our goal is not to just be good, but be better than great.</p>
<ul id="ingredients">
<li>ingredients:</li>
<li>2 determination</li>
<li>1 positive attitude</li>
<li>2 self-motivation</li>
<div id="logo-blue"></div>
</ul>
</div>
</div>
<!-- Tab 2 -->
<div id="tab2" class="tab_content">
<div id="inside_content">
<p class="inside_h"><span style="color: #d18c02;">Have fun.</span></p>
<p class="inside_p">We get to do the unthinkable - work and have a good time. We share that philosophy through. Fun is what makes it so invaluable.</p>
<ul id="ingredients">
<li>ingredients:</li>
<li>1 passion</li>
<li>3 positive attitude</li>
<li>1 goofyness</li>
</ul>
</div>
</div>
... more tabs...
Hi, It's quite popular to have a tabbed pane in web pages nowadays. We can have sub-section of our page in the tabs and thus minimize scrolling. As such, I'm just wondering whether in terms of performance (not sure how browser render it), is it faster to just have HTML tables rather than those tabbed panes. eg: <With tabbed panes> Section 1 / Section 2 / Section 3 <With HTML tables> Section 1 Section 2 Section 3 Please comments. Thanks in advance. Hey all I have just joined these forums as I am learning HTML and CSS. However the book that I am following does not appear to be working. I have created a custom class in css called "Stewart" and a test page to test it however it does not appear as I have defined. Below is the code for the CSS page Quote: <!-- A CSS style sheet --> body { font-size: 10pt; font-family: Arial; color: black; line-height: 14pt; padding-left: 5pt; padding-right: 5pt; padding-top: 5pt; } h1 { <!-- ALso possible to define different classes see SAM's teach yourself HTML and CSS p59 --> background-color: pink; font-size: 14pt; font-family: Arial; font-weight: 20pt; color: red; } h2 { font-size: 12pt; font-family: Arial; font-weight: 20pt; color: red; } h3.silly {font: 36pt Comic Sans; } h3.serious {font: 8pt Arial; } p.subheader { font-weight: bold; color: green; } <!-- Custom Class, use the div heading to create a custom class --> DIV.stewart {font-size: 30pt; color: red; font-style: italic; } And here is the code for the test page Quote: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <link rel="stylesheet" type="text/css" href="styles.css" /> <!--The above is a link to the css file in this directory --> <title>CSS Test sheet</title> </head> <body> <h1> This is a test sheet for my css, it might possibly look different every time. </h1> <h3 class="silly"> Silly</h3> <p> The above text is silly class of heading 3</p> <h3 class="serious">serious</h3> <p> The above text is serious class of heading 3 </P> <p> <div class="stewart">This is my own custom style</div> </p> </body> </html> Can someone please explain where I am going wrong. I am using IE on WIndows 7. Hi guys, For some reason, in IE8, on product pages (Example) of my ecommerce site, the 'Size Chart' and 'Email to a Friend' popups don't work, and the product image lightbox won't work either. I have turned pop-up blocker off but they still don't work. These popups work in every other browser I have tested in, including IE7. It seems to only be IE8 that is having this problem. Upon looking at the page source, one thing I have noticed that both the 'Size Chart' and 'Email to a Friend' buttons have in common, is that the popups seem (I'm far from an expert) to be 'triggered' by a span element (class="more") within the HTML. For example: Code: <div class="row "> <label >Size: </label> <strong class="fl"><select name="size" id="size" onchange="checkstock(this.value)"><option value="">Select Size</option><option value="S">S</option><option value="M">M</option><option value="L">L</option><option value="XL">XL</option><option value="XXL">XXL</option></select></strong> <span style="text-decoration: underline;" class="size_chart more" title="size_chart1">+ Size Chart</span> <div style="display: none;" class="size_chart1 hide" > <div class="close"></div> <img src="http://www.projectdisobey.com/disobeyclothing/wp-content/themes/eCommerce3/images/size_chart.jpg" alt="" /> </div> <!-- size chart --> </div> Code: <ul class="fav_link">
<li class="print"><a href="#" onclick="window.print();return false;">Print</a> </li>
<li class="rss"><a href="http://feeds.feedburner.com/DisobeyClothing">RSS</a> </li>
<li class="emailtofriend"><span style="text-decoration: underline;" class="more" title="tellafrnd_div">Email to a Friend</span> </li>
<li class="blank"><span id="tellafrnd_success_msg_span"></span></li>
<li class="blank"><div style="display: none;" id="tellfrnddiv" class="tellafrnd_div hide"> <iframe src="http://www.projectdisobey.com/disobeyclothing/?page=tellafriend_form&pid=402" style="border: medium none ; width: 547px; height: 558px;" frameborder="0" ></iframe> </div> </li>
<li class="share">
<div class="a2a_kit addtoany_list"><a class="a2a_dd addtoany_share_save" href="http://www.addtoany.com/share_save"><img src="http://www.projectdisobey.com/disobeyclothing/wp-content/plugins/add-to-any/share_save_171_16.png" width="171" height="16" alt="Share"/></a></div>
<script type="text/javascript"><!--
var a2a_config = a2a_config || {};
a2a_config.linkname="Know Your Enemy";
a2a_config.linkurl="http://www.projectdisobey.com/disobeyclothing/?p=402";
a2a_config.color_main = "f3f3e7";a2a_config.color_border = "C0C88A";a2a_config.color_link_text = "332402";a2a_config.color_link_text_hover = "332402";a2a_config.color_bg = "7f6f2";
a2a_config.num_services = 14;
//--></script><script type="text/javascript" src="http://static.addtoany.com/menu/page.js"></script>
</li>
</ul>
I have no idea what could be stopping the lightbox from working. Anybody have any suggestions as to what the problem might be (and how I can rectify it)? If you need more info, let me know... Thanks! i have installed IIS 5.1 in my XP machine but when i type http://localhost it shows a blank page. Hi, I'm a self-taught web designer with not a lot of experience and need some help please! This website shows up perfectly in Chrome + Firefox, but it completely fails in IE. http://fparchitectural.ca/beta/ I'm guessing it's a css/div issue. Hopefully it is a simple fix. Please Help. I've found a website that shows my Steam status every amount of time, just like the rest of other websites. This banner or gamecard should show if i'm online, what i'm playing and other stuff that is in the gamecard. The website has an option for yourself to put your own PNG image as the card's background. I entered the link correctly of the image and after that it gave me the codes to put them wherever i want. The problem is that when i submit the code wherever i want (Forums) the image doesnt show but the code in text itself. The PNG had transparent parts so i tried on a pure black background, didnt work either. Then i noticed the code has some different values/elements from the included images that the website comes with. This is the code of my custom PNG image: Code: http://steamsigs.com/steam.php?id=ik....png&tborder=1 And this is with the default image of the website: Code: http://steamsigs.com/steam.php?id=ik...rmal&tborder=1 I also tried different text borders and options. You can try yourself doing the gamecard he www.steamsigs.com You will need a custom Steam ID url, but you can use mine: ikamikaze15 And if it could be something wrong with the image, here it is: http://i1000.photobucket.com/albums/...ndoGR15/ua.png Thanks for helping. Hi Guys, I have this link: <a href="programs/XMLPoster.exe">programs/XMLPoster.exe</a> It works when i view it in Firefox, but gives me an error when i click it in i.e? Do you know why this is happening? Ideally i want to be able to launch the .exe file and not just ask the user if they want to save it? Thanks, Chloe ~X~ I have a code for div and the strange thing is that it is working in empty html code but if i put it in an existing html code then it will not work! please help!!! I'm new to this forum and was not quite sure where to post this but I am having some trouble putting this code I made into my myspace and making it work. It shows up correctly on the normal browser but when I go to add it to my page it doesn't work. Any help would be appreciated. HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
<head>
<style type="text/css">
#picturebox {
background: #transparent;
background-image:url('http://img231.imageshack.us/img231/6485/tvphotosmallergs4.jpg');
background-repeat: no-repeat;
position: absolute;
top: 0px;
left: 0px;
width: 800px;
height: 631px;
}
#moviebox {
background: #FFFFFF;
background-repeat: no-repeat;
position: absolute;
top: 120px;
left: 168px;
width: 400px;
height: 300px;
}
</style>
</head>
<body>
<div id="picturebox">
<div id="moviebox">
<object type="application/x-shockwave-flash" width="400" height="300" data="http://www.vimeo.com/moogaloop.swf?clip_id=721534&server=www.vimeo.com&fullscreen=1&show_title=1&show_byline=1&show_portrait=0&color="> <param name="quality" value="best" /> <param name="allowfullscreen" value="true" /> <param name="scale" value="showAll" /> <param name="movie" value="http://www.vimeo.com/moogaloop.swf?clip_id=721534&server=www.vimeo.com&fullscreen=1&show_title=1&show_byline=1&show_portrait=0&color=" /></object>
</div>
</div>
</body>
</html>
Thank you! I'm new to all this. I have designed a Form (see attached ZIP file) that has many TEXT boxes. When the user clicks "Submit" I want to capture the info in the Text boxes and e-mail the results to me. I have no idea how to do this. Can you HELP? Another question: How can I verify data in the text box? For Example--the text box of Quantity, must be numeric. The other text boxes in the table must contain the letter "X" or be blank. The concept of the form I'm trying to do is like an "Order Form". Maybe there is an easier way to do this????? Any help on your part would be most welcome. Some idea of my background--I did some VB programming so I know "logic". I don't know any of the Web languages such as ASP, Java, etc. Thanks, Sam Hi I have loging screen it invokes a html output via php coding. < Code: script type="text/javascript" src="tablesel.js"></script> </head> <body> <menu><ul ondbclick = "process()">BILLITEM</ul> <ul ondbclick = "process()">BILLMAIN</ul> <ul ondbclick = "process()">BILLOFMATL</ul> <ul ondbclick = "process()">BUYER</ul> <ul ondbclick = "process()">CHASSISMASTER</ul> <ul ondbclick = "process()">CODEMAST</ul> <ul ondbclick = "process()">CONTRACTMAST</ul> <ul ondbclick = "process()">CONTRACTOR_CANTEEN</ul> <ul ondbclick = "process()">CONVMASTER</ul> <ul ondbclick = "process()">COSTCENTRE</ul> <ul ondbclick = "process()">COST_PRODUCTMAST</ul> <ul ondbclick = "process()">COST_SPEC</ul> <ul ondbclick = "process()">CUSTMAST</ul> <ul ondbclick = "process()">DEPTMAST</ul> <ul ondbclick = "process()">EMPLMAST</ul> but ondbclick is not working on this element. first i dont know whether this event will work or not in that element so please help me. kanish I, too am having a display problem with Chrome and Firefox. I've just made a practice image map and the image shows up just fine (of course), but the map itself does not when I open the file with Google Chrome or Firefox. I opened it in Internet Explorer and it works just fine. Anyone know what causes these errors? http://www.wishwishwish.net Okay, so i created this website by modifying the default wordpress theme, and using my own image as a background, which is defined in the css. I originally wanted to use an imagemap, so I used this tutorial to help me create one, with the css in the style.css, and html in header.php this works perfectly in firefox, but not at all in IE, the links do not appear. this might be happening in other browswers as well, what's wrong? is it the method i've used for creating the floating image map? Will somebody please help me? I have been having trouble getting an image up on my site. I have not yet made it accessible to the public yet. Here is the line in the script: <img src="TSA Big Logo.jpg"/> have i done anything wrong with this tag? Please help. Thanks, Borg1120 |
|||||||