仕様 (フォント スタイル、サイズなど) に合わせてカスタマイズされたイメージ スライダー (CSS ベース) があります。次に、6 つのダウンロード ボタンを持つ別の CSS があります。しかし、両方を組み合わせて HTML ページに統合しようとすると、キャプションのフォント サイズ、スタイル、キャプションの配置などが変更されるのはなぜですか?
また、個々のダウンロード ボタン ページで、ダウンロード ボタンの上にカーソルを合わせると、「ダウンロード」というテキストがまだ白い色で表示されることに注意してください。しかし、両方の CSS ページを統合した後、[ダウンロード] ボタンにカーソルを合わせると、その色が白から黒に変わります! なぜそれが起こっているのですか？次のページをご覧ください:個別スライダー ページ: www.aamaodisha.org/nivoslider.html個別 ダウンロード ボタン ページ: www.aamaodisha.org/button.html
両方を 1 つのページに統合すると、次のようになります: www.aamaodisha.org/both.html
申し訳ありませんが、これは私の非常にばかげた疑いかもしれませんが、私は CSS プロパティに非常に慣れていないため、自分の Web サイトをデザインしてみることにしました。Google で CSS の章を調べてみましたが、どうにもなりませんでした。しかし、CSSについて私が把握している限りでは、テキストの「ID」と「クラス」に関係があると思います。nivoslider の CAPTION クラスをどうにかして ID に変更すれば、他の設定に干渉しないのではないでしょうか。または、ダウンロードページの CSS のクラスを何らかの ID に変更している可能性があります。しかし、私は方法を見つけることができません。私を助けてください。
SLIDER の CSS は次のとおりです。
a, a:visited {
color:blue;
text-decoration:none;
}
a:hover, a:active {
color:#000;
text-decoration:none;
}
a.nivo-nextNav {
background-position:-30px 0;
right:15px;
}
a.nivo-prevNav {
left:15px;
}
#slider_wrapper {
height: 390px;
}
#slider {
margin:0px;
position:absolute;
left:0px;
top:102px;
width: 359px;
height: 390px;
background: url(images/loading.gif) no-repeat 50% 50%;
}
#slider img {
position: absolute;
top: 0;
left: 0;
display: none;
}
#slider a {
border: 0;
display: block;
}
.nivoSlider {
position:relative;
background:#ffffff url(loading.gif) no-repeat 50% 50%;
margin-bottom:50px;
-webkit-box-shadow: 0px 0px 0px 0px #4a4a4a;
-moz-box-shadow: 0px 0px 0px 0px #4a4a4a;
box-shadow: 0px 0px 0px 0px #4a4a4a;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
.nivoSlider a {
border:0;
display:block;
}
/* 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%;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
}
/* Caption styles */
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#091023;
color:#fff;
opacity:0.7; /* Overridden by captionOpacity setting */
width:100%;
z-index:8;
}
.nivo-caption p {
font:11px/1.5 Verdana;
padding: 7px 50px;
}
.nivo-caption a {
display:inline !important;
color:#fff;
border-bottom:1px dotted #fff;
}
.nivo-caption a:hover {
color:#fff;
}
.nivo-html-caption {
display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:9;
cursor:pointer;
display:block;
width:30px;
height:30px;
background:url(arrows.png) no-repeat;
text-indent:-9999px;
border:0;
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}
.nivo-controlNav {
position:absolute;
left:73%;
top:7px;
margin-right:-4px; /* Tweak this to center bullets */
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
display:block;
width:22px;
height:22px;
background:url(bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
position:relative;
z-index:9;
cursor:pointer;
}
.nivo-controlNav a.active {
background-position:0 -22px;
font-weight:bold;
}
これは、ダウンロード ボタンの CSS です。
.button {
width: 115px;
}
.button1 {
position:absolute;
left:430px;
top:410px;
}
.button2 {
position:absolute;
left:632px;
top:410px;
}
.button3 {
position:absolute;
left:833px;
top:410px;
}
.button4 {
position:absolute;
left:430px;
top:636px;
}
.button5 {
position:absolute;
left:632px;
top:636px;
}
.button6 {
position:absolute;
left:833px;
top:636px;
}
.button a {
display: block;
height: 28px;
width: 115px;
/*TYPE*/
color: white;
font: bold 11px/28px Helvetica, Verdana, sans-serif;
text-decoration: none;
text-align: center;
text-transform: uppercase;
/*GRADIENT*/
background: #00b7ea; /* Old browsers */
background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* IE10+ */
background: linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */
}
.button a, p {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
-moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
}
p {
background: #222;
display: block;
height: 25px;
width: 105px;
margin: -27px 0 0 5px;
/*TYPE*/
text-align: center;
font: bold 10px/28px Helvetica, Verdana, sans-serif;
color: #ffffff;
/*POSITION*/
position: absolute;
z-index: -1;
/*TRANSITION*/
-webkit-transition: margin 0.4s ease;
-moz-transition: margin 0.4s ease;
-o-transition: margin 0.4s ease;
-ms-transition: margin 0.4s ease;
transition: margin 0.4s ease;
}
/*HOVER*/
.button:hover .bottom {
margin: -4px 0 0 5px;
}
.button:hover .top {
margin: -50px 0 0 5px;
line-height: 22px;
}
/*ACTIVE*/
.button a:active {
background: #00b7ea; /* Old browsers */
background: -moz-linear-gradient(top, #00b7ea 36%, #009ec3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* IE10+ */
background: linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */
}
.button:active .bottom {
margin: -14px 0 0 5px;
}
.button:active .top {
margin: -30px 0 0 5px;
}