0

この質問がさまざまな方法で尋ねられているのを見てきましたが、アプリケーションまたはシナリオが私のものとは異なるように見えるため、答えがわかりません。

基本的に、コンテンツの幅は 940px で、スライドショーの背景として「イーゼル」を使用したいのですが、イーゼルの画像がコンテンツの幅 940px を超えて約 400px 伸び、水平スクロール バーが 940px で表示されます +イーゼル幅 (400px) - しかし、コンテンツが 940px 以下の場合にのみスクロールバーを表示したい - 見落としている簡単な修正はありますか?

<div id="showcase">
            <div class="content">
                <div class="left">
                    <h1>Lidya Aaghia Tchakerian</h1>
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                    </p>
                </div>

                <div id="slideshowArea">
                    <div id="slideshow">
                        <ul class="bjqs">
                            <li><img src="images/slider1.jpg" width="326" height="534" alt="" /></li>
                            <li><img src="images/slider1.jpg" width="326" height="534" alt="" /></li>
                            <li><img src="images/slider1.jpg" width="326" height="534" alt="" /></li>
                            <li><img src="images/slider1.jpg" width="326" height="534" alt="" /></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

私のCSS：

 /* showcase
------------------------------------------*/
#showcase {
    position: relative;
    padding: 40px 0 0 0;
    height: 828px;
    background: #fafafa;
    border: 1px solid #d8d8d8;
}

#showcase .left {
    position: absolute;
    width: 388px;
    top: 200px;
    text-align: center;
}

#showcase .left  h1 {
    color: #cd6d6d;
}

#slideshowArea {    
    position: absolute;
    width: 824px;
    left: 495px;
    height: 875px;
    background: url('../images/easel.png') no-repeat;
}

#slideshow {
    display: block;
    position: relative;
    left: 72px;
    height: 534px;
    width: 326px;
    border: none;
    top: 107px;
}

#slideshow ul {
    position: relative;
    z-index: 99;
    width: 326px;

}

ul .traits {
    padding: 0;
    float: left;
    margin: 10px 0 0 30px;
}

.traits li {
    color: #fff;
    float: left;
    display: block;
    margin-right: 25px;
    padding: 6px 0 0 22px;
    background: url('../images/checkbox.png') no-repeat 0 0;
    height: 30px;
    list-style: none;
}

どんな助けでも大歓迎です。

ありがとう、ネイサン

編集: ページを表示するには、http ://www.digicrest.com/lidya にアクセスしてください。

4

3 に答える 3

1

おそらくこれ：

#slideshowArea {    
  position: absolute;
  width: 824px;
  max-width: 940px;
  overflow-x: hidden; /* Maybe overflow-y instead ?? */
  left: 495px;
  height: 875px;
  background: url('../images/easel.png') no-repeat;
}
于 2013-02-06T22:24:31.153 に答える
1

私はこれを2つの方法のいずれかで理解しています:

1) #slideshow div にスクロールバーを持たせたくない場合は、overflow プロパティを「hidden」に設定できます。

#slideshow {
display: block;
position: relative;
left: 72px;
height: 534px;
width: 326px;
border: none;
top: 107px;
overflow-x: hidden; /*ADD THIS*/

}

2）私がこれを理解しているもう1つの方法は、#slideshow divを「保持」することになっているイーゼルの背景画像を持つdivがあるが、その背景画像が望ましい寸法を超えていることです。固定デザインを使用している場合の 1 つの解決策は、背景画像をコンテナー div のサイズにすることです。そうすることで、物事がどこにあるのかを多かれ少なかれ知ることができます。

もう 1 つの解決策は、CSS の background-size プロパティを使用することです。背景の幅を 940px にしたい場合は、次のようにします。

 #container {
     background: url('directory/file.jpg');
     background-size: 940px auto;
 }

お役に立てれば！

于 2013-02-06T22:24:52.000 に答える
1

メディア クエリを使用して、css 要素のオーバーフロー属性を指定できます。どの ID やクラスをターゲットにするか明確でないため、以下の例では #your_id と呼んでいます。

まず、940px 未満のすべての場合:

@media only screen and (max-width: 940px) {
body {
overflow-x:visible;
}
}

次に、940px を超えるすべての場合:

@media only screen and (min-width: 940px) {
body {
overflow-x:hidden;
}
}

@media クエリの詳細については、http ://webdesign.about.com/od/css3/a/css3-media-queries.htm をご覧ください。

于 2013-02-06T22:31:13.800 に答える