调整窗口大小时重叠滑块图像

时间:2014-02-15 17:37:37

标签: html css wordpress responsive-design

调整窗口大小以检查我正在处理的Wordpress网站的响应能力时,我注意到当向上移动到更大的窗口大小时,标题中的滑块突然重叠在其下方的内容之上。将窗口调整为较小尺寸后,它会自行更正。这是什么交易?

这是滑块及其下方内容的代码:

#slideshow_cont { width: 646px; float: left; margin-right: 0px; margin-bottom: 10px; position: relative; }
#slideshow { width: 646px; min-height: 280px; }
.slide_box { display: none; position: absolute; top: 0; left: 0; }
.slide_box_first { display: block; width: 646px; height: 280px;}
.slide_box img { display: block; width: 646px; height: 280px; }
.slide_box iframe { display: block; width: 646px; height: 280px; }
.slide_box_title { padding: 8px 10px; font-size: 20px; font-family: 'Open Sans Condensed', sans-serif; font-weight: 300; text-transform: uppercase; background-color: #fff; height: 23px; }
.slide_box_title a { color: #222; text-decoration: none; }
.slide_prev { position: absolute; top: 132px; left: 0; cursor: pointer; z-index: 30; }
.slide_next { position: absolute; top: 132px; right: 0; cursor: pointer; z-index: 30; }
.home_box { float: left; width: 313px; background-color: #fff; margin-bottom: 0px; margin-right: 0px; }
.home_box img, 
.home_box iframe { width: 313px; height: 196px; }
.home_box_last { margin-right: 0; }
.home_box_cont { padding: 5px 5px; text-align: center; }
.home_box_cont h3 { font-size: 20px; margin: 0px 0 10px; font-family: 'Open Sans Condensed', sans-serif; font-weight: 300; text-transform: uppercase; }
.home_box_cont h3 a { color: #222; text-decoration: none; }
.home_box_cont h3 a:hover { text-decoration: none; color: #f2664f; }
.home_box_text .home_box_cont { text-align: center; font-size: 18px; font-family: 'Open Sans Condensed', sans-serif; font-weight: 300; background-color: transparent;}
.archive_title { background-color: #F5F5F5; padding: 10px 8px; margin-bottom: 20px; font-size: 16px; } 

0 个答案:

没有答案