最初の投稿とnoob。
私はhtml\cssを学んでおり、通常、ここで少し検索するだけでほとんどの問題を解決できます。以下のページの問題を回避できないようです。基本的に、非表示のテキストを保持する div の周りに複数の画像を配置したいと考えています。画像にカーソルを合わせる(または後でクリックする)と、関連するテキストが表示され、次の画像にカーソルを合わせると非表示/変更されます(人とプロファイルを考えてください)
これまでのところ、ページは私が望むことをフルスクリーンで実行しています。ブラウザー ウィンドウを小さくすると、テキストはそのまま残り、他のすべての要素が移動します。image .hover に position:fixed があることはわかっていますが、これが問題です。しかし、 :fixed を他の値に変更すると壊れますか?
私はここでたくさんの答えを読みました。私はそれを理解しようと何時間も費やしましたが、失敗し、非常に単純な問題であると確信している何かを解決できなかったことに不満を感じています。
私が望むのは、ブラウザウィンドウのサイズが変更されるたびに、テキストを保持する div が画像の円の中心になることだけです。これを実現するには、このコードで何を変更する必要がありますか? 私がやりたいことをするためのより良い方法はありますか?
私のフラストレーションを理解していただき、あまり苦労しないでください:-) divを表示\非表示にするまで、配置に問題があったことはありません。
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled</title>
<style>
#image {
position:relative;
width:180px;
height:140px;
}
#image .hover {
display:none ;
position:fixed;
}
#image:hover .hover {
display:block;
}
#wrapper{
width:960px;
margin :0px auto ;
text-align: center ;
}
#banner{
height:250px;
}
#content{
}
</style>
</head>
<body>
<div id="wrapper">
<div id="banner"></div>
<div id="content">
<div id="image" style="left: 383px; top: 31px; width: 135px; height: 192px;">
<img src="images/img-placeholder.jpg" alt="" height="176" width="127"/>
<div class="hover" style="left: 440px; top: 480px; width: 388px; height: 440px">
<p>Eight Lines of text here Eight Lines of text here</p>
<p>Eight Lines of text here Eight Lines of text here</p>
<p>Eight Lines of text here Eight Lines of text here</p>
<p>Eight Lines of text here Eight Lines of text here</p>
<p>Eight Lines of text here Eight Lines of text here</p>
<p>Eight Lines of text here Eight Lines of text here</p>
<p>Eight Lines of text here Eight Lines of text here</p>
</div>
</div>
<div id="image" style="left: 97px; top: -83px; width: 135px; height: 192px;">
<img src="images/img-placeholder.jpg" alt="" height="176" width="127"/>
<div class="hover" style="left: 440px; top: 480px; width: 388px; height: 440px">
<p>Eight Lines of text here Eight Lines of text here</p>
<p>Eight Lines of text here Eight Lines of text here</p>
<p>Eight Lines of text here Eight Lines of text here</p>
<p>Eight Lines of text here Eight Lines of text here</p>
<p>Eight Lines of text here Eight Lines of text here</p>
<p>Eight Lines of text here Eight Lines of text here</p>
<p>Eight Lines of text here Eight Lines of text here</p>
</div>
</div>
<div id="image" style="left: 652px; top: -272px; width: 135px; height: 192px;">
<img src="images/img-placeholder.jpg" alt="" height="176" width="127"/>
<div class="hover" style="left: 440px; top: 480px; width: 388px; height: 440px">
<p>Eight Lines of text here Eight Lines of text here</p>
<p>Eight Lines of text here Eight Lines of text here</p>
<p>Eight Lines of text here Eight Lines of text here</p>
<p>Eight Lines of text here Eight Lines of text here</p>
<p>Eight Lines of text here Eight Lines of text here</p>
<p>Eight Lines of text here Eight Lines of text here</p>
<p>Eight Lines of text here Eight Lines of text here</p>
</div>
</div>
<div id="image" style="left: 91px; top: 50px; width: 135px; height: 192px;">
<img src="images/img-placeholder.jpg" alt="" height="176" width="127"/>
<div class="hover" style="left: 440px; top: 480px; width: 388px; height: 440px">
<p>Eight Lines of text here Eight Lines of text here</p>
<p>Eight Lines of text here Eight Lines of text here</p>
<p>Eight Lines of text here Eight Lines of text here</p>
<p>Eight Lines of text here Eight Lines of text here</p>
<p>Eight Lines of text here Eight Lines of text here</p>
<p>Eight Lines of text here Eight Lines of text here</p>
<p>Eight Lines of text here Eight Lines of text here</p>
</div>
</div>
<div id="image" style="left: 370px; top: -80px; width: 135px; height: 192px;">
<img src="images/img-placeholder.jpg" alt="" height="176" width="127"/>
<div class="hover" style="left: 440px; top:480px; width: 388px; height: 440px">
<p>Eight Lines of text here Eight Lines of text here</p>
<p>Eight Lines of text here Eight Lines of text here</p>
<p>Eight Lines of text here Eight Lines of text here</p>
<p>Eight Lines of text here Eight Lines of text here</p>
<p>Eight Lines of text here Eight Lines of text here</p>
<p>Eight Lines of text here Eight Lines of text here</p>
<p>Eight Lines of text here Eight Lines of text here</p>
</div>
</div>
<div id="image" style="left: 650px; top: -318px; width: 135px; height: 192px;">
<img src="images/img-placeholder.jpg" alt="" height="176" width="127"/>
<div class="hover" style="left: 440px; top: 480px;width: 388px; height: 440px">
<p>Eight Lines of text here</p>
<p>Eight Lines of text here Eight Lines of text here</p>
<p>Eight Lines of text here Eight Lines of text here</p>
<p>Eight Lines of text here Eight Lines of text here</p>
<p>Eight Lines of text here Eight Lines of text here</p>
<p>Eight Lines of text here Eight Lines of text here</p>
<p>Eight Lines of text here Eight Lines of text here</p>
<p>Eight Lines of text here Eight Lines of text here</p>
</div>
</div>
</div>
</div>
</body>
</html>