圖像溢出

-2

我正在爲我的wordpress網站編寫一個wordpress圖像滑塊，滑塊上的圖像不斷溢出並落在其他內容上。我試過其他的代碼，在一個普通的html文件，它工作正常，但它不適用於wordpress主題。我知道這是CSS，但我找不到問題。我可以做錯什麼？我的標記exapmle在這裏和那裏因爲我的整個網站的CSS代碼，圖像溢出

<div style="background-color: gray; height: 300px;padding: 0px 0px 0px 10px;margin:10px 10px 10px 10px;"> 

      <!--Start WOWSlider.com BODY section id = slider-container--> 
      <div id = "slider-container"> 
       <div class = "ws_images"><ul> 
         <li><a href = "http://link addresss1.com"><img src = "http://mysite.loc/files/2012/11/mysite-wall-art-Online29-697x10241.jpg" alt = "Beera-Mu-Klass-Black-500x447" title = "Beera-Mu-Klass-Black-500x447" id = "wows1_0"/></a>Beera mu klass 1</li> 
         <li><a href = "http://link addresss2.com"><img src = "http://mysite.loc/files/2012/11/mysite-wall-art-Online29-697x10241.jpg" title = "Beera-Mu-Klass-White-500x447" id = "wows1_1"/></a>Beera mu klass 2</li> 
         <li><a href = "http://link addresss3.com"><img src = "http://mysite.loc/files/2012/11/mysite-wall-art-Online29-697x10241.jpg" alt = "Celebrating-50-Years-500x447" title = "Celebrating-50-Years-500x447" id = "wows1_2"/></a>Celebrating 50 yrs</li> 
         <li><a href = "http://link addresss4.com"><img src = "http://mysite.loc/files/2012/11/mysite-wall-art-Online29-697x10241.jpg" alt = "mysite-wall-art-Online29-697x1024" title = "mysite-wall-art-Online29-697x1024" id = "wows1_3"/></a>mysite baby!!!</li> 
        </ul></div> 
       <div class = "ws_bullets"><div> 
         <a href = "#" title = "Beera-Mu-Klass-Black-500x447">1</a> 
         <a href = "#" title = "Beera-Mu-Klass-White-500x447">2</a> 
         <a href = "#" title = "Celebrating-50-Years-500x447">3</a> 
         <a href = "#" title = "mysite-wall-art-Online29-697x1024">4</a> 
        </div></div> 
       <a href = "#" class = "ws_frame"></a> 
       <div class = "ws_shadow"></div> 
      </div> 

      <script src = "<?php bloginfo('stylesheet_directory'); ?>/js/wowslider.js" type = "text/javascript" charset = "utf-8"></script> 
      <script src="<?php bloginfo('stylesheet_directory'); ?>/js/script.js" type="text/javascript" charset="utf-8"></script>

我的Css文件。

 </div> 

/* Global */ 
* { margin: 0; padding: 0; } 
body { font-size: 12px; font-family: verdana, arial, georgia; color: #333333; } 
#main_container { width: 1015px; margin: 0 auto; } 
h1,h2,h3,h4,h5,p { margin: 10px 0; } 
.left { float: left; } 
.right { float: right; } 
.clear { clear: both; } 
img { border: none; } 
a { color: #666; text-decoration: none; } 
a:hover { color:#333; } 

/* Header */ 
#header { padding: 10px 0 30px; } 
#menu_container { padding-bottom: 25px; } 
#menu_container ul { list-style-type: none; margin-right: 25px; float: left; } 
#menu_container ul li { float: left; } 
#menu_container ul li a { color: #fff; text-decoration: none; background-color: #000; padding: 6px 5px; margin-right: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; display: block; } 
#menu_container ul li a:hover { background-color: #858585; } 
#menu_container ul li.current-menu-item a, #menu_container ul li.current_page_item a { background-color: #858585; } 
#menu_container input[type=text] { width: 172px; height: 25px; background-color: #000; color: #fff; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; float: right; border: none; padding: 0 5px; } 

.header_social_icons_cont { float: right; margin-right: 5px; } 
.header_social_icons_cont img { float: left; margin-right: 7px; } 

/* Content */ 
.home_post_cont { float: left; margin-right: 34px; width: 228px; min-height: 331px; margin-bottom: 35px; position: relative; } 
.home_post_cont_last { margin-right: 0; } 
.home_post_cont img { width: 228px; height: 331px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; } 
.home_post_cont h3 { font-size: 14px; } 
.home_post_cont h3 a { color: #000; text-decoration: none; } 
.home_post_cont h3 a:hover { text-decoration: none; color: #666; } 

.home_post_content { color: #A0A0A0; font-size: 12px; padding-right: 30px; font-weight: normal; height: 270px; } 
.home_post_content .in_title { color: #fff; font-size: 14px; margin: 0; font-weight: bold; } 
.home_post_content h4 a { color: #fff; font-size: 14px; margin: 0; } 
/*.home_post_cat { position: absolute; bottom: -20px; left: 10px; color: #A0A0A0; font-size: 10px; font-weight: normal; padding-right: 40px; }*/ 
.home_post_cat { color: #A0A0A0; font-size: 10px; font-weight: normal; padding-right: 40px; } 
.home_post_cat a { color: #A0A0A0 !important; text-decoration: none; } 
.home_post_cat a:hover { text-decoration: none; color: #666; } 

.single_left { float: left; width: 665px; } 
.single_left h1 { font-size: 13px; margin-top: 0; } 

    .hover_caption { 
     /* If you can count of CSS3 support: */ 
     background-color: /*rgba(0, 0, 0, 0.7)*/ #000; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; 

     /* Or use a transparent image if you need to support bad browsers: */ 
     /*background-image: url(images/hover_caption_bg.png);*/ 

     /* NOTE: If you're img elements have paddings or margins you'll need to 
     match them here to get things lined up properly. */ 
    } 

#commentform input[type=submit] { background-color: #000; border: none; color: #fff; padding: 8px 10px; } 
#commentform a { color: #000; } 

.commentlist a { color: #000; }  
.iphone-home-image { width: 300px !important; } 

/* Sidebar */ 
#sidebar { float: right; width: 270px; } 
.side_box { margin-bottom: 25px; } 
.side_box h3 { padding: 5px 5px; background-color: #000; margin-top: 0; color: #fff; } 
.side_box p { padding: 0px 5px; } 
.side_box ul { list-style-type: none; margin-left: 5px; } 
.side_box ul li { margin-bottom: 3px; } 
.textwidget { padding: 5px; } 

/* Footer */ 
#footer { margin: 25px 0; padding: 12px 0; border-top: 1px solid #CBCBCB; border-bottom: 1px solid #CBCBCB; color: #8C8889; text-align: right; } 
#footer a { color: #8C8889; text-decoration: none; } 
#footer a:hover { text-decoration: underline; } 


#infscr-loading { text-align: center; } 


@media screen and (max-width: 480px) { 

#main_container { width: 320px; } 
#menu_container { display: none; } 
.home_post_cont { margin-right: auto; margin-left: auto; float: none; clear: both; } 
#footer { display: none; } 
#commentform textarea { width: 220px; } 
#sidebar { display: none; } 
.single_left { float: none; width: 228px; margin-left: auto; margin-right: auto; } 
.single_left img { width: 228px; height:inherit; } 

} 

#slider-container { 
    zoom: 1; 
position: relative; 
max-width: 920px; 
max-height: 300px; 
z-index: 100; 
border: none; 
text-align: left; 
} 
* html #slider-container{ width:920px } 
#slider-container .ws_images ul{ 
    position:relative; 
    width: 10000%; 
    height:auto; 
    left:0; 
    list-style:none; 
    margin:0; 
    padding:0; 
    border-spacing:0; 
    overflow: visible; 
    /*table-layout:fixed;*/ 
} 
#slider-container .ws_images ul li{ 
    width:1%; 
    line-height:0; /*opera*/ 
    float:left; 
    font-size:0; 
    padding:0 0 0 0 !important; 
    margin:0 0 0 0 !important; 
} 

#slider-container .ws_images{ 
    position: relative; 
left: 0; 
top: 0; 
width: 100%; 
overflow: hidden; 
} 
#slider-container .ws_images a{ 
    width:100%; 
    display:block; 
    color:transparent; 
} 
#slider-container img{ 
    max-width: none !important; 
} 
#slider-container .ws_images img{ 
    width:100%; 
    border:none 0; 
    max-width: none; 
} 
#slider-container a{ 
    text-decoration: none; 
    outline: none; 
    border: none; 
} 

#slider-container .ws_bullets { 
    font-size: 0px; 
    float: left; 
    position:absolute; 
    z-index:70; 
} 
#slider-container .ws_bullets div{ 
    position:relative; 
    float:left; 
} 
#slider-container a.wsl{ 
    display:none; 
} 

#slider-container .ws_bullets { 
    padding: 10px; 
} 
#slider-container .ws_bullets a { 
    margin-left: 5px; 
    height: 10px; 
    width: 10px; 
    float: left; 
    border: 1px solid #B8C4CF; 
    color: transparent; 
    text-indent: 0px; 
    background-image:url("data:image/gif;base64,"); 
    position:relative; 
} 
#slider-container .ws_selbull { 
    background-color: #B8C4CF; 
    color: #FFFFFF; 
} 

#slider-container .ws_bullets a:hover, #slider-container .ws_overbull { 
    background-color: #dae9f6; 
    color: #FFFFFF; 
} 

#slider-container a.ws_next, #slider-container a.ws_prev { 
    font-family: Tahoma,Arial,Helvetica; 
    font-size: 14px; 
    position:absolute; 
    display:none; 
    top:50%; 
    margin-top:-15px; 
    line-height:30px; 
    z-index:60; 
    background-color: #000000; 
    color: #FFFFFF; 
    padding: 0px 10px; 
    opacity:0.7; 
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); 
} 
#slider-container a.ws_next{ 
    right:0; 
} 
#slider-container a.ws_prev { 
    left:0; 
} 
* html #slider-container a.ws_next,* html #slider-container a.ws_prev{display:block} 
#slider-container:hover a.ws_next, #slider-container:hover a.ws_prev {display:block} 
/* bottom center */ 
#slider-container .ws_bullets { 
    top:0; 
    right: 0; 
} 

#slider-container .ws-title{ 
    position: absolute; 
    bottom:0; 
    left: 0; 
    margin-right:5px; 
    z-index: 50; 
    background-color:#000000; 
    color:#FFFFFF; 
    padding:10px 1%; 
    width:98%; 
    font-family: Tahoma,Arial,Helvetica; 
    font-size: 14px; 
    opacity:0.55; 
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=55); 
} 
#slider-container .ws-title div{ 
    padding-top:5px; 
    font-size: 12px; 
} 
#slider-container .ws_images ul{ 
    animation: wsBasic 16.8s infinite; 
    -moz-animation: wsBasic 16.8s infinite; 
    -webkit-animation: wsBasic 16.8s infinite; 
} 
@keyframes wsBasic{0%{left:-0%} 12.5%{left:-0%} 25%{left:-100%} 37.5%{left:-100%} 50%{left:-200%} 62.5%{left:-200%} 75%{left:-300%} 87.5%{left:-300%} } 
@-moz-keyframes wsBasic{0%{left:-0%} 12.5%{left:-0%} 25%{left:-100%} 37.5%{left:-100%} 50%{left:-200%} 62.5%{left:-200%} 75%{left:-300%} 87.5%{left:-300%} } 
@-webkit-keyframes wsBasic{0%{left:-0%} 12.5%{left:-0%} 25%{left:-100%} 37.5%{left:-100%} 50%{left:-200%} 62.5%{left:-200%} 75%{left:-300%} 87.5%{left:-300%} } 

#slider-container .ws_bullets a img{ 
    text-indent:0; 
    display:block; 
    top:12px; 
    left:-79px; 
    visibility:hidden; 
    position:absolute; 
    border: 2px solid #B8C4CF; 
    max-width:none; 
} 
#slider-container .ws_bullets a:hover img{ 
    visibility:visible; 
} 

#slider-container .ws_bulframe div div{ 
    height:48px; 
    overflow:visible; 
    position:relative; 
} 
#slider-container .ws_bulframe div { 
    left:0; 
    overflow:hidden; 
    position:relative; 
    background-color:#B8C4CF; 
    width:157px; 
} 
#slider-container .ws_bullets .ws_bulframe{ 
    display:none; 
    top:25px; 
    overflow:visible; 
    position:absolute; 
    cursor:pointer; 
    border: 2px solid #B8C4CF; 
} 
#slider-container .ws_bulframe span{ 
    position:absolute; 
}

來源

2012-11-29 sammyukavi

我們也找不到它。顯示問題的標記示例。（請不要在這裏粘貼一個完整的WordPress頁面。） – Alexander

您已經發布了更多的代碼，比我關注的更多。一個較小的，自包含的例子會給你更好的答案。 – KatieK

這些行聽起來有問題：'＃slider-container .ws_images ul {width：10000％;}＃slider-container .ws_images ul li {width：1％;}'。 – Kraz

只是在某些div中使用overflow:hidden。

來源

2012-12-02 16:27:24 Brifeb

回答

相關問題