1

www2.chrislrobinson.co.ukのスライダーが正しく動作しない理由を教えていただけないでしょうか。私は彼らの例からコードを持ち上げました。ページが最初に読み込まれたときは問題なく動作するように見えますが、更新すると、画像がページ全体に引き伸ばされ、非常に薄くなります (つまり、高さと幅が台無しになります)。

関連する HTML は次のとおりです。

<body>
<div id="container">  
...
<div id="mainContent">
...
    <div id="slider"> 
        <ul>                
            <li><a href="http://templatica.com/preview/30"><img src="images/01.jpg" alt="Css Template Preview" /></a></li> 
            <li><a href="http://templatica.com/preview/7"><img src="images/02.jpg" alt="Css Template Preview" /></a></li> 
            <li><a href="http://templatica.com/preview/25"><img src="images/03.jpg" alt="Css Template Preview" /></a></li> 
            <li><a href="http://templatica.com/preview/26"><img src="images/04.jpg" alt="Css Template Preview" /></a></li> 
            <li><a href="http://templatica.com/preview/27"><img src="images/05.jpg" alt="Css Template Preview" /></a></li>          
        </ul> 
    </div>

そして言い換えられた CSS:

#slider ul,  #slider li{
margin:0;
padding:0;
list-style:none;
}   

#slider,  #slider li{ 
width:696px;
height:241px;
overflow:hidden; 
}

body  {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #000000 url('images/bg.png') no-repeat top center;
margin: 0;
padding: 0;
text-align: center;
color: #FFFFFF;
}

#container { 
width: 804px;  /* this will create a container 80% of the browser width */
background: transparent;
margin: 0 auto;
text-align: left; /* this overrides the text-align: center on the body element. */
/*border: 2px solid rgba(255,255,255,1);*/
} 

#mainContent {
background: rgba(60,60,60,0.75) no-repeat top center;
width: 800px; 
border: 2px solid rgba(184,0,31,1); 
padding: 0px;
min-height: 600px;
-moz-border-radius: 10px; 
-khtml-border-radius: 10px; 
-webkit-border-radius: 10px; 
min-height: 400px;
clear: both;
} 

span#prevBtn{}

span#nextBtn{}

ありがとう！クリス

編集: 更新 し続けると、最終的には少しの間再び機能します! しかし、それは根本的な解決策ではありません...

編集 2: 奇妙に表示される場合、これが HTML であることがわかりました
<div id="slider" style="width: 953px; height: 18px; overflow-x: hidden; overflow-y: hidden; "> 。これが変更される理由を知っている人はいますか?

4

1 に答える 1

0

あなたのソースを見ましたが、最初にお勧めするのはReset Stylesheetを使用することです。そうしないと* {margin:0;padding:0}、すべてのブラウザーですべての CSS プロパティがリセットされます。

次に、#slider, #slider li追加します。

 #slider, #slider li {width:600px;height:200px}

これは、目標を達成するのに役立ちます。

編集：スライドショーを中央に配置したい場合は、追加してください

{margin:0 auto}
于 2011-05-14T15:36:41.787 に答える