Хотелось сделать выдвигающийся блок с обратной связью на главной страничке. Для этого взял меню на аккордионе. В общем ее подогнал почти под свои требования, но есть несколько вопросов.
1) Белая полоска и сам блок, в котором надпись "Написать сообщение" слишком широкие, и выходят за ширину основного блока. Как ее сделать такой же ширины? Ширина основного блока 980px. И убрать белую полоску белую снизу?
.wrapper{
width:980px;
margin:30px auto;
}
.st-accordion{
width:100%;
min-width:270px;
margin: 0 auto;
}
.st-accordion ul li{
height: 100px;
border-bottom: 1px solid #c7deef;
border-top:1px solid #fff;
overflow: hidden;
}
.st-accordion ul li:first-child{
border-top:none;
}
.st-accordion ul li > a{
font-family: 'Josefin Slab',Georgia, serif;
text-shadow: 1px 1px 1px #fff;
font-size: 20px;
display: block;
position: relative;
line-height: 100px;
outline:none;
-webkit-transition: color 0.2s ease-in-out;
-moz-transition: color 0.2s ease-in-out;
-o-transition: color 0.2s ease-in-out;
-ms-transition: color 0.2s ease-in-out;
transition: color 0.2s ease-in-out;
}
.st-accordion ul li > a span{
background: transparent url(../images/down.png) no-repeat center center;
text-indent:-9000px;
width: 26px;
height: 14px;
position: absolute;
top: 50%;
right: -26px;
margin-top: -7px;
opacity:0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.st-accordion ul li > a:hover{
color: #1693eb;
}
.st-accordion ul li > a:hover span{
opacity:1;
right: 10px;
}
.st-accordion ul li.st-open > a{
color: #1693eb;
}
.st-accordion ul li.st-open > a span{
-webkit-transform:rotate(180deg);
-moz-transform:rotate(180deg);
transform:rotate(180deg);
right:10px;
opacity:1;
}
.st-content{
padding: 5px 0px 30px 0px;
}
.st-content p{
font-size: 16px;
font-family: Georgia, serif;
font-style: italic;
line-height: 28px;
padding: 0px 4px 15px 4px;
}
.st-content img{
width:125px;
border-right:1px solid #fff;
border-bottom:1px solid #fff;
}
@media screen and (max-width: 320px){
.st-accordion ul li > a{
font-size:36px;
}
}
2) Когда открывается блок, то отображается только форма, а теги движка почему то на значения не подменяются. Если зайти так: index.php?do=feedback то все работает. Как починить?
<div class="container">
<div class="wrapper">
<div id="st-accordion" class="st-accordion">
<ul>
<li>
<a href="#">Написать сообщение<span class="st-arrow">Открыть или закрыть</span></a>
<div class="st-content">
<table class="tableform">
[not-logged]
<tr>
<td class="label">
Ваше имя:<span class="impot">*</span>
</td>
<td><input type="text" maxlength="35" name="name" class="f_input" /></td>
</tr>
<tr>
<td class="label">
Ваш E-Mail:<span class="impot">*</span>
</td>
<td><input type="text" maxlength="35" name="email" class="f_input" /></td>
</tr>
[/not-logged]
<tr>
<td class="label">
Кому:<span class="impot">*</span>
</td>
<td>{recipient}</td>
</tr>
<tr>
<td class="label">
Тема:<span class="impot">*</span>
</td>
<td><input type="text" maxlength="45" name="subject" class="f_input" /></td>
</tr>
<tr>
<td class="label" valign="top">
Сообщение:
</td>
<td><textarea name="message" style="width: 380px; height: 160px" class="f_textarea" /></textarea></td>
</tr>
[sec_code]<tr>
<td class="label">
Введите код:<span class="impot">*</span>
</td>
<td>
<div>{code}</div>
<div><input type="text" maxlength="45" name="sec_code" style="width:115px" class="f_input" /></div>
</td>
</tr>[/sec_code]
</table>
<div class="fieldsubmit">
<button name="send_btn" class="fbutton" type="submit"><span>Отправить</span></button>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
