0

css のいくつかの要素を調整するのに助けが必要です。現在、ニュース投稿などの簡単なリストを表示する小さなコンテンツ スライダーがあります。各矢印の真ん中に箇条書きが欲しいです。

これが現在の外観です

ライブ WIP リンク -> http://www.garyrevell.co.uk/mrtest/index.html

これは私のHTML + CSSです

 <!--START DEALS-->

 <div class="box-deals">

 <h1> Latest Deals </h1>
<hr>

    <article>

    <div id="slider1">
                                            <div class="viewport">
                        <ul class="overview">

                            <li>

                            <div class="dealimg"><img src="images/blank-logo.jpg" width="70" height="70" alt="feature-img"></div>

                            <div class="dealtitle">Deal Title Here</div>

                            <div class="deal-des">Mon - Thur, Sat only specific text here</div>

                            <p> <a href="#">Login</a> or <a href="#">signup</a> to get this deal </p>


</li>

<li>

                            <div class="dealimg"><img src="images/blank-logo.jpg" width="70" height="70" alt="feature-img"></div>

                            <div class="dealtitle">Deal Title Here</div>

                            <div class="deal-des">Mon - Thur, Sat only specific text here</div>

                            <p> <a href="#">Login</a> or <a href="#">signup</a> to get this deal </p>


</li>




                        </ul>
                    </div>

                    <a class="buttons prev" href="#">left</a>

                    <a class="buttons next" href="#">right</a>

                    <ul class="pager">
                        <li><a rel="0" href="#" class="pagenum active">1</a></li>
                        <li><a rel="1" href="#" class="pagenum">2</a></li>

                    </ul>





                </div>  


    </article>




</div><!--END DEALS-->

これは私のCSSです

/* Slider-Bullets*/

#slider1 .pager { overflow:hidden; list-style: none; clear: both; margin: 0 0 0 45px; }

/*Normal Style*/

#slider1 .pager li { float: left;  display: block; 

}

#slider1 .pager a { width: 15px;
height: 15px;
background:url(../images/bullet-norm.png); background-position: left top; background-repeat:no-repeat;
float: left;
text-indent: -4000px;
position: relative;
margin-left: 3px;
color: transparent;
display:inline;
clear: left;




}

#slider1 .pager a:hover{
    background-position: 0 50%;
    width:15px;
    height:15px;
    float: left; 
    text-indent: -4000px; 
    position:relative;
    margin-left:3px;

    color:transparent;
}

/*Active Style*/

#slider1 .pager .active { color: #fff; background-image:url(../images/bullet-selected.png); } /*CURRENT IMAGE HERE*/
#slider1 .overview { list-style: none; position: absolute; width: 240px; left: 0 top: 0; }
#slider1 .overview li{ float: left; margin: 0 20px 0 0;  width: 236px;


}

/* Tiny Carousel */
#slider1 { height: 1%; overflow:hidden; padding: 0 0 10px;   }

#slider1 .viewport { float: left; width: 240px; min-height: 190px; overflow: hidden; position: relative; }

#slider1 .buttons { background:url("../images/buttons.png") no-repeat scroll 0 0 transparent; display: block; margin: 30px 10px 0 0; background-position: 0 -38px; text-indent: -999em; float: left; width: 39px; height: 37px; overflow: hidden; position: relative; }

#slider1 .previous { background-position: 0 0; margin-left:5px;  }
#slider1 .next { background-position: 0 0; left: 130px }
#slider1 .disable { visibility: hidden; }

#slider1 .overview { list-style: none; position: absolute; padding: 0; margin: 0; width: 240px; left: 0 top: 0; }
#slider1 .overview li{ float: left; margin: 0 20px 0 0; padding: 1px; height: 121px;  width: 230px;}

前もって感謝します。

ゲイリー

4

2 に答える 2

0 
<div id="test">
    <a class="buttons prev" href="#">left</a> 
    <ul class="pager">
        <li><a rel="0" href="#" class="pagenum active">1</a></li> 
        <li><a rel="1" href="#" class="pagenum">2</a></li> 
    </ul>
    <a class="buttons next" href="#">right</a> 
</div>
于 2012-07-31T11:57:03.753 に答える
0

あなたstyle.cssは以下を変更する必要があります：

  • 562行目、つまり、以下のよう#slider1 .buttonsに負の値を指定しtop-marginます。

    margin: -10px 10px 0 0

  • 616行目、つまり#slider1 .pager削除clear:both

その後、スライダーは正常に動作します。

于 2012-07-31T11:47:13.537 に答える