0

私の drupal サイト (www.terrafirmasouth.co.uk) で、スライドショーのキャプション ボックスとその下のページャー ブロックに関係する CSS の問題があります。

初めて私のサイトにアクセスすると、スライド ショーの透明なキャプション ボックス (左下) は、下のページャー ブロックの高さだけ低くなり、正しい位置に調整されます。Ctrl-を押すとF5、問題が再現されます。

ページャー ブロックを無効にすると、問題は解決します。

ページャー ブロックに追加position:absoluteするとジャンプが停止しますが、ページャー ブロックの下のテキストがページャー ブロックと干渉 (オーバーラップ?) するようで、数字をクリックしてスライドを変更することはできません。

クリックできるように、ページャー (1-6) をスライドの下に表示できるようにしたいと考えています (これは noposition:absoluteで既にテスト済みで、問題なく動作しますが、もちろんジャンプの問題があります)。

以下に最新の css を添付しましたが、これはまだサイトに公開されておらず、xammp を使用して PC で実行しているだけです。

/* my caption box */
.trcaption {
    position: absolute;
    left: 20px;
    bottom: 10px;
    background: #353535;
    opacity: 0.85;
    filter:alpha(opacity=85);
    color: #FFFFFF;
    padding: 10px 10px 10px 10px;
}
/* title inside caption box */
#trtitle {
    font-weight: normal;
    font-size: 18px;
    padding-bottom: 5px;
    color: #FFFFFF;
    font-family: 'LatoLight', Arial, sans-serif;
}
/* read more link inside caption box */

#trlink a {
    color: #008C07;
    float: left;
    font-size : 12px;
}
/* pager block under my slideshow  */

.views-slideshow-controls-bottom {
    display: block;
    position: absolute;
    text-align:center;
    width: 100%;
}
/* pager item i.e. number number */

.views-slideshow-pager-field-item {
    display: inline-block;
    margin-right: 20px;
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 5px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
/* show active pager with grey background */

.views-slideshow-pager-field-item.active {
    background: #E8E8E8;
}
4

1 に答える 1

0

絶対的なものを追加する場合は、絶対的なプロパティを持つ他のものが同じものと衝突していないことを確認してくださいz-index。それらをレイヤーに配置するために使用できます。

それは衝突を止め、物事はうまくいくはずです。:)

さらにヘルプが必要な場合は、CSS 以外の作業コードを追加するか、jsfiddle で fiddel を作成してください。

于 2013-03-28T12:08:56.420 に答える