0

wordpress サイトに nivo-slider をインストールしました。これは非常にうまく機能します。また、nivo-caption (スライダーの画像にテキストを重ねる) もあります。このテキストバーは、使用する画面解像度に関係なく、スライダー内の同じ位置にある必要があります。その方法がわかりません。私が試しているのは、スライダーのテキストバーは常に画面の解像度に合わせてサイズ変更されます。

サイトは次のとおりです。http://vanschendel.com/wordpress

Css コード nivo-slider: ` /* * jQuery Nivo Slider v3.1 * http://nivo.dev7studios.com
* * Copyright 2012, Dev7studios * MIT ライセンスの下で自由に使用および悪用できます。* http://www.opensource.org/licenses/mit-license.php */

 /* The Nivo Slider styles */
  .nivoSlider {
     position:relative;
     width:100%;
     height:auto;
     overflow: hidden;
  }
  .nivoSlider img {
     position:absolute;
     top:0px;
     left:0px;
     max-width: none;
  }
  .nivo-main-image {
     display: block !important;
     position: relative !important; 
     width: 100% !important;
  }

  /* If an image is wrapped in a link */
  .nivoSlider a.nivo-imageLink {
     position:absolute;
     top:0px;
     left:0px;
     width:100%;
     height:100%;
     border:0;
     padding:0;
     margin:0;
     z-index:6;
     display:none;
 }
 /* The slices and boxes in the Slider */
  .nivo-slice {
     display:block;
     position:absolute;
     z-index:5;
     height:100%;
     top:0;
 }
  .nivo-box {
     display:block;
     position:absolute;
     z-index:5;
     overflow:hidden;
 }
 .nivo-box img { display:block; }

 /* Caption styles */
 .nivo-caption {
     position:absolute;
     /*left:0px;*/
     /*left:40px;*/
     margin:0 auto 0 680px;
     bottom:0px;
     background:#eaecee;
     color:#373737;
     /*width:100%;*/
     width:5000px;
     height:35%;
     z-index:8;
     padding: 5px 10px;
     opacity: 0.9;
     overflow: hidden;
     display: none;
     -moz-opacity: 0.8;
     filter:alpha(opacity=8);
     -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
     -moz-box-sizing: border-box;    /* Firefox, other Gecko */
     box-sizing: border-box;         /* Opera/IE 8+ */
 }
4

0 に答える 0