راست چین کردن [بایگانی]

el.programmer

پنج شنبه 20 خرداد 1395, 20:13 عصر

سلام دوستان
کد لینک زیر
http://techbrij.com/stylish-asp-net-wizard-control-horizontal-sidebar-on-top

140788

میخوام این راست چین بشه
با کد استایلش هر کاری کردم راست پینش خوب در نمیاد که به همین صورت عکی برعکسش بشه!!!!!!!!!!
کسی میتونه وقت بزاره ؟؟؟؟؟؟؟؟؟؟؟
خیلی ضروریه واسم...

#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>

پیشاپیش از کمکتون ممنونم...

endless_kh

جمعه 21 خرداد 1395, 00:00 صبح

سلام
css زیر رو امتحان کنید

#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;

}