[英]Accordian menu (when clicked) affects position of an image in the next table cell
我正在使用在CSS资源页面上找到的手风琴菜单。
菜单工作正常-唯一的问题是:
我在菜单旁边有一个图像(图像和手风琴菜单位于其各自的表格单元格中),每当单击手风琴菜单时,图像都会随着手风琴效果而向下移动。
我基本上需要图像保持在原处(中间居中),并且每当单击手风琴菜单时都不要四处移动。
我对HTML几乎没有基础知识,这个问题使我很生气:(
希望有人可以帮助我-预先感谢您!
这是CSS:
.container {
width:360px;
font-family:'Varela Round', Arial, Helvetica, sans-serif;
margin:0 auto;
padding:0 0 20px;
}
.accordion {
font-size:13px;
border-radius:10px;
width:360px;
padding:10px;
background:none;
}
.accordion ul {
list-style:none;
margin:0;
padding:0;
}
.accordion li {
margin:0;
padding:0;
}
.accordion [type=radio], .accordion [type=checkbox] {
display:none;
}
.accordion label {
display:block;
font-size:13px;
line-height:16px;
background:#10967a;
color:#ffffff;
cursor:pointer;
text-transform:uppercase;
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
}
.accordion ul li label:hover, .accordion [type=radio]:checked ~ label, .accordion [type=checkbox]:checked ~ label {
background:#39bc86;
color:#FFF;
}
.accordion .content {
padding:0 10px;
overflow:hidden;
border:1px solid #fff; /* Make the border match the background so it fades in nicely */
background:#FFFFFF;
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
}
.accordion p {
color:#333;
margin:0 0 10px;
}
.accordion h3 {
color:#542437;
padding:0;
margin:10px 0;
}
/* Vertical */
.vertical ul li {
overflow:hidden;
margin:0 0 1px;
}
.vertical ul li label {
padding:8px;
}
.vertical [type=radio]:checked ~ label, .vertical [type=checkbox]:checked ~ label {
border-bottom:0;
}
.vertical ul li .content {
height:0px;
border-top:0;
}
.vertical [type=radio]:checked ~ label ~ .content, .vertical [type=checkbox]:checked ~ label ~ .content {
height:250px;
}
这是HTML:
<body>
<table width="1010" border="0" background="images/bg.jpg">
<tr>
<td height="380" align="left" valign="top"><table width="1010" border="0">
<tr>
<td width="56"> </td>
<td width="320"><table width="100%" border="1">
<tr>
<td><img src="../images/pdt_01.jpg" width="181" height="205" /></td>
</tr>
</table></td>
<td width="360" valign="top"><div class="container">
<div class="accordion vertical">
<ul>
<li>
<input type="checkbox" id="checkbox-1" name="checkbox-accordion" />
<label for="checkbox-1"><strong><span class="text">ADDRESSES</span></strong></label>
<div class="content">
<table width="100%" border="0" cellpadding="0" cellspacing="8">
<tr>
<td valign="top" class="list">6767 S Clinton St</td>
</tr>
<tr>
<td valign="top" class="list">16910 E Quincy Ave</td>
</tr>
<tr>
<td valign="top" class="list">5010 Founders Pkwy</td>
</tr>
<tr>
<td valign="top" class="list">9390 W Cross Dr</td>
</tr>
<tr>
<td valign="top" class="list">1985 Sheridan Blvd</td>
</tr>
<tr>
<td valign="top" class="list">1630 E Cheyenne Mountain Blvd</td>
</tr>
</table>
</div>
</li>
<li>
<input type="checkbox" id="checkbox-2" name="checkbox-" />
<label for="checkbox-2"><strong><span class="text"><a href="3" target="_blank">MORE</a></span></strong></label>
</li>
</ul>
</div>
</div></td>
<td width="350"> </td>
</tr>
</table></td>
</tr>
</table>
</body>
您还需要其他信息吗?
正如您所说的图像是valign =“ middle”,所以只要菜单扩展表的高度也随着菜单的增加而B'coz正常工作,并且图像在中间进行调整。
但是您可以尝试在保存图像表的“ td”中尝试使用valign="top"
。 像下面
<td width="320" valign="top">
<table width="100%" border="1">
<tr>
<td><img src="../images/pdt_01.jpg" width="181" height="205" /></td>
</tr>
</table>
</td>
如果不需要使其变为valign =“ middle”,则可以使用它...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.