- ベストアンサー
CSSで左側の余白
CSS本を見ながら苦闘しています。 下のようなCSSを書いたのですが、全体のレイアウトが左寄せから10pxほど余白が出て表示されてしまいます。 HTMLではそのような指定はしていません。 どうしてなのでしょうか。 また、どのようにしたら良いのでしょうか。 レイアウトは div#top div#top1 で２段上下にブロックしたあと、左右のブロックで分けています。 ※また、:と;の間にスペースを入れる、入れないは本によってマチマチなのですが、どのような書き方が正しいのでしょうか。 <style type="text/css"> <!-- body { font-size:10pt ; line-height:20px ; background-color:white; color : black ; } td { font-size:10pt; line-height:16px ;} div#top { position: absolute; top:0px; } div#top1 { position:absolute; top:95px ; } div#menu { float:left; } div#content { float:left; border-left:1px solid #666666 padding-top:10px; padding-left:20px; width:580px; } // --> </style>
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
ご質問の内容を正確に把握できているかわかりませんが… BODY内で<div id="top"></div>と<div id="top1"></div>を適用した部分が左ギリギリに寄らない(?)ということでしょうか。 div#top { position: absolute; top:0px;left:0px } div#top1 { position:absolute; top:95px ;left:0px } これでは駄目でしょうか? ※「left:0px」を追加しただけですが。
その他の回答 (5)
- gammo194
- ベストアンサー率30% (52/169)
BODY部分拝見しました。素朴な疑問なんですが、top、top1の設定は必要なんでしょうか。ざっと書き出してみましたが...これでどうでしょう? shizukuさんの意図するものと違いますでしょうか。 ※タイトル(?)のズレは勝手に変えました。 <html> <head> <title></title> <style type="text/css"> <!-- body { font-size:10pt ; margin:0px ; line-height:20px ; background-color:white; color : black ;} td { font-size:10pt; line-height:16px ;} div#menu { float:left; } div#content{ float:left ; border-left:1px solid #666666 padding-top:10px ; padding-left:20px ; width:580px;} // --> </style> </head> <body> <table border="0" cellpadding="0" style="border-collapse: collapse" cellspacing="0"> <tr> <td><img src="xxx.gif" width="220" height="95"></td> <td><img src="xxx.jpg" width="530" height="95"></td> </tr> </table> <table border="0" cellpadding="0" style="border-collapse: collapse" bgcolor="#999999" cellspacing="0"> <tr> <td width="125"> <img border="0" src="xxx.gif" width="125" height="17"></td> <td width="125"> <img border="0" src="xxx.gif" width="125" height="17"></td> <td width="125"> <img border="0" src="xxx.gif" width="125" height="17"></td> <td width="125"> <img border="0" src="xxx.gif" width="125" height="17"></td> <td width="125"> <img border="0" src="xxx.gif" width="125" height="17"></td> <td width="125"> <img border="0" src="xxx.gif" width="125" height="17"></td> </tr> </table> <p> </p> <p> </p> <p> </p> <div id="menu" style="width: 150px; height: 576px"> <table border="0" cellpadding="0" style="border-collapse: collapse" width="150"> <tr> <td>メニュー1</td> </tr> <tr> <td> メニュー2</td> </tr> </table> <p> </p> </div> <div id="content"> メイン<p> </div> </html>
お礼
やりたいこと、そのままです。 CSSは本ばっかり何冊も溜まってしまって、やっと今日、始めたばかりなのですが？？？だらけで・・・。 自分で複雑にしてしまっているのがよくわかりました。 教えていただいたのをもう一度ちやんと理解したいと思っています。 本当に何度もありがとうございました。
- spinach-chicken
- ベストアンサー率57% (24/42)
それからマージンが変わると絶対座標も変わるので、ご注意ください。 （absoluteのポジション指定は変更があるたびに全部調整しなければならなくなるので、使用しない方が良いかと思いますよ。）
お礼
absoluteは参考になりました！ bodyにmargin0で指定してみたと思ったのですが、ミス記述して検証したのかも知れません。 本当に何度もありがとうございました。
- spinach-chicken
- ベストアンサー率57% (24/42)
ということは、単に body { margin-left:0px; } というスタイルをスタイルシートに追加するだけでは駄目でしょうか？ 上下左右全部マージンを無くすなら、 margin:0px; にすれば良いと思いますが。 bodyタグに書くなら <body style="margin:0px;"> でどうでしょう？
- gammo194
- ベストアンサー率30% (52/169)
BODYの記述がどういうものかやはり良くわからないのですが… 要するにページの左マージンを0にする指定を CSSで出来ればいいのでしょうか? もしそうでしたら、 body { margin:0px; font-size:10pt ; line-height:20px ; background-color:white; color : black ; } これ(↑2行目追加)だけで事足りると思うのですが。
お礼
訂正します。 <div id="menu" style="width: 150px; height: 576px"> は実際には <div id="menu"> と書いています。
補足
HTMLはこうなんです。 何度もすみません。 <body> <div id="top"> <table border="0" cellpadding="0" style="border-collapse: collapse"> <tr> <td><img src="xxx.gif" width="220" height="95"></td> <td><img src="xxx.jpg" width="530" height="95"></td> </tr> </table> </div> <div id="top1"> <table border="0" cellpadding="0" style="border-collapse: collapse" bgcolor="#999999"> <tr> <td width="125"> <img border="0" src="xxx.gif" width="124" height="17"></td> <td width="125"> <img border="0" src="xxx.gif" width="124" height="17"></td> <td width="125"> <img border="0" src="xxx.gif" width="124" height="17"></td> <td width="125"> <img border="0" src="xxx.gif" width="124" height="17"></td> <td width="125"> <img border="0" src="xxx.gif" width="124" height="17"></td> <td width="125"> <img border="0" src="xxx.gif" width="124" height="17"></td> </tr> </table></div> <p> </p> <p> </p> <p> </p> <div id="menu" style="width: 150px; height: 576px"> <table border="0" cellpadding="0" style="border-collapse: collapse" width="150"> <tr> <td>メニュー1</td> </tr> <tr> <td> メニュー2</td> </tr> </table> <p> </p> </div> <div id="content"> メイン<p> </div>
- spinach-chicken
- ベストアンサー率57% (24/42)
文字に関しては、 ・margin ・padding ・text-indent ページ自体なら Bodyタグの <body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0"> などで変わりませんでしょうか？
お礼
ありがとうございます。 今までBodyタグでやっていたんですけど、CSSでレイアウトを組みたくて・・。
お礼
ありがとうございます。 上の２ブロックは左に寄りました！ あとは左右に並べたプロックがまだそのままです。 div#menuにはHTMLでテーブルを組んでいますが、spacingは0です。 そもそも左右に並べるのに下記の書き方は違うのでしょうか。 本の通りやったんですけど・・・。 div#menu { float:left;} div#content { float:left; border-left:1px solid #666666 padding-top:10px; padding-left:20px; width:580px; }