با سلام.
یک منویی هست به صورت accordion.
مشکلم اینه که می خواهم هر قسمتی که باز میشه ، ارتفاع اون قسمت به اندازه تمام عناصر باشه. بزرگ و کوچک بشه.
یعنی heghit ثابت نباشد.
فایل html به صورت زیر می باشد:
<head runat="server">
<title></title>
<link href="StyleSheet1.css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="contain">
<div class="accordion">
<div id="tab-1">
<a href="#tab-1" class="tab">Option One</a>
<div class="content">
<span>hdcgdrtgdr</span>
<span>hdcgdrtgdr</span>
<span>hdcgdrtgdr</span>
<span>hdcgdrtgdr</span>
<span>hdcgdrtgdr</span>
</div>
</div>
<div id="tab-2">
<a href="#tab-2" class="tab">Option Two</a>
<div class="content">
<span>hdcgdrtgdr</span>
<div>hdcgdrtgdr</div>
<div>hdcgdrtgdr</div>
<div>hdcgdrtgdr</div>
<div>hdcgdrtgdr</div>
<div>hdcgdrtgdr</div>
<div>hdcgdrtgdr</div>
</div>
</div>
<div id="tab-3">
<a href="#tab-3" class="tab">Option Three</a>
<div class="content">
<span>hdcgdrtgdr</span>
</div>
</div>
<div id="tab-4">
<a href="#tab-4" class="tab">Option Three</a>
<div class="content">
<span>hdcgdrtgdr</span>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
و فایل css شامل محتویات زیر است:
#contain
{
margin-right: 20px;
}
.accordion,.accordion div,.accordion h1,.accordion p,.accordion a,.accordion img,.accordion span,.accordion em,.accordion ul,.accordion li {
margin: 0;
padding: 0;
border: none;
}
/* Accordion Layout Styles */
.accordion {
width: 500px;
padding: 1px 5px 5px 5px;
background: -webkit-linear-gradient(top, #ffffff 0%, #c8c4ca 100%);
background: -moz-linear-gradient(top, #ffffff 0%, #c8c4ca 100%);
background: -o-linear-gradient(top, #ffffff 0%, #c8c4ca 100%);
background: -ms-linear-gradient(top, #ffffff 0%, #c8c4ca 100%);
background: linear-gradient(top, #ffffff 0%, #c8c4ca 100%);
-webkit-box-shadow: 0px 1px 0px rgba(255,255,255, .05);
-moz-box-shadow: 0px 1px 0px rgba(255,255,255, .05);
box-shadow: 0px 1px 0px rgba(255,255,255, .05);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
.accordion .tab {
padding-right:12px;
display: block;
height: 35px;
margin-top: 4px;
padding-left: 20px;
text-decoration: none;
color: #ee3;
text-shadow: 1px 1px 0px rgba(0,0,0, .2);
font-size:12px;
padding-top:5px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #6c6e74; /* Old browsers */
background: -webkit-linear-gradient(top, #6c6e74 0%, #4b4d51 100%);
background: -moz-linear-gradient(top, #6c6e74 0%, #4b4d51 100%);
background: -o-linear-gradient(top, #6c6e74 0%, #4b4d51 100%);
background: -ms-linear-gradient(top, #6c6e74 0%, #4b4d51 100%);
background: linear-gradient(top, #6c6e74 0%, #4b4d51 100%); /* W3C */
-webkit-box-shadow: 0px 1px 0px rgba(0,0,0, .1), inset 0px 1px 0px rgba(255,255,255, .1);
-moz-box-shadow: 0px 1px 0px rgba(0,0,0, .1), inset 0px 1px 0px rgba(255,255,255, .1);
box-shadow: 0px 1px 0px rgba(0,0,0, .1), inset 0px 1px 0px rgba(255,255,255, .1);
}
.accordion .tab:hover,.accordion div:target .tab {
color: #2b3b06;
text-shadow: 0px 1px 0px rgba(255,255,255, .15);
background: #a5cd4e; /* Old browsers */
background: -webkit-linear-gradient(top, #a5cd4e 0%, #6b8f1a 100%);
background: -moz-linear-gradient(top, #a5cd4e 0%, #6b8f1a 100%);
background: -o-linear-gradient(top, #a5cd4e 0%, #6b8f1a 100%);
background: -ms-linear-gradient(top, #a5cd4e 0%, #6b8f1a 100%);
background: linear-gradient(top, #a5cd4e 0%, #6b8f1a 100%); /* W3C */
-webkit-box-shadow: 1px 1px 1px rgba(0,0,0, .3), inset 1px 1px 1px rgba(255,255,255, .45);
-moz-box-shadow: 1px 1px 1px rgba(0,0,0, .3), inset 1px 1px 1px rgba(255,255,255, .45);
box-shadow: 1px 1px 1px rgba(0,0,0, .3), inset 1px 1px 1px rgba(255,255,255, .45);
}
.accordion div .content {
display: none;
margin: 5px 0;
}
.accordion:hover .content {
height:auto;
}
.accordion div:target .content {
display: block;
height:1000px;
overflow:hidden;
height:auto;
max-height: 400px;
}
.accordion > div {
height: 35px;
overflow: hidden;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.accordion > div:target {
height: 400px;
}
/* Accordion Content Styles */
.accordion .content h1 {
color: white;
font: 18px/32px Arial, sans-serif;
}
.accordion .content p {
margin: 10px 0;
color: white;
font: 11px/16px Arial, sans-serif;
}
.accordion .content div {
font: italic 11px/12px Georgia, Arial, sans-serif;
color: #4f4f4f;
overflow: hidden;
}
.accordion .content span {
font: italic 11px/12px Georgia, Arial, sans-serif;
color: #4f4f4f;
height:1000px;
}
.accordion .content em.bullet {
width: 5px;
height: 5px;
margin: 0 5px;
background: #6b8faa;
display: inline-block;
-webkit-box-shadow: inset 1px 1px 1px rgba(255,255,255, 0.4);
-moz-box-shadow: inset 1px 1px 1px rgba(255,255,255, 0.4);
box-shadow: inset 1px 1px 1px rgba(255,255,255, 0.4);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.accordion .content ul li {
list-style: none;
float: left;
margin: 5px 10px 5px 0;
}
.accordion .content img {
-webkit-box-shadow: 2px 2px 6px rgba(0,0,0, .5);
-moz-box-shadow: 2px 2px 6px rgba(0,0,0, .5);
box-shadow: 2px 2px 6px rgba(0,0,0, .5);
}
لطفاً راهنمایی کنید.
فایلتون ضمیمه نشده
لطفا با پسوند ZIP یا RAR قرار دهید
با تشکر و سپاس از پاسخ شما
در فایلی که ارسال کردم هنگامی که از یک قسمت به قسمت دیگری می رویم یک transition اجرا می شود که باعث زیبا سازی شده است.
در فایل شما که آن را تصحیح کرده اید ، transition از بین رفته است.
چطور می توان آن را اصلاح کرد؟
با تشکر
هیچ کاربری تا کنون از این پست تشکر نکرده است
با ما تماس بگیرید تا در این مسیر همراهتان باشیم :)
