こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

初めてCSSをデザインに取り入れたらレイアウトが崩れてしまいました・・。

dreamweaverMX2004を使用しているホームページ作成初心者です。
スクロールバーが付いているテキストボックス(更新画面用)の下に文字なり画像なりを入れると、なぜかだいぶん間が空いて表示されてしまいます。テキストボックスの高さを400くらいの大きな数字を指定すると間はなくなるのですが、どうしても高さ200~250くらいに指定したいんです…。
参考になるかも知れないので、コードを貼り付けておきます。
以前、教えてgooで同じような質問があって、そのときにどなたかが、
http://cssbug.at.infoseek.co.jp/detail/winie/b053.html
を紹介していたので、もしかしたらこの状態なんでしょうか?あるいは、決定的なミスをしているのでしょうか?
どなたかご存じの方、いらっしゃったら、どうぞお願いいたします。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>無題ドキュメント</title>
<style type="text/css">
<!--
.style1 {
color: #000000;
font-size: 12px;
}
.style2 {font-size: 12px}
.style4 {color: #000099; font-weight: bold; }
-->
</style>
</head>

<body>
<style type="text/css"><!--
html, body { scrollbar-base-color: #D5D0F7; }
--></style>
<table width="800" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="279" height="357">&nbsp;</td>
<td colspan="2" valign="top"><style type="text/css">
<!--
.memo {
width: 470px;
height: 220px;
overflow: auto;
}
-->
</style>
<div class="memo style1">
<p align="left" class="style1 style2">&nbsp; </p>
<p align="left"><span class="style4">2008年1月4日更新</span><br>
あけましておめでとうございます。<br>
</p>
<p align="left" class="style1 style2">&nbsp;</p>
<p align="left" class="style1 style2">&nbsp;</p>
<p align="left" class="style1 style2">&nbsp;</p>
<p align="left" class="style1 style2">&nbsp;</p>
<p align="left" class="style1 style2">&nbsp;</p>
<p align="left" class="style1 style2">&nbsp;</p>
<p align="left" class="style1 style2">&nbsp;</p>
<p align="left" class="style1 style2">&nbsp;</p>
<p align="left" class="style1 style2">あけましておめでとうございます。<br>
</p>
</div></td>
</tr>
<tr>
<td height="43"></td>
<td width="248" valign="top">pppp</td>
<td width="273">&nbsp;</td>
</tr>
</table>
<br>
</body>
</html>

投稿日時 - 2008-01-20 17:05:05

QNo.3697229

困ってます

質問者が選んだベストアンサー

#1~#3です。少し変更しましたので変更と追加部分をアップします。
【変更部分】
#my_body{
margin:0 auto;
width:820px;/* #photo1+#contents+20pxになるように */
}

#photo2{/* 小さな画像を入れる部分 */
width:100%;/* この数値は変更しないでください */
height:230px;/* ←この部分を変更してください。画像よりも少し大きな高さに */
padding:5px;/* 小さな画像まわりの余白(不必要でしたら削除)*/
background-image : url(画像ファイル);/* 画像ファイルへのパス */
background-position:center center;/* 中央になるように設定 */
background-repeat: no-repeat;
clear:both;
}

.memo{
margin:20px 10px;/* ←この部分を変更してください。上下に20pxの余白、左右に10pxの余白 */
width:470px;
height:220px;
overflow:auto;
}

.memoの「margin:20px 10px;」ですが「20pxで上下指定」「10pxで左右指定」になります。
上下の位置を下げたい場合は、20pxを大きな数値にしてみてください。
但し、あまりに大きな数値にしてしまうとずれてしまいますので
左の写真サイズとのバランスを考慮なさって、適宜なpx指定をしてください。

【追加部分】
.style1{
color:#000000;
font-size:12px;
text-align:left;/* テキストが左寄せになります */
}
.style3{
color:#000000;/* 文字色は任意で変更してください */
font-size:12px;/* 文字の大きさは任意で変更してください */
line-height:150%;/* テキストの間隔が広がりますので見やすくなります */
}

HTML部分修正
<div id="my_body">
<div id="photo1">写真が入る部分のため文字など入れてはいけません</div>
<div id="contents">
<div class="memo">
<p class="style1">&nbsp;</p>
<p class="style1"><span class="style2">2008年1月4日更新</span><br>
あけましておめでとうございます。</p><br>
<p class="style1">&nbsp;</p>
<p class="style1">&nbsp;</p>
<p class="style1">&nbsp;</p>
<p class="style1">&nbsp;</p>
<p class="style1">&nbsp;</p>
<p class="style1">&nbsp;</p>
<p class="style1">&nbsp;</p>
<p class="style1">あけましておめでとうございます。</p>
</div>
</div>
<div id="photo2">画像が入る部分のため文字など入れてはいけません</div>
<br>
<div class="style3">テキストテキストテキストテキストテキストテキストテキストテキスト<br>
テキストテキストテキストテキストテキストテキストテキストテキスト<br>
テキストテキストテキストテキストテキストテキストテキストテキスト<br></div>
</div>

申し訳ありませんが、今はこれが精一杯です。どうか頑張ってください。

投稿日時 - 2008-01-20 23:31:22

補足

何度もありがとうございます!こちらも今後、勉強していきます!

投稿日時 - 2008-01-21 02:45:46

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(4)

ANo.3

#1、#2です。すみません、これでいいでしょうか?カスタマイズはお任せします。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>無題ドキュメント</title>
<style type="text/css">
<!--
html, body{
scrollbar-base-color: #D5D0F7;
}
#my_body{
margin:0 auto;
width:820px;/* #photo+#contents+20pxになるように */
}
#photo1{/* 写真を入れる部分 */
float:left;
width:320px;/* 写真よりも少し大きな幅に */
height:350px;/* 写真よりも少し大きな高さに */
background-image : url(写真ファイル);/* 写真ファイルへのパス */
background-position:center center;/* 中央になるように設定 */
background-repeat: no-repeat;
}
#contents{/* 更新ボックスを入れる部分 */
float:left;
width:480px;/* 更新ボックスよりも少し大きな幅に */
height:350px;/* #photoと必ず同じ値に */
}
#photo2{/* 小さな画像を入れる部分 */
width:100%;/* この数値は変更しないでください */
height:150px;/* 画像よりも少し大きな高さに */
padding:5px;/* 小さな画像まわりの余白(不必要でしたら削除)*/
background-image : url(画像ファイル);/* 画像ファイルへのパス */
background-position:center center;/* 中央になるように設定 */
background-repeat: no-repeat;
clear:both;
}
.memo{
margin:20px 5px;/* 上下に20pxの余白、左右に10pxの余白 */
width:470px;
height:220px;
overflow:auto;
}
.style1{
color:#000000;
font-size:12px;
}
.style2{
color:#000099;
font-weight:bold;
}
-->
</style>
</head>
<body>
<div id="my_body">
<div id="photo1">写真が入る部分のため文字など入れてはいけません</div>
<div id="contents">
<div class="memo">
<p align="left" class="style1">&nbsp;</p>
<p align="left" class="style1"><span class="style2">2008年1月4日更新</span><br>
あけましておめでとうございます。</p><br>
<p align="left" class="style1">&nbsp;</p>
<p align="left" class="style1">&nbsp;</p>
<p align="left" class="style1">&nbsp;</p>
<p align="left" class="style1">&nbsp;</p>
<p align="left" class="style1">&nbsp;</p>
<p align="left" class="style1">&nbsp;</p>
<p align="left" class="style1">&nbsp;</p>
<p align="left" class="style1">あけましておめでとうございます。</p>
</div>
</div>
<div id="photo2">画像が入る部分のため文字など入れてはいけません</div>
<br>
テキストテキストテキストテキストテキストテキストテキストテキスト<br>
テキストテキストテキストテキストテキストテキストテキストテキスト<br>
テキストテキストテキストテキストテキストテキストテキストテキスト<br>
</div>
</body>

投稿日時 - 2008-01-20 22:18:00

ANo.2

#1です。早とちりをしてしまって申し訳ありませんでした。
どうもテーブルが入っているようなんですが、これは何故でしょうか。
<table width="800" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="279" height="357">&nbsp;</td>
<td colspan="2" valign="top">
</td>
</tr>
<tr>
<td height="43"></td>
<td width="248" valign="top">pppp</td>
<td width="273">&nbsp;</td>
</tr>
</table>
このタグの意味がわからなくて。このテーブルが邪魔をしているのではないでしょうか。

下記の記述例でしたらテキストボックスと画像&文字の間は離れません。
<html>
<head>
<title>無題ドキュメント</title>
<style type="text/css">
<!--
html, body{
scrollbar-base-color: #D5D0F7;
}
.memo{
width: 470px;
height: 220px;
overflow: auto;
}
.style1{
color: #000000;
font-size: 12px;
}
.style2{
color: #000099;
font-weight: bold;
}
-->
</style>
</head>
<body>
<div class="memo">
<p align="left" class="style1">&nbsp;</p>
<p align="left" class="style1"><span class="style2">2008年1月4日更新</span><br>
あけましておめでとうございます。</p><br>
<p align="left" class="style1">&nbsp;</p>
<p align="left" class="style1">&nbsp;</p>
<p align="left" class="style1">&nbsp;</p>
<p align="left" class="style1">&nbsp;</p>
<p align="left" class="style1">&nbsp;</p>
<p align="left" class="style1">&nbsp;</p>
<p align="left" class="style1">&nbsp;</p>
<p align="left" class="style1">&nbsp;</p>
<p align="left" class="style1">あけましておめでとうございます。</p>
</div>
<br>
<img src="画像ファイル" width="300" height="200" border="0"><br>
テキストテキストテキストテキスト<br>
テキストテキストテキストテキスト<br>
テキストテキストテキストテキスト<br>
</body>
</html>

投稿日時 - 2008-01-20 20:41:59

補足

さっそくのご回答ありがとうございます。NymphLunaさんのコードを貼り付けてみたら、たしかに上手く表示されました!
テーブルを入れているのはですね…。画面左側に大きな写真、右側に更新ボックス、その下に小さな画像(更新ボックスと同じくらいの大きさ)を表示させて、しかも常に中央に表示させたいからなんですが…。
全然、見当違いの方法かも知れません。
レイアウトテーブルを使わずに、このような表示をさせる方法を今一度、教えていただけませんか?

投稿日時 - 2008-01-20 21:10:24

ANo.1

スタイルシートの中になぜかテーブルタグが入っているのでレイアウトが崩れているのではありませんか?
テーブルは何にしようされているのかわかりませんが、取った形ですと「高さ220px」できちんと表示されます。
他にCSSのclass指定に複数入れられているようですが、どちらかひとつにしないと有効になりません。
以下、確認したCSSとタグ記述です。

<html>
<head>
<title>無題ドキュメント</title>
<style type="text/css">
<!--
html, body{
scrollbar-base-color: #D5D0F7;
}
.memo{
width: 470px;
height: 220px;
overflow: auto;
}
.style1{
color: #000000;
font-size: 12px;
}
.style2{
color: #000099;
font-weight: bold;
}
-->
</style>
</head>
<body>
<div class="memo">
<p align="left" class="style1">&nbsp;</p>
<p align="left" class="style1"><span class="style2">2008年1月4日更新</span><br>
あけましておめでとうございます。</p><br>
<p align="left" class="style1">&nbsp;</p>
<p align="left" class="style1">&nbsp;</p>
<p align="left" class="style1">&nbsp;</p>
<p align="left" class="style1">&nbsp;</p>
<p align="left" class="style1">&nbsp;</p>
<p align="left" class="style1">&nbsp;</p>
<p align="left" class="style1">&nbsp;</p>
<p align="left" class="style1">&nbsp;</p>
<p align="left" class="style1">あけましておめでとうございます。</p>
</div>
</body>
</html>

投稿日時 - 2008-01-20 18:23:18

補足

すみません。質問が分かりにくくて…。テキストボックスの大きさはちゃんと220で表示されるのですが、テキストボックスの下に文字を入れると、えらい間が空いて表示されるんです。ごめんなさい。もう一度、教えていただけませんか?

投稿日時 - 2008-01-20 19:46:34

あなたにオススメの質問