Hi, I have got a few questions about the tabcontainer;
* how can I change the tabpanel's background accept draging a panel and making the height and the width 100%? Because when I try the backcolor it doesn't work...
* on the designer, how can I move the tabcontainer, it is stuck in its place , although I made its position absolute. It's so annoying .
* Is when I want to set a css class to the header template It seems like missing something - like the header isn't bold or circuled in a rectangle when it is clicked, i guess i haven't typed the css class so well, but I don't know which properties the tabpanel header has so how can I get the list of the header template prop?
* And one last thing: I fI want all the headers to be in the middle of the container - and not in the left side of the container, how can I set it?
Thank you for any help, it is really important to me.
** To center the headers:
put the tabcontainer in a table or tablecell with horizontalalign="center"
** To style the tabs, you have to use css:
http://forums.asp.net/t/1163303.aspx , hope it helps..
** To change the backcolor:
Same, use css, you can override the default backgrounds by specifying path to images:
Example:
.MyTabs .ajax__tab_tab
{
height:13px;
padding:4px;
margin:0;
background:url(images/Tabs/tab.gif) repeat-x; }
(PS: you cannot set a height to 100%, it may display correctly for you on internet explorer, but other browsers will not make a height 100%)
** For the design view question, I have no clue as I never use design view..
Hi , thanks for the link,
but I have overrided the css class but it still doesn't work.
I have put it in the ajaxControlToolkit/Tabs folder but it still doesn't work - when i set the cssClass-"MyTabs" it doesn't show anything...
Any idea why it doesn't work?
Put the css code in acss file you ref. in your page head section; example:<link rel="stylesheet" href="http://links.10026.com/?link=~/Main.css" />
Main.css example:
/* tabs */
.MyTabs.ajax__tab_header
{
font-family:verdana,tahoma,helvetica;
font-size:11px; color:Black; font-weight:normal;
background:url(QD_images/Tabs/tab-line.gif) repeat-x bottom;
}
.ajax__tab_default .ajax__tab_outer {display:-moz-inline-box;display:inline-block}
.ajax__tab_default .ajax__tab_inner {display:-moz-inline-box;display:inline-block}
.ajax__tab_default .ajax__tab_tab {margin-right:4px;overflow:hidden;text-align:center;cursor:pointer;display:-moz-inline-box;display:inline-block;}
.MyTabs.ajax__tab_outer
{
padding-right:0px;
background:url(QD_images/Tabs/tab-right.gif) no-repeat right;
height:22px;
}
.MyTabs.ajax__tab_inner
{
padding-left:3px;
background:url(QD_images/Tabs/tab-left.gif) no-repeat;
}
.MyTabs.ajax__tab_tab
{
height:13px;
padding:4px;
margin:0;
background:url(QD_images/Tabs/tab.gif) repeat-x;
}
.MyTabs.ajax__tab_hover .ajax__tab_outer
{
background:url(QD_images/Tabs/tab-hover-right.gif) no-repeat right;
}
.MyTabs.ajax__tab_hover .ajax__tab_inner
{
background:url(QD_images/Tabs/tab-hover-left.gif) no-repeat;
}
.MyTabs.ajax__tab_hover .ajax__tab_tab
{
background:url(QD_images/Tabs/tab-hover.gif) repeat-x;
}
.MyTabs.ajax__tab_active .ajax__tab_outer
{
background:url(QD_images/Tabs/tab-active-right.gif) no-repeat right;
}
.MyTabs.ajax__tab_active .ajax__tab_inner
{
background:url(QD_images/Tabs/tab-active-left.gif) no-repeat;
}
.MyTabs.ajax__tab_active .ajax__tab_tab
{
background:url(QD_images/Tabs/tab-active.gif) repeat-x;
}
.MyTabs.ajax__tab_body
{
font-family:verdana,tahoma,helvetica;
font-size:10pt;
border:1px solid #000000;
border-top:0;
padding:0px;
background-color:#cccccc;
}
And on your tabcontainer:
<ajaxToolkit:TabContainer runat="server" ID="myTabContainer"CssClass="MyTabs">
Oh man it works great!!! Thaaaaaaaaaaaaaaaaankkkkss!!
Just one more quetion, if you know how or where can I get nice and pretty pics for the headers?
Such as in this site or you know... I don't howe to create one... I guess it's not so easy, but maybe you know any site where I can find some pics for the headers- like the ajax__tab_outer ,.ajax__tab_header ,ajax__tab_hover , etc...
Thank you for your help, it was really important for me to make these tabs fine.
Not that I know of.. If you want entirly new tabs, I recommend:
- photoshop + editting existings tab pictures, keep size...
- photoshop, editting css file (trickier)
Looks like I'm gonna stay with the standarts...since I don't have any idea how to use photo shop. Thanks Anyway :-)
Oh and I have a little problem, concerning the tabcontrol - I have a master page - mp.master, and a page - default, which has the mp as a master. In that page(default) I have a tab control. There I want to add the line that you wrote: <link rel=stylesheet href=TabControlTabs.css> but there is no head in the default page - there is a content - because of the master. So where should I add the line?
In the master page I guess..
(You can have several css files..)
Here is a simple way to put images as tab headers:
<%@. Page Language="VB" AutoEventWireup="false" CodeFile="tabs_test.aspx.vb" Inherits="tabs_test" %
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<link rel="stylesheet" href="http://links.10026.com/?link=~/Main.css" />
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server" ID="ScriptManager1" EnablePartialRendering="true"></asp:ScriptManager>
<div>
<ajaxToolkit:TabContainer runat="server" ID="testingTab" CssClass="MyTabs2">
<ajaxToolkit:TabPanel runat="server" ID="test1">
<HeaderTemplate>
<asp:Image runat="server" ID="erf" ImageUrl="~/Image2.png" Width="38" Height="37" style="overflow:visible;" />
</HeaderTemplate>
<ContentTemplate>
test1
</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel runat="server" ID="TabPanel1">
<HeaderTemplate>
<asp:Image runat="server" ID="Image1" ImageUrl="~/Image1.gif" Width="38" Height="37" style="overflow:visible;" />
</HeaderTemplate>
<ContentTemplate>
test2
</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel runat="server" ID="TabPanel2">
<HeaderTemplate
</HeaderTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
</div>
</form>
</body>
</html>
css file:
/* tabs */
.MyTabs2 .ajax__tab_header
{
height:40px;
font-family:verdana,tahoma,helvetica;
font-size:11px; color:Black; font-weight:normal;
background:url(appImages/Tabs/tab-line.gif) repeat-x bottom;
}
.MyTabs2 .ajax__tab_outer
{
height:40px;
padding-right:0px;
}
.MyTabs2 .ajax__tab_inner
{
height:40px;
padding-left:3px;
}
.MyTabs2 .ajax__tab_tab
{
height:40px;
padding:4px;
margin:0;
}
.MyTabs2 .ajax__tab_hover .ajax__tab_outer
{
height:40px;
}
.MyTabs2 .ajax__tab_hover .ajax__tab_inner
{
}
.MyTabs2 .ajax__tab_hover .ajax__tab_tab
{
height:40px;
}
.MyTabs2 .ajax__tab_active .ajax__tab_outer
{
height:40px;
}
.MyTabs2 .ajax__tab_active .ajax__tab_inner
{
height:40px;
}
.MyTabs2 .ajax__tab_active .ajax__tab_tab
{
height:40px;
}
.MyTabs2 .ajax__tab_body
{
font-family:verdana,tahoma,helvetica;
font-size:10pt;
border:1px solid #000000;
border-top:0;
padding:0px;
background-color:#cccccc;
}
ok It works.
Thank you very very very much!!!
No problem..! This forum helped me a lot to get started with the toolkit, feeding it back how I can..!
Just in case you didn't notice,
.MyTabs2 .ajax__tab_body
{
font-family:verdana,tahoma,helvetica;
font-size:10pt;
border:1px solid #000000;
border-top:0;
padding:0px;
background-color:#cccccc;
}
This is where you can set the styles for the tab contents (like background color mentioned in first post)
fantastic!!.
I have a qstn:
Can I move freely the position of the tab control? The <div align=center> just put the headers in the center right? However, I'm interested in changing the left and the top as I wish. I'he tried it in the div but it didn't work.
When I change the width the left is automatically been changed - but I can't control it.
Any ideas how to change the left and the top of the tab control as I wish?
You mean the postition of the whole tabcontrol? Not sure I understood..
<ajaxToolkit:TabContainer runat="server" ID="testingTab" CssClass="MyTabs2"style="position:absolute; left:100px;top:0px;">
Is that what you mean? If so, I can't say I recommend absolute positionning, but that's a personal preference, hehe.. I put everything in tables to align stuff..
Got it . Yeah that's what I meant. Thanks! :-)
Good evening,
I want to set an <hr> through the code behind.
I use the Literal and set in its text the <hr>, however I want to change the tag's top and align - that's the style right?
So my qstns are: Can I do it somehow?(through the code behind)
If so, how can I do it --> when I set the literal's text: l.Text="<hr style="........">"; It gives errors because of the quataition marks, and if I set the ' ' instead of " " it gives an error of too many literals bla bla bla... So how can I set the <hr> style via the code behind only (because it is created during the runtime)?
oh and I almost forgot, I also want to set its color some how - how can I do it? and I want it to be visible - sometimes it is always with its default color unless I change its height , but I want it to stay witht he default height.
Thanks for any help.
No comments:
Post a Comment