 |
|
|
| View previous topic :: View next topic |
| Author |
Message |
LetsAsk
Joined: 02 Apr 2008
Posts: 6
|
 Posted: Wed Apr 02, 2008 9:28 pm Frame with Tabs |
 |
|
|
hello friends,
I have 2 frames on my page with top frame having 3 tabs and some links in each tab.
My problem is , when I click on first tab it shows its target page in bottom frame, but when I click on second or third tab it doesn't display target page in it(bottom frame).
Further, when I click one of the links of 2nd or 3rd tab, it shows target page in bottom frame.
My code in top frame is like this,
*******************************
<ul id="producttabs" class="shadetabs">
<li><a href="personalcare.html" target="bottomframe" rel="product1" class="selected">Personal Care</a></li>
<li><a href="homecare.html" target="bottomframe" rel="product2">Home Care</a></li>
<li><a href="industrial.html" target="bottomframe" rel="product3">Industrial</a></li>
***********************************
Thanks in advance
|
|
Corey Bryant
Joined: 15 May 2004
Posts: 8131
Location: Castle Rock CO USA
|
|
LetsAsk
Joined: 02 Apr 2008
Posts: 6
|
| Posted: Thu Apr 03, 2008 9:22 pm |
|
|
|
Yes Corey,
Yes I have My frames named in a page.
See this
| Code: |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<frameset rows="110,*" frameborder="no" border="0" framespacing="0">
<frame src="top.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" />
<frame src="personalcare.html" name="bottomframe" id="bottomframe" />
</frameset>
<noframes><body>
</body>
</noframes></html>
|
But point to notice is that, if I remove 'rel' attribute from it (Code of first post), it works fine.
But I want rel to be there so I can have my links on tabs.
BTW Thanks for your reply. |
|
Corey Bryant
Joined: 15 May 2004
Posts: 8131
Location: Castle Rock CO USA
|
| Posted: Fri Apr 04, 2008 8:21 am |
|
|
|
I don't think that the product1, etc are "normal" values for the rel attribute and the browsers might be interpreting it differently.
You should consider not using frames actually since they are being deprecated.
_________________
Corey
Hosting Solutions | Mile High Merchant Accounts | Expression Web Blog |
|
LetsAsk
Joined: 02 Apr 2008
Posts: 6
|
| Posted: Fri Apr 04, 2008 9:13 pm |
|
|
|
Corey,
I agree with you, but I had not very much idea when i started developing site in HTML.
Would you please show me other ways such that performance doesn't get affected at load time.
But as I told you removing rel from it works fine and unfortunately I need it. |
|
Corey Bryant
Joined: 15 May 2004
Posts: 8131
Location: Castle Rock CO USA
|
|
LetsAsk
Joined: 02 Apr 2008
Posts: 6
|
| Posted: Sun Apr 06, 2008 8:58 pm |
|
|
|
Hi Corey,
I 'll try to do it in different way.
Thanks for your guidance |
|
webdesignerts
Joined: 07 Apr 2008
Posts: 5
|
| Posted: Mon Apr 07, 2008 9:26 pm Hi All |
|
|
|
I have problem frame in html. Pls help me. My Frame page is divided as 3 rows and 2 columns. first rows have one page and second rows is 2 column which include navigator and content page. Third rows is only one page.
This is my page style.
I want to make this whole page is centre when using anything windows. eg. 800*600, 1024*768 and etc..
I can make first row and third rows to be centre.
but i can't do second row which include two columns to be centre. Pls help me.
Notice: I am only using <div> and Css.
Thak you for your time!
with best regards,
WB Designer
 |
|
sticks464
Joined: 31 Dec 2006
Posts: 752
|
| Posted: Tue Apr 08, 2008 6:35 am |
|
|
|
LetsAsk
| Quote: |
| I 'll try to do it in different way. |
Give this a try since you seem to like tabs so well. Color ar easily changed
| Code: |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
/* Tabbed Menu */
dl {padding:0; margin-right:15px; float:right;}
dt {display:none;}
dd {float:left; margin:0; padding:0; text-align:center;}
dd a, dd a:visited {text-decoration:none; color:#000; float:left;}
dd span {float:left; border-bottom:1px solid #000; cursor:pointer;}
dd .single {height:1.7em;}
dd .double {height:3em;}
dd span.side {width:5px; float:left; border-top:1px solid #fff;;
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow: hidden;
/* */
}
dd span.side b.p1 {width:0; height:1px; float:left; margin-left:3px; border-left:2px solid #000; font-size:1px;
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow: hidden;
/* */
}
* html dd span.side b.p1 {width:2px; w\idth:0;}
dd span.side b.p2 {width:2px; height:1px; float:left; margin-left:2px; background:#d4d8bd; border-left:1px solid #000; font-size:1px;
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow: hidden;
/* */
}
* html dd span.side b.p2 {width:3px; w\idth:2px;}
dd span.side b.p3 {width:3px; height:2px; float:left; margin-left:1px; background:#d4d8bd; border-left:1px solid #000; font-size:1px;
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow: hidden;
/* */
}
* html dd span.side b.p3 {width:4px; w\idth:3px;}
dd span.side b.p4 {width:4px; float:left; background:#d4d8bd; border-left:1px solid #000;
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow: hidden;
/* */
}
* html dd span.side b.p4 {width:5px; w\idth:4px;}
dd span.side b.p5 {width:0; height:1px; float:left; margin-right:3px; border-right:2px solid #000; font-size:1px;
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow: hidden;
/* */
}
* html dd span.side b.p5 {width:2px; w\idth:0;}
dd span.side b.p6 {width:2px; height:1px; float:left; margin-right:2px; background:#d4d8bd; border-right:1px solid #000; font-size:1px;
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow: hidden;
/* */
}
* html dd span.side b.p6 {width:3px; w\idth:2px;}
dd span.side b.p7 {width:3px; height:2px; float:left; margin-right:1px; background:#d4d8bd; border-right:1px solid #000; font-size:1px;
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow: hidden;
/* */
}
* html dd span.side b.p7 {width:4px; w\idth:3px;}
dd span.side b.p8 {width:4px; float:left; background:#d4d8bd; border-right:1px solid #000;
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow: hidden;
/* */
}
* html dd span.side b.p8 {width:5px; w\idth:4px;}
dd.low {margin-top:1.3em;}
* html dd.low {margin-top:1.2em;}
dd span.mid {border-top:1px solid #000; padding:0 5px; background:#d4d8bd;}
dd a:hover {border:0;}
dd a:hover span.mid, dd a:hover span.side b {background:#949e7c; color:#fff;}
dd a:hover span {border-bottom:1px solid #949e7c;}
.clear {clear:both;}
/* Page Layout */
body {
font-family:Arial, Helvetica, sans-serif;
font-size:110%;
color:#000;
}
* {
margin:0;
padding:0;
}
/* commented backslash hack \*/
html, body{height:100%;}
/* end hack */
* html #container{
height:100%;
width:750px;/* box model hack for ie5.+*/
w\idth:748px
}
html, body, #container{
min-height: 100%;
height: 100%;
}
html>body, html>body #container {
height: auto;
}
#container {
width:750px;
margin:0 auto;
}
#logo {
height:120px;
background:url(images/green.jpg) no-repeat;
}
#nav {
height:24px;
}
#content {
height:100%;
background:#949e7c;
padding:10px;
}
.clear {
height:10px;
clear:both;
}
#footer {
height:42px;
text-align:center;
font-size:80%;
}
</style>
</head>
<body>
<div id="container">
<div id="logo">Logo Here</div>
<div id="nav">
<dl class="menu">
<dt>title</dt>
<dd>
<a href="#nogo">
<span class="side single">
<b class="p1"></b>
<b class="p2"></b>
<b class="p3"></b>
<b class="p4 single"></b>
</span>
<span class="mid single">Personal Care</span>
<span class="side single">
<b class="p5"></b>
<b class="p6"></b>
<b class="p7"></b>
<b class="p8 single"></b>
</span></a>
</dd>
<dd><a href="#nogo"><span class="side single"><b class="p1"></b><b class="p2"></b><b class="p3"></b><b class="p4 single"></b></span><span class="mid single">Home Care</span><span class="side single"><b class="p5"></b><b class="p6"></b><b class="p7"></b><b class="p8 single"></b></span></a></dd>
<dd><a href="#nogo"><span class="side single"><b class="p1"></b><b class="p2"></b><b class="p3"></b><b class="p4 single"></b></span><span class="mid single">Industrial</span><span class="side single"><b class="p5"></b><b class="p6"></b><b class="p7"></b><b class="p8 single"></b></span></a></dd>
<dd><a href="#nogo"><span class="side single"><b class="p1"></b><b class="p2"></b><b class="p3"></b><b class="p4 single"></b></span><span class="mid single">Link 4</span><span class="side single"><b class="p5"></b><b class="p6"></b><b class="p7"></b><b class="p8 single"></b></span></a></dd>
</dl>
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
<p>Sed et lectus in massa imperdiet tincidunt. Praesent neque tortor, sollicitudin non, euismod a, adipiscing a, est. Mauris diam metus, varius nec, faucibus at, faucibus sollicitudin, lectus. Nam posuere felis ac urna. Vestibulum tempor vestibulum urna. Nullam metus. Vivamus ac purus. Nullam interdum ullamcorper libero. Morbi vehicula imperdiet justo. Etiam mollis fringilla ante. Donec et dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam mi libero, luctus nec, blandit ac, rutrum ac, lectus.</p>
</div>
<div class="clear"></div>
<div id="footer">
© Copywrite Information
</div>
</div>
</body>
</html> |
|
|
LetsAsk
Joined: 02 Apr 2008
Posts: 6
|
| Posted: Thu Apr 10, 2008 9:38 pm |
|
|
|
Dude,
It doesn't give selection effect on tab.
Well can you show me how to change contents of two frames while clicking on a tab?
Thanks for your efforts. |
|
Corey Bryant
Joined: 15 May 2004
Posts: 8131
Location: Castle Rock CO USA
|
|
|
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
|
|
|
|
|
Forum Home
FAQ
Search
Memberlist
Register
Profile
Log in to check your private messages
Log in
