3

友達サイトのページを作っています。ここで見つけることができます：

http://labrostest.byethost8.com/

私の問題は次のとおりです。

  1. body divの下に巨大な白い空のスペースができ、また部門名lower_bodyが明白な理由もなく大きくなっています（少なくとも私の目では:P）

  2. クロムを使用すると、下のページのギャラリー セクションが正しく配置されません。つまり、YouTube ビデオとショーの日付の下に表示されます (Firefox ディスプレイでは同じ問題はありません)。

誰かが手を差し伸べることができますか。

私のcssとhtmlコードを投稿する必要がありますか?

4

4 に答える 4

3

スタイルシートには、lower_content というセレクターがあります。このクラスを見つけて、ブロックをこのブロックに置き換えてください。ここで使用される不要な下部スペースが使用されているため、空白スペースが来ています。

.lower_content {
width: 800px;
margin-left: auto;
margin-right: auto;
position: relative;
bottom: 80px;
right: 30px;
z-index: 2;
}
于 2012-10-10T16:30:55.337 に答える
0

bottom高さを確認してください.lower_content。下まで 680 ピクセル、大きすぎます。代わりに、より小さな margin-bottom を使用し、フロートした後は必ずクリアしてください。

于 2012-10-10T16:27:17.917 に答える
0

CSSをブラッシュアップする必要があります。下部の空白は本文の余白に関連する問題であり、ギャラリーについては、正しく配置されていないため、おそらくブラウザ固有の css タグを追加するのと同じくらい簡単な、ブラウザ間の互換性の問題があると述べました。ギャラリーセクションの余白/パディングを再調整するだけです。

于 2012-10-10T16:29:04.640 に答える
0

相対配置を使用して要素を重ねます。これにより、要素が表示される場所が変更されますが、相対的な移動がなければ表示される場所は依然としてスペースを占有します。これが、ページの下部に大きな空の領域がある理由を説明しています. 代わりに、position:relativeディスプレイスメントを持たないコンテナーを使用し、そのposition:absolute中にある要素を使用してそれらをオーバーレイします。

lower_content要素とgallery要素が十分に大きくないため、要素のgallery_text下に突き出ています。これがおそらく body 要素の下の余分な空白の原因です。つまり、相対移動前の元の位置が body 要素の外側になります。

また：

margin:0body 要素がありますが、padding:0一部のブラウザー (つまり、Opera) では、マージンの代わりに本文のデフォルトのパディングにパディングを使用する必要があります。

body 要素には style 要素があり、代わりに head 要素にある必要があります。これで問題が発生する可能性は低いですが、標準に従ってあるべき場所に配置する方が安全です。

于 2012-10-10T16:35:59.117 に答える