0

#home-slider内の他のすべての div の背後に完全に中央に配置する必要があります#home。親divの左側の上部に残っているため、機能しmarginてpaddingいないようです 。#home-slider他にどうすればそれを下げて中央に置くことができますか? むしろ、私は何を逃したのですか？

jsfiddle

ライブサイト

html

<!-- language: lang-html -->

    <div id="home">
                <div id="home-slider">              
                     <img src="http://lorempixel.com/g/840/420" alt="home-slider" />
                 </div>
            <div class="logo">
                <h1><a href="#"><img src="http://lorempixel.com/232/232" alt="logo" id="logo" /></a></h1>
            </div><!-- end logo -->

            <div id="slider_mask">
                <div class="slide_container">
                    <div class="slide"><p>is where creative <i>je ne sais quoi</i> + business savvy collide.</p></div>
                    <div class="slide"><p>is the maker + doer for makers + doers</p></div>
                    <div class="slide">
                        <ul>
                        <li>No items.</li>                  </ul>
                    </div>
                </div>
                <div class="left_button"><a href="#" class="left-arrow" title="left arrow"></a></div>
                <div class="right_button"><a href="#" class="right-arrow" title="right arrow"></a></div>
            </div>

        </div><!-- end home -->

CSS

#home-slider {
    top:0;
    height:100%;
    left:0;
    position:fixed;
    z-index:-9999;
}

#home .logo {
    padding-top: 215px;
    margin: 0 auto;
    width: 232px;
}

#home #slider_mask {
    width: 600px;
    margin: 0 auto;
    padding-top: 60px;
    position: relative;
    overflow: hidden;
}

#home #slider_mask .left_button {
    float: left;
    display: block;
    width: 23px;
    height: 25px;
    background: url(img/left-arrow.png);
    text-indent: -99999px;
}

#home #slider_mask .left_button:hover {
    background: url(img/left-arrow-hover.png);
    background-position: 0 0;
}

#home #slider_mask .slide_container {
    float: left;
    font-size: 120%;
    text-align: center;
    width: 300px;
}

#home #slider_mask .right_button {
    float: right;
    display: block;
    width: 23px;
    height: 25px;
    background: url(img/right-arrow.png);
    text-indent: -99999px;
}

#home #slider_mask .right_button:hover {
    background: url(img/right-arrow-hover.png);
    background-position: 0 0;
}

#home #slider_mask .slide {
    float: left;
    display: block;
    text-align: center;
}
4

2 に答える 2

1

#home-sliderこれは、HTML 要素にdiv を位置として定義するインライン スタイルがrelativeあり、CSS ではabsolute位置として設定していたためです。インラインは外部スタイルシートのスタイリングをオーバーライドしました

更新されたフィドルは次のとおりです。http://jsfiddle.net/dsZSE/10/

#home-sliderコードは次のようになります。

#home-slider{
top:0;
height:100%;
left:0;
background-image:url('http://lorempixel.com/g/840/420');
background-repeat:no-repeat;
background-size:cover;
position:fixed;
z-index:-9999;
}
于 2013-06-14T16:52:20.130 に答える
1

あなたが#home-slider他のすべての背後にいて、他の人が中心にいることを理解しました。adaamが言うように、「#home-sliderdivを相対位置として定義するHTML要素のインラインスタイリングは、CSSでは絶対位置として設定していました。インラインは外部スタイルシートのスタイリングをオーバーライドしていました」

他のいくつかの css 属性もここに追加しました。

HTML は次のようになります。

<div id="home-slider">               
         <img src="http://lorempixel.com/g/840/420" alt="home-slider" />
</div>
于 2013-06-14T17:18:25.053 に答える