幼稚園時代「何組」でしたか？

CSSで左側の余白

解決済

  • 質問者：shizuku
  • 質問日時：
  • 回答数：6件

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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (6件)

No.6

  • 回答者： gammo194
  • 回答日時：

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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

やりたいこと、そのままです。
CSSは本ばっかり何冊も溜まってしまって、やっと今日、始めたばかりなのですが？？？だらけで・・・。
自分で複雑にしてしまっているのがよくわかりました。

教えていただいたのをもう一度ちやんと理解したいと思っています。
本当に何度もありがとうございました。

通報する
お礼日時：2004/11/06 00:25

No.5

それからマージンが変わると絶対座標も変わるので、ご注意ください。


（absoluteのポジション指定は変更があるたびに全部調整しなければならなくなるので、使用しない方が良いかと思いますよ。）
    • good
    • 0
    • 件
通報する
この回答へのお礼

absoluteは参考になりました！
bodyにmargin0で指定してみたと思ったのですが、ミス記述して検証したのかも知れません。
本当に何度もありがとうございました。

通報する
お礼日時：2004/11/06 00:36

No.4

ということは、単に


body {
　margin-left:0px;
}

というスタイルをスタイルシートに追加するだけでは駄目でしょうか？
上下左右全部マージンを無くすなら、
　margin:0px;
にすれば良いと思いますが。
bodyタグに書くなら
<body style="margin:0px;">
でどうでしょう？
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： gammo194
  • 回答日時：

BODYの記述がどういうものかやはり良くわからないのですが…


要するにページの左マージンを0にする指定を
CSSで出来ればいいのでしょうか?
もしそうでしたら、

body {
margin:0px;
font-size:10pt ;
line-height:20px ;
background-color:white;
color : black ;
}

これ(↑2行目追加)だけで事足りると思うのですが。

この回答への補足

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>

補足日時：2004/11/05 17:31
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

訂正します。

<div id="menu" style="width: 150px; height: 576px">

は実際には

<div id="menu">

と書いています。

通報する
お礼日時：2004/11/05 17:36

No.2

文字に関しては、


　・margin
　・padding
　・text-indent

ページ自体なら
Bodyタグの
<body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0">

などで変わりませんでしょうか？
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。
今までBodyタグでやっていたんですけど、CSSでレイアウトを組みたくて・・。

通報する
お礼日時：2004/11/05 16:28

No.1ベストアンサー

  • 回答者： gammo194
  • 回答日時：

ご質問の内容を正確に把握できているかわかりませんが…



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」を追加しただけですが。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。
上の２ブロックは左に寄りました！

あとは左右に並べたプロックがまだそのままです。
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;
}

通報する
お礼日時：2004/11/05 16:26

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報