http://dca-labo.info/demo8/
上記サイトの左端 コンテンツエリアと再度バーの間、右端
各自の空白のエリアをもっと狭くしたいと思っています。
スタイルシートのどの部分の修正が必要か教えて欲しいです。
関係しているであろうstyle.cssの記述を下記に抜粋しました。
結構修正しているので(かなり苦し紛れに)
その修正がまずい可能性も考えられます。
#page {
margin: 2em auto;
max-width: 1100px;
}
#main {
clear: both;
padding: 1.625em 0 0;
}
#primary {
float: left;
margin: 0 -20.4% 0 0;
/* margin: 0 -26.4% 0 0; */
width:650px;
/* width:70%; */
}
/* 20130303修正 */
#content {
/* margin: 0 34% 0 7.6%; */
margin: 0 24% 0 7.6%;
/* width: 58.4%; */
/* width: 88.4%; */
width:82.4%;
}
#secondary {
float: right;
margin-right: 5.6%;
/* width: 18.8%; */
width: 20.8%;
/* width: 300px; */
}
/* Singular */
.singular #primary {
margin: 0;
}
.singular #content,
.left-sidebar.singular #content {
margin: 0 7.6%;
position: relative;
width: auto;
}
「#content」と「#secondary」に対する指定を変更します。
#content { /* margin: 0 24% 0 7.6%; */ margin: 0 24% 0 4%; /* 左側の余白を小さく ※値を4つ指定した場合は、上、右、下、左の順番になっています。※ */ /* width: 82.4%; */ width: 90%; /* 幅を大きく */ }
#secondary { float: right; margin-right: 3%; /* 右側余白を小さく */ width: 20.8%; }
それから、「#primary」の幅をpxによる固定値ではなく、%指定にした方が良さそうです。(ブラウザの幅を変更して確認してみてください。)
#primary { float: left; margin: 0 -20.4% 0 0; width: 73%; /* %で指定 */ }
ありがとうございます。ほぼ解決しました。1点だけご教授頂ければと思います。
2013/03/19 21:30:09http://dca-labo.info/demo8/testimg/031903.jpg
現状上記のような感じになっています。
左端がつまっているので若干空けたいのですがどこを調整したら良いでしょうか?
CSSは上記回答と同じにしている前提でお願いします。
「上記回答と同じにしている前提」とはどういう事でしょう?
元の質問の「狭く」の逆ですから、左側の余白に指定している値を大きくするといいのですが・・・
元の「7.6%」で空きすぎで回答の「4%」では狭すぎるのでしたら、「5%~6%」程度の間で調整するといいのではないかと思います。
2013/03/20 03:02:20