易趣的Css标签位置
我在为易趣组装一些CSS标签时遇到了麻烦 eBay(无论如何在英国)现在不允许JS,所以我尝试制作一些CSS。但是,创建选项卡时,定位存在问题。任何在它下面的内容都是重叠的 我尝试过绝对定位和固定定位,但这并不能解决问题 我做这件事已经好几天了,但似乎一事无成 这是你的电话号码 html:易趣的Css标签位置,css,tabs,fixed,absolute,Css,Tabs,Fixed,Absolute,我在为易趣组装一些CSS标签时遇到了麻烦 eBay(无论如何在英国)现在不允许JS,所以我尝试制作一些CSS。但是,创建选项卡时,定位存在问题。任何在它下面的内容都是重叠的 我尝试过绝对定位和固定定位,但这并不能解决问题 我做这件事已经好几天了,但似乎一事无成 这是你的电话号码 html: 下面是一个可能有帮助的解决方法:使用overflow:hidden打开.tab内容并在.tabs上声明高度高度:700px(不太好)。从中找到,请在此提供一些代码,好吗?我尝试过将绝对值改为固定值和相对值,但
下面是一个可能有帮助的解决方法:使用
overflow:hidden代码>打开.tab内容并在.tabs上声明高度高度:700px代码>(不太好)。从中找到,请在此提供一些代码,好吗?我尝试过将绝对值改为固定值和相对值,但两者都没有给我想要的。我已经清除了本例中的.section,不是吗?就在“”编辑我的答案之前,对不起。你是对的,我的第一个答案对你没有帮助。谢谢,伙计,这不是我要找的,因为我有很多不同描述的物品。然而,通过访问英国ebay页面并复制他们的js作品,他们成功地做到了这一点。只需在ebay UK上的登录模板中单击鼠标右键,然后单击“查看框架源代码”(chrome),在该模板中有一个允许的js代码链接到该公司服务器上的js文件。然后我下载了它并更改了部件。这对我有用:)
<div id="wpl_wrapper">
<div id="wpl_store_header">
<div class="hotline">HOTLINE: 123 - 456 789</div>
<div class="clearfix"> </div>
</div>
<div class="main_section">
<h3 class="bar">[[product_title]]</h3>
<table>
<tbody>
<tr>
<td class="primary">
<div id="wpl_main_image">[[product_main_image]]</div>
<div id="wpl_list_images">[[additional_product_images]]</div>
</td>
<td class="wpl_description secondary">
<h2>[[product_title]]</h2>
<p class="long_desc">[[product_excerpt]]</p>
</td>
</tr>
</tbody>
</table>
<div class="section">
<p><span style="color: #ffffff;">.</span></p>
<ul class="tabs">
<li><input id="tab1" type="radio" checked="checked" name="tabs" /> <label for="tab1">Description</label>
<div class="tab-content animated fadeIn" id="tab-content1">The AT-X 116 PRO DX-II 11 16mm f/2.8 Lens for Canon Mount by Tokina is an ultra-wide angle auto-focus zoom lens with a fast f/2.8 aperture throughout the zoom range. The f/2.8 aperture guarantees fast shutter speeds, active auto-focus and minimal blur in low light situations. The AT-X 116 PRO DX-II lens is designed for digital cameras with APS-C-size CMOS or CCD sensors. Its angle of view ranges from 82-104º and it can focus as close as 11.81″ (0.3 m). Nine shutter blades in the aperture help to create soft out-of-focus backgrounds and two Super-Low Dispersion glass elements and two aspheric elements help to achieve this lens’ excellent contrast, sharpness and minimal chromatic aberration. As an update to their AT-X 116 PRO DX, Tokina has improved the multi-layer coatings to minimize light reflection and improve optical performance. The PRO DX-II has a silent focusing motor which is ideal if shooting video with your digital camera.
Tokina’s One-touch Focus Clutch Mechanism allows the photographer to switch between auto-focus and manual focus with a simple push of the focus ring. Snapping it forward into auto-focus and back into manual focus is all that needs be done, there’s no need to adjust the AF/MF switch on the camera body. This is a durable, bright, quality-optic AF lens.
Note! While the lens is designed for APS-C sized sensors it can work on full frame DSLR cameras as well, however some vignetting will occur.</div>
</li>
<li><input id="tab2" type="radio" name="tabs" /> <label for="tab2">What's Included</label>
<div class="tab-content animated fadeIn" id="tab-content2">[[meta_WHATSTAB]]</div>
</li>
<li><input id="tab3" type="radio" name="tabs" /> <label for="tab3">Specification</label>
<div class="tab-content animated fadeIn" id="tab-content3">[[meta_SPECTAB]]</div>
</li>
</ul>
</div>
<p><span style="color: #ffffff;">.</span></p>
<p><span style="color: #ffffff;">. </span></p>
<p><span style="color: #ffffff;"> .</span></p>
<div class="section">
<h3 class="bar">Shipping</h3>
<p><strong>Shipping cost:</strong><br /> <i>replace this text with your shipping information</i></p>
<p><strong>Delivery time:</strong><br /> <i>replace this text with your shipping information</i></p>
</div>
<div class="section">
<h3 class="bar">Payment</h3>
<p>We accept the following payment methods:</p>
<ul>
<li>first payment option</li>
<li>second payment option</li>
<li>third payment option</li>
</ul>
<p>Please contact us if you have any questions.</p>
</div>
<div class="section">
<h3 class="bar">Service</h3>
<p><i>replace this text with your service information</i></p>
</div>
<div class="section">
<h3 class="bar">Recent additions</h3>
<p>[[widget_new_listings]]</p>
</div>
<p><!-- #wpl_wrapper --></p>
/* user colors */
#wpl_store_header .hotline {
color: $hotline_color;
background-color: $hotline_bgcolor;
display: $display_hotline;
}
#wpl_wrapper .wpl_description h2 {
color: $title_color;
}
#wpl_wrapper h3.bar {
color: $section_head_color;
background-color: $section_head_bgcolor_top;
background-image: -webkit-gradient(linear, left top, left bottom, from($section_head_bgcolor_top), to($section_head_bgcolor_bottom));
background-image: -webkit-linear-gradient(top, $section_head_bgcolor_top, $section_head_bgcolor_bottom);
background-image: -moz-linear-gradient(top, $section_head_bgcolor_top, $section_head_bgcolor_bottom);
background-image: -ms-linear-gradient(top, $section_head_bgcolor_top, $section_head_bgcolor_bottom);
background-image: -o-linear-gradient(top, $section_head_bgcolor_top, $section_head_bgcolor_bottom);
background-image: linear-gradient(to bottom, $section_head_bgcolor_top, $section_head_bgcolor_bottom);
}
/* layout */
#wpl_wrapper {
width: 780px;
margin-right: auto;
margin-left: auto;
margin-top: 30px;
margin-bottom: 20px;
padding: 10px;
font-size: 14px;
font-family:Arial,Helvetica,sans-serif;
}
#wpl_store_header {
width:100%;
overflow: hidden;
}
.wpl_description {
padding: 0 30px 10px 0;
}
#wpl_main_image {
height:370px;
width:370px;
}
#wpl_main_image img {
max-height:360px;
max-width:350px;
margin-top:0px;
}
/* image thumbnails - 3 columns */
#wpl_list_images {
text-align:center;
margin-top:10px;
}
#wpl_list_images a {
float:left;
display:block;
width:75px;
height:75px;
border: 1px solid #ccc;
margin-left:10px;
margin-right:10px;
margin-bottom:20px;
padding:12px;
}
#wpl_list_images img {
border:none;
max-height: 75px;
max-width: 75px;
width: auto;
}
#wpl_wrapper h2 {
font-size: 24px;
line-height: 30px;
}
#wpl_wrapper h3.bar {
margin-top: 30px;
margin-bottom: 20px;
padding-left: 10px;
height: 30px;
line-height: 30px;
font-size: 16px;
font-family: Helvetica, Arial, sans-serif;
-webkit-border-radius: $border_radius;
-moz-border-radius: $border_radius;
border-radius: $border_radius;
}
#wpl_store_header .logo {
float: left;
}
#wpl_store_header .hotline {
float: right;
height: 40px;
font-size: 16px;
line-height: 40px;
font-weight: bold;
padding-right: 20px;
padding-left: 20px;
margin-top: 7px;
-webkit-border-radius: $border_radius;
-moz-border-radius: $border_radius;
border-radius: $border_radius;
text-decoration: none;
text-shadow: 2px 2px 4px #713803;
filter: dropshadow(color=#713803, offx=0, offy=1);
}
#wpl_wrapper .clearfix {
clear:both;
}
#wpl_wrapper .main_section .primary{
/*width: 250px;*/
width: 50%;
vertical-align: top;
padding-right: 10px;
text-align: center;
}
#wpl_wrapper .main_section .secondary{
/*width: 490px;*/
width: 50%;
vertical-align: top;
padding-right: 10px;
font-size: 16px;
}
#wpl_wrapper .section p {
padding-left: 10px;
padding-right: 10px;
}
#wpl_wrapper .section big {
font-size: 18px;
font-weight: bold;
}
#wpl_wrapper .alignleft {
float: left;
}
#wpl_wrapper .alignright {
float: right;
}
/* these only apply in preview to override default styles from wp-admin */
body.wp-admin #wpl_wrapper ul {
list-style: disc inside none;
}
body.wp-admin #wpl_wrapper ul li {
padding-left: 2em;
}
/**
* CSS3 tabbed interface
* - based on http://www.sitepoint.com/css3-tabs-using-target-selector/
* - 1st tab is LAST in markup:
* - so it can be styled as active on page load
* - use combination of :target and ~ to override when another tab is clicked
*/
.tabs input[type=radio] {
position: absolute;
top: -9999px;
left: -9999px;
}
.tabs {
width: 650px;
float: none;
list-style: none;
position: relative;
padding: 0;
margin: 5px auto;
}
.tabs li{
float: left;
}
.tabs label {
display: block;
padding: 10px 20px;
border-radius: 2px 2px 0 0;
color: #3777be;
font-size: 16px;
font-weight: normal;
background: rgba(255,255,255,0.2);
cursor: pointer;
position: relative;
top: 3px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.tabs label:hover {
background: rgba(255,255,255,0.5);
top: 0;
}
[id^=tab]:checked + label {
background: #3777be;
color: white;
top: 0;
}
[id^=tab]:checked ~ [id^=tab-content] {
display: block;
}
.tab-content{
z-index: 2;
display: none;
text-align: left;
width: 100%;
font-size: 20px;
line-height: 140%;
padding-top: 5px;
background: #fff;
border: 2px;
padding: 15px;
color: #000;
position: absolute;
top: 53px;
left: 0;
box-sizing: border-box;
-webkit-animation-duration: 0.5s;
-o-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;
animation-duration: 0.5s;
}