DimisD Posted February 15, 2007 Share Posted February 15, 2007 Hi, I have the following code, but the css doesn't work all right. Can someone find what is wrong??? The css is borrowed from an example in this site: http://www.brainjar.com/css/tabs/demo.html Thank you Here is my code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!--************************************************************************--> <!--* Tabs Demo *--> <!--* *--> <!--* Copyright 2002 by Mike Hall *--> <!--* Please see http://www.brainjar.com for terms of use. *--> <!--* *--> <!--* Note: A transitional DTD is needed due to the use of link targets. *--> <!--************************************************************************--> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>BrainJar.com: Tabs Demo</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <style type="text/css"> div.tabBox {} div.tabArea { font-size: 80%; font-weight: bold; padding: 0px 0px 3px 0px; } a.tab { background-color: #d0b0ff; border: 2px solid #000000; border-bottom-width: 0px; border-color: #f0d0ff #b090e0 #b090e0 #f0d0ff; -moz-border-radius: .75em .75em 0em 0em; border-radius-topleft: .75em; border-radius-topright: .75em; padding: 2px 1em 2px 1em; position: relative; text-decoration: none; top: 3px; z-index: 100; } a.tab, a.tab:visited { color: #8060b0; } a.tab:hover { background-color: #a080d0; border-color: #c0a0f0 #8060b0 #8060b0 #c0a0f0; color: #ffe0ff; } a.tab.activeTab, a.tab.activeTab:hover, a.tab.activeTab:visited { background-color: #9070c0; border-color: #b090e0 #7050a0 #7050a0 #b090e0; color: #ffe0ff; } a.tab.activeTab { padding-bottom: 4px; top: 1px; z-index: 102; } div.tabMain { background-color: #9070c0; border: 2px solid #000000; border-color: #b090e0 #7050a0 #7050a0 #b090e0; -moz-border-radius: 0em .5em .5em 0em; border-radius-topright: .5em; border-radius-bottomright: .5em; padding: .5em; position: relative; z-index: 101; } div.tabIframeWrapper { width: 100%; } iframe.tabContent { background-color: #9070c0; border: 1px solid #000000; border-color: #7050a0 #b090e0 #b090e0 #7050a0; width: 100%; height: 36ex; } /****************************************************************************** * Additional styles. * ******************************************************************************/ h4#title { background-color: #503080; border: 1px solid #000000; border-color: #7050a0 #b090e0 #b090e0 #7050a0; color: #d0b0ff; font-weight: bold; margin-top: 0em; margin-bottom: .5em; padding: 2px .5em 2px .5em; } </style> <SCRIPT language=javascript type="text/javascript"> var iFrameArray = ["iframe1","iframe2","iframe3"]; function showhideiframe(strIframeID){ hideAllIFrames(); document.getElementById(strIframeID).style.display = "block"; } function hideAllIFrames(){ for(var i=0; i<iFrameArray.length; i++){ document.getElementById(iFrameArray).style.display = "none"; } } </SCRIPT> </head> <body> <div class="tabBox" style="clear:both;"> <div class="tabArea"> <A class="tab" HREF="" onClick="showhideiframe('iframe1'); return false;">bbc</a> <A class="tab" HREF="" onClick="showhideiframe('iframe2'); return false;">cnn</a> <A class="tab" HREF="" onClick="showhideiframe('iframe3'); return false;">yahoo</a> </div> </div> <div class="tabMain"> <h4 id="title">title</h4> <div class="tabIframeWrapper"> <iframe class="tabContent" name="iframe1" id="iframe1" src="http://www.bbc.com" frameborder="0" width="100%" height="100%" style="display:block" ></iframe> <iframe class="tabContent" name="iframe2" id="iframe2" src="http://www.cnn.com" frameborder="0" width="100%" height="100%" style="display:none" ></iframe> <iframe class="tabContent" name="iframe3" id="iframe3" src="http://news.yahoo.com/" frameborder="0" width="100%" height="100%" style="display:none"></iframe> </div> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
ToonMariner Posted February 16, 2007 Share Posted February 16, 2007 perahps a link to your page would help more. what doesn't work 'right' and how should it work. Quote Link to comment Share on other sites More sharing options...
ScotDiddle Posted February 16, 2007 Share Posted February 16, 2007 DimisD, I went to the site, did a view source, cut-n-paste, try... My test page was missing an included css from the example page: http://www.brainjar.com/common/default.css Once I included the contents of this file into the example page, all worked as advertised. Hope this helps. Scot L. Diddle, Richmond VA Quote Link to comment Share on other sites More sharing options...
DimisD Posted February 17, 2007 Author Share Posted February 17, 2007 Hi there, -> Friend ScotDiddle, i put the default css in the demo page, but again it didn't work????? Am i doing something wrong?? ->Friend ToonMariner, what i want is: the css in the code below to work as the css in the page http://www.brainjar.com/css/tabs/demo.html Can you help?? thank you 2!! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.