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> Link to comment https://forums.phpfreaks.com/topic/38690-css-and-iframes-tab-navigation/ 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. Link to comment https://forums.phpfreaks.com/topic/38690-css-and-iframes-tab-navigation/#findComment-186333 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 Link to comment https://forums.phpfreaks.com/topic/38690-css-and-iframes-tab-navigation/#findComment-186560 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!! Link to comment https://forums.phpfreaks.com/topic/38690-css-and-iframes-tab-navigation/#findComment-187309 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.