下記のようなCSSとHTMLファイルにてデザインをしています。
main 内にてpaddingを上下左右に10px 有効にしたいのですが、下記のような記述をCSSにした場合、padding が top (bottom?)にしか適用されません。左右に適用させるにはどうすればよいのでしょうか？
よろしくお願いします。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
<link rel="stylesheet" media="all" type="text/css" href="index.css" />
</head>
<body>
<div id=wrapper>
<div id=header></div>
<div id=face></div>
<div id=navi></div>
<div id=main></div>
<div id=footer></div>
</div>
</body>
</html>
body{background: url(img/bg.gif);
margin: 0 auto;
text-align: center;}
#wrapper{width: 800;
margin: 0 auto;
background: #EEE;}
#header{clear: both;
height: 50px;
text-align: left;
background: #009 url(img/header.gif) no-repeat;
border-bottom: 1px solid #FFF;}
#face{clear: both;
height: 200px;
text-align: left;
background: url(img/face.jpg) no-repeat;
border-bottom: 1px solid #FFF;}
#navi{float: left;
width: 130px;
height: 550px;
background: #009;
text-align: center;
border-right: 1px solid #FFF;}
#main{font-family: Maiandra GD, Verdana, Arial;
font-size: 14px;
line-height: 20px;
text-align: left;
padding: 10px; }
#footer{clear: both;
height: 50px;
background: #009 url(img/footer.gif) no-repeat;
border-top: 1px solid #FFF;}
投稿日時 - 2006-06-17 13:16:49
mainの位置が確定していないからですね。
#main {margin:0px 130px;}
#main2 {text-align: left;padding:10;}
とすれば、mainがnaviの幅分右にいきますので
そのなかのmain2に文字を書けばよいでしょう
<div id=main><div id=main2>文字</div></div>
投稿日時 - 2006-06-17 15:16:53
お礼
ありがとうございます。
ご指摘の通り、main の位置を指定していなかったからです。margin にて main の位置を指定したら、padding もちゃんと有効になりました。
重ねてありがとうございます！
投稿日時 - 2006-06-18 06:34:46
0人が「このQ&Aが役に立った」と投票しています
