現在、ナビゲーションに画像を使用する Web サイトに取り組んでいます。画像のさまざまなコンポーネントをクリックすると、他のページへのリンクとして機能します。目的の効果を得るために 3 つの個別の div を使用する方法を説明したチュートリアルを見ました。メイン画像を保持する div、相対配置を使用するオーバーラップ div、および絶対配置を使用するリンク イメージを含む div です。これまでのところ、この方法は私にとってはかなりうまく機能し、必要な効果が得られますが、小さな問題が 1 つあります。私のブラウザでは、常にページの右側に余分なスペースが残っています。この問題を言葉で表現するのはちょっと難しいので、積み上げられた div が Dreamweaver でどのように表示されるか、およびブラウザで表示される問題のイメージを持っています。
最初の画像の 2 つのガレージ ドアを見て、問題を確認してください。右端のガレージ ドアは Web ブラウザに適切に表示され、左側のガレージ ドアに完全に重なっています。ただし、Dreamweaver で確認できるように、背景画像からはみ出し、余分な空白スペースがブラウザーに表示されます。以下にコードを示します。
CSS:
<style type="text/css">
.body
{
height:100%;
margin:0px auto;
padding:0px;
}
.backgroundcontainer
{
width:100%;
height:600px;
background-image:url(backgroundstripe.png);
background-repeat:repeat-x;
}
.background
{
margin:0px auto;
padding:0px;
width:720px;
height:600px;
}
.textarea
{
margin:0px auto;
padding:0px;
background-color:#339900;
}
</style>
そして本体：
<body class="body">
<center>
<div class="backgroundcontainer">
<div class="background" style="z-index:0">
<!--House door link-->
<div style="position:relative;top:449px;left:270px;z-index:1">
<div style="position:absolute">
<a href="[Link goes here]">
<img src="housedoor.png" height="151px" width="96px">
</a>
</div>
</div>
<!--Garage door link-->
<div style="position:relative;top:451px;left:503px;z-index:1">
<div style="position:absolute">
<a href="[Link goes here]">
<img src="garagedoor.png" height="149px" width="130px">
</a>
</div>
</div>
<!--Window link-->
<div style="position:relative;top:449px;left:375px;z-index:1">
<div style="position:absolute">
<a href="[Link goes here]">
<img src="window.png" height="97px" width="96px">
</a>
</div>
</div>
<img src="navigation.png" width="720px" height="600px">
</div>
</div>
</center>
</body>
どんな助けでも大歓迎です。