※ ChatGPTを利用し、要約された質問です（原文：イメージがずれて表示されてしまいます。）
イメージがずれて表示される問題の解決方法
このQ&Aのポイント
質問者のウェブサイトで、画像が意図した場所に表示されない問題が発生しています。
画像の横幅を調整しても、上に余白や左に余白ができてしまいます。
mainエリアの幅を設定し、画像を隙間なく収める方法を教えてください。
mainのエリア横幅いっぱいにmainphoto.jpgの写真を置きたいのですが、menuの文字分だけ、上に余白ができてしまいます。画像の横幅を小さくすると、上野余白はなくなりますが、今度は左に2pxほどの余白ができます。mainの幅588pxに隙間なく画像を入れる場合はどうしたら良いのでしょうか。
#wrap{
width: 750px;
margin-left: auto;
margin-right: auto;
text-align: left;
background-image:url("images/bgmain.gif");
}
#first{
width: 750px;
background-color: #CC9933;
}
#menu{
width: 162px;
float: left;
}
#main{
margin-left: 162px;
}
#footer{
width: 750px;
clear: both;
}
img {
margin: 0;
padding: 0;
border: 0;
}
----------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>質問</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="wrap">
<div id="first">
<h1>サイトNAME</h1>
<p> </p></div>
<div id="menu">
<p>コンテンツ</p>
<p>コンテンツ</p>
<p>コンテンツ</p>
</div>
<div id="main">
<img src="images/mainphoto.jpg" width="588" height="230">
<p>テキストは左に隙間がない。</p>
</div>
<div id="footer"><p>フッター</p> </div>
</body>
</html>
お礼
こちらの組み方で解決しました。 ありがとうございました。