سلام دوستان
کد لینک زیر
http://techbrij.com/stylish-asp-net-wizard-control-horizontal-sidebar-on-top
میخوام این راست چین بشه
با کد استایلش هر کاری کردم راست پینش خوب در نمیاد که به همین صورت عکی برعکسش بشه!!!!!!!!!!
کسی میتونه وقت بزاره ؟؟؟؟؟؟؟؟؟؟؟
خیلی ضروریه واسم...
#Wizard1{
width:800px;
margin:40px auto;
}
#wizHeader li .prevStep
{
background-color: #669966;
}
#wizHeader li .prevStep:after
{
border-left-color:#669966 !important;
}
#wizHeader li .currentStep
{
background-color: #C36615;
}
#wizHeader li .currentStep:after
{
border-left-color: #C36615 !important;
}
#wizHeader li .nextStep
{
background-color:#C2C2C2;
}
#wizHeader li .nextStep:after
{
border-left-color:#C2C2C2 !important;
}
#wizHeader
{
list-style: none;
overflow: hidden;
font: 18px Helvetica, Arial, Sans-Serif;
margin: 0px;
padding: 0px;
}
#wizHeader li
{
float: right;
}
#wizHeader li a
{
color: white;
text-decoration: none;
padding: 10px 0 10px 55px;
background: brown; /* fallback color */
background: hsla(34,85%,35%,1);
position: relative;
display: block;
float: right;
margin-right:35px;
}
#wizHeader li a:after
{
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */
border-bottom: 50px solid transparent;
border-right: 30px solid hsla(34,85%,35%,1);
position: absolute;
top: 50%;
margin-top: -50px;
right: 100%;
z-index: 2;
}
#wizHeader li a:before
{
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-right: 30px solid white;
position: absolute;
top: 50%;
margin-top: -50px;
margin-right: 15px;
right: 100%;
z-index: 1;
}
#wizHeader li:first-child a
{
padding-left: 10px;
}
#wizHeader li:last-child
{
padding-right: 50px;
}
#wizHeader li a:hover
{
background: #FE9400;
}
#wizHeader li a:hover:after
{
border-left-color: #FE9400 !important;
}
.content
{
height:150px;
padding-top:75px;
text-align:center;
background-color:#F9F9F9;
font-size:48px;
}
</style>
</head>
<body dir="rtl" style="font-family: WebYekan !important;">
<form id="form1" runat="server">
<asp:Wizard ID="Wizard1" runat="server" DisplaySideBar="false">
<WizardSteps>
<asp:WizardStep ID="WizardStep1" runat="server" Title="Step 1">
<div class="content">This is Step 1</div>
</asp:WizardStep>
<asp:WizardStep ID="WizardStep2" runat="server" Title="Step 2">
<div class="content">This is Step 2</div>
</asp:WizardStep>
<asp:WizardStep ID="WizardStep3" runat="server" Title="Step 3">
<div class="content">This is Step 3</div>
</asp:WizardStep>
<asp:WizardStep ID="WizardStep4" runat="server" Title="Step 4">
<div class="content">This is Step 4</div>
</asp:WizardStep>
<asp:WizardStep ID="WizardStep5" runat="server" Title="Step 5">
<div class="content">This is Step 5</div>
</asp:WizardStep>
</WizardSteps>
<HeaderTemplate>
<ul id="wizHeader">
<asp:Repeater ID="SideBarList" runat="server">
<ItemTemplate>
<li><a class="<%# GetClassForWizardStep(Container.DataItem) %>" title="<%#Eval("Name")%>">
<%# Eval("Name")%></a> </li>
</ItemTemplate>
</asp:Repeater>
</ul>
</HeaderTemplate>
</asp:Wizard>
</form>
پیشاپیش از کمکتون ممنونم...
کد css زیر درست شده و به صورت راست به چپ نمایش میده، با کد css خودتون جا بجا کنید:
body{ direction: rtl;}
#wizHeader li .prevStep
{
background-color: #669966;
}
#wizHeader li .prevStep:after
{
border-right-color:#669966 !important;
}
#wizHeader li .currentStep
{
background-color: #C36615;
}
#wizHeader li .currentStep:after
{
border-right-color: #C36615 !important;
}
#wizHeader li .nextStep
{
background-color:#C2C2C2;
}
#wizHeader li .nextStep:after
{
border-right-color:#C2C2C2 !important;
}
#wizHeader
{
list-style: none;
overflow: hidden;
font: 18px Helvetica, Arial, Sans-Serif;
margin: 0px;
padding: 0px;
}
#wizHeader li
{
float: right;
}
#wizHeader li a
{
color: white;
text-decoration: none;
padding: 10px 55px 10px 0;
background: brown; /* fallback color */
background: hsla(34,85%,35%,1);
position: relative;
display: block;
float: right;
}
#wizHeader li a:after
{
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */
border-bottom: 50px solid transparent;
border-right: 30px solid hsla(34,85%,35%,1);
position: absolute;
top: 50%;
margin-top: -50px;
right: 100%;
z-index: 2;
}
#wizHeader li a:before
{
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-right: 30px solid white;
position: absolute;
top: 50%;
margin-top: -50px;
margin-right: 1px;
right: 100%;
z-index: 1;
}
#wizHeader li:first-child a
{
padding-right: 10px;
}
#wizHeader li:last-child
{
padding-left: 50px;
}
#wizHeader li a:hover
{
background: #FE9400;
}
#wizHeader li a:hover:after
{
border-right-color: #FE9400 !important;
}
.content
{
height:150px;
padding-top:75px;
text-align:center;
background-color:#F9F9F9;
font-size:48px;
}
هیچ کاربری تا کنون از این پست تشکر نکرده است
با ما تماس بگیرید تا در این مسیر همراهتان باشیم :)