0

私はcss、div、およびその間のすべてにまったく慣れていません。

それで、私は自分のバンドの基本的なレイアウトを作成しました。バイオ、商品ストアなどのような無駄なリンクをたくさん入れたくありませんでした。そこで、ビデオ、プレーヤー、Facebook ウィンドウ用に別々のスペースを配置することにしました。

YouTube iframe の div を作成できましたが、ウィンドウのサイズを変更してもその場所にとどまることはできません。ポジショニングを絶対、固定、相対などに何度も変更しようとしました。運がない。

レイアウトは派手なものではなく、すぐに見られるものであり、バンドの基本的な情報が得られることに注意してください.

リンクは次のとおりです。http://silentcellmusic.com/test.html

事前にt​​hx！

4

4 に答える 4

0

あなたがする必要があるのは、ポジションを使用することです。fixedウィンドウ（またはブラウザ）の左上隅に対する位置を決定するため、サイズを変更しても常に同じ場所に留まります。正しい方法は、absoluteandを使用することrelativeです。

relativeまずコンテナが必要です。画像はすでに中央に配置されているため、次のようにすることができます。

<div id="container">...</div>

#container {width:960px; margin:0 auto; position:relative;}

次に、ビデオを絶対に配置された div に配置しますが、相対的な div 内に配置します。あなたのhtmlは次のようになります：

<div id="container">
 <div id="videoDiv">
   your video here
 </div>
</div>

そして、videoDiv の CSS:

#videoDIv {position:absolute; top:200px; left:200px; }

それがどのように機能するかを理解するには、オンラインで css position を参照してください。実際には非常に単純ですが、適切な構造が必要です。あなたの場合、centerタグは相対的な位置を持つものにする必要がありますが、必ずdivに変更してください。そうしないと、一部のブラウザーで検証エラーが発生します。

そうは言っても、サイトを改善するためにできることはたくさんあります。位置を処理する方法を理解したら、別の画像を使用してレイアウトをやり直すことができ (読み込みが速くなります)、実際のテキストを使用できます。これは、検索エンジンがサイトを認識するために非常に重要です。そのため、少なくともキーワードを広めるようにしてください。

于 2012-08-02T20:39:30.303 に答える
0

ビデオ div の CSS は次のとおりです。

#apDiv1 {
    position:absolute;
    left:747px;
    top:535px;
    width:400px;
    height:223px;
    z-index:1;
    #wrapper {
    margin-left:auto;
    margin-right:auto;
    width:960px;
}

width を 2 回宣言するつもりでしたか? width:960px はポジショニングから外れていますか?

于 2012-08-02T20:40:13.460 に答える
0

タグを完全に取り除き、<center>#apDiv1 の css を次のように変更します。

#apDiv1 {
   position: absolute;
   left: 597px;
   top: 489px;
   width: 400px;
   height: 223px;
   z-index: 1;
}
于 2012-08-02T20:40:45.097 に答える
0

まず、マークアップから画像を削除し、それを本文の背景や html などに設定する必要があります。上部中央に配置します。

次に、div #wrapper を { width: 960px; に設定します。マージン 0 自動; }。このようにして、背景として常に画面の中央に表示されます。

3 番目に、4 つの div を作成します。

  • 社交
  • 聞く
  • ビデオ

それらを左にフロートさせ、それに応じて幅とマージンを設定します。

最後に、フッター (ソーシャル リンクと mailto) の div を追加します。

幸運を祈ります。

于 2012-08-02T20:38:42.613 に答える