※ ChatGPTを利用し、要約された質問です（原文：PHPのプログラム）
初心者がPHPのプログラムでレイアウト崩れ問題を解決する方法
このQ&Aのポイント
PHPのプログラムで組んだレイアウトが崩れる問題について、初心者でも解決できる方法を教えてください。
初心者が組んだPHPのプログラムでレイアウトが崩れる問題が発生しています。どのようにすれば解決できるのでしょうか。
PHPのプログラムを初めて組んだ初心者ですが、レイアウトが崩れてしまいます。解決方法を教えてください。
初心者でPHPのプログラムを組んでもレイアウトが崩れてしまいます。
どのようにすれば直るのでしょうか？詳しい方、どうかよろしくお願いします。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>sugoweb</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="topimg">
</div>
<div id="left_navi">
<div id="menu">
<ul>
<li><a href="index.html">XXXXX</a></li>
<li><a href="grudge.html">当社のこだわり</a></li>
<li><a href="question.html">Q&A</a></li>
<li><a href="plan.html">PLAN</a></li>
<li><a href="flow.html">FLOW</a></li>
<li><a href="inquiry.php">問い合わせ</a></li>
<li><a href="blog.html">ブログ</a></li>
</ul>
</div>
</div>
<div id="contents">
<form method="POST" action="inquiry_check.php">
<p class="form">氏名</p>
<input type="text" name="name" size="40"><br>
<p class="form">電話番号</p>
<input type="text" name="tel" size="40"><br>
<p class="form">Eメール</p>
<input type="text" name="email" size="40"><br>
<input type="radio" name="sex" value="男" checked>男
<input type="radio" name="sex" value="女">女
<textarea name="bikou" cols="50" rows="10"></textarea>
<input type="submit" value="確認">
<input type="reset" value="リセット">
<form method="POST" action="inquiry_check.php">
</div>
<div id="footer">
</div>
</body>
</html>
CSS部分
*{margin:0;
padding:0;
}
body {
text-align:center;
}
#container{
width:900px;
height:auto;
margin:0 auto;
text-align:left;
}
#header{
width:900px;
height:90px;
border:solid 1px gray;
background-image:url("images/header/header_bg.jpg");
position:relative;
}
.inquiry_btn{
position:absolute;
top:8px;
left:660px;
border:none;
}
.logo{
border:none;
}
#topimg{
width:900px;
height:250px;
}
#left_navi{
width:180px;
height:1000px;
float:left;
}
#contents{
width:680px;
float:right;
padding-top:20px;
padding-right:20px;
}
.right{
float:right;
margin-left:15px;
margin-bottom:20px;
}
.left{
float:left;
margin-right:15px;
margin-bottom:20px;
}
h2{
width:100%;
border-left:solid 3px navy;
border-bottom:solid 1px navy;
padding-left:10px;
font-size:18px;
padding-bottom:3px;
margin-bottom:30px;
}
h3{
width:100%;
border-left:solid 3px navy;
border-bottom:solid 1px navy;
padding-left:10px;
font-size:15px;
padding-bottom:3px;
margin-bottom:10px;
margin-top:10px;
}
#footer{
width:900px;
height:50px;
border:solid 1px gray;
clear:both;
text-align: center;
padding-top: 10px;
}
#footer ul{
list-style-image:url(images/listmark.gif);
}
#footer li{
display:inline;
}
#footer a{
display:inline;
font-size:12px;
padding:10px;
text-decoration:none;
color:#333;
width:auto;
}
#footer a:hover{
color:red;
}
#contents p{
line-height:150%;
letter-spacing:1px;
font-size:13px;
margin-bottom:70px;
}
dl.qa{
margin-bottom:20px;
}
dt.question{
font-size: 15px;
margin-bottom:20px;
font-weight:bold;
border-left:solid 3px navy;
border-bottom:solid 1px navy;
padding-bottom:2px;
padding-left:5px;
}
dd.answer{
margin-bottom:25px;
}
#menu ul{
margin; 0;
padding: 0;
list-style: none;
}
#menu li{
display: inline;
padding: 0;
margin: 0;
}
#menu a{
display: block;
border-top: 1px solid #9F99A3;
border-left: 5px solid blue;
border-right: 1px solid #9F99A3;
background-color: #EEEEEE;
font-size: small;
padding: 3px 10px;
text-decoration: none;
color: #333;
width: 150px;
margin: 0px;
text-align: left;
}
#menu a:hover{
text-decoration: underline;
border-top: 1px solid #8593A9;
border-left: 5px solid gray;
border-right: 1px solid #8593A9;
background-color: pink;
}
#left_navi{
margin-top: 20px;
}
P.form{
margin-bottom:10px;
}
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_4_thumbnail_img_sm.png)
お礼
確かにphpとはあまり関係ない部分でした。 もっと勉強しておきます。 返事が遅くなりましたが大変ありがとうございました。