1

カルーセルに埋め込んだ背景画像に問題があります。ここをクリックあるスライドから別のスライドをクリックすると、サイトの背景画像がずれてしまうことに気付きました。カルーセルの margin-top は現在 に設定されてmargin-top:-275px;おり、背景画像は に設定されてmargin-top:-64px;います。これらの設定が少し気になります。

誰でもこの問題の解決策を持っていますか?

スライドをアクティブにするには、ナビゲーション バーの下にある薄い赤いタブをクリックします。

4

2 に答える 2

2

それはあなたが持っているからだと思います

.rslides li {
  top:0;
}

position:relative(そして現在のスライドにはそれがあります)では何もしませんが、 position:absolute(非表示のスライド) でスライドを下に移動します。

タブをクリックすると、新しいタブがフェードインする瞬間がありますが、position:relativeまだありません。その瞬間、新しいスライドは目的の場所にありません。

したがって、その行を削除します。

于 2012-08-29T22:11:49.157 に答える
1

アニメーション トグルの最後でLIアイテムを からposition: absolute;に切り替えているため、ジャンプが発生しています。position: relative;これは、CSS ルールを削除することで回避できます。

.rslides li { left: 0; top: 0; }

widthandを指定しても問題ありませんが、and を指定するとheightすぐに、相対位置から絶対位置に切り替えると、見ているジャンプが得られます。lefttop

各パネルの配置については、ボックスをレイアウトする方法に関係しています。指定したサイズは、提供するコンテンツに対して十分な大きさではありません。たとえば、<div id="header">は37px背が高く、これはソーシャル メディア ボタンに適したサイズですが、#nav-menu UL別の102px背の高い - のコンテナとしても使用できます。

これを修正して物事をオーバーラップさせるために、負のマージンを使用しているようです。

私の提案は、次のような標準化されたレイアウト システムを使用することです。

また、絶対/相対配置が混在する重なり合うレイヤーを自作しようとするのではなく、レイアウト タスクを実行するために使用します。

別の方法として、重複するレイヤー ルートを使用する場合 (これもお勧めしません)、実際にコミットしてください。レイアウト全体に物を絶対に配置します。

これを実現するために、次のような CSS ルールを検討できます。

#header {
    display: block;
    position: absolute;

    left: 50%; top: 0px;
    height: 139px; /* Your Social media links height + nav buttons height */
    width: 1018px; /* Your current width */
    margin-left: -509px; /* Half the width - centers on page */
}

繰り返しますが、これははるかに多くの作業であり、維持するのがはるかに難しく、エレガントではありませんが、少なくとも一貫した間隔/サイズが得られます。

于 2012-08-29T22:13:11.090 に答える