ダイアリーのフッタにsection、calendar各モジュールを設置しているのですが、若干飛び出ており、見栄えが優れません。
http://d.hatena.ne.jp/thyself2005/20070807/p2
例えば、↑上記のような短い記事の場合、サイドバーとフッタ部分が交差してしまい、非常に見づらいカタチとなってしまいます。
そこで、このseciton＆calendar各モジュールの幅を記事枠（div.day）内に収めるためには、スタイルシートにどのような指定をすればよいのでしょうか？
参考までに、現在指定しているスタイルシートの内容、こうなりたいイメージ図を添付します。
div.hatena-body {
position: relative;
width: auto;
}
* html div.hatena-body {
width: 100%;
top: 0px; left: 0px;
}
/*main部分*/
div#main {
margin-left: 210px;
margin-right: 7%;
}
/*サイドバー*/
div#sidebar {
position: absolute;
top: 0px; left: 0px;
width: 170px;
margin-left: 7%;
line-height: 1.5;
}
ご回答宜しくお願いいたします。
No.1
7
1
50pt
div.day の「兄弟」に div.day と同じ設定をしてやれば良いのではないでしょうか？
ちなみに「 div#main > * 」はIE6でダメでした。
div#main .calendar, div#main .hatena-module, div#main .center{
margin:0% 5%;
padding: 4px;
}
根本的には div#main の padding や margin で調整したほうが良いようにも思います。
URLはダミーです。
No.1
71
ここでベストアンサー
50pt
div.day の「兄弟」に div.day と同じ設定をしてやれば良いのではないでしょうか？
ちなみに「 div#main > * 」はIE6でダメでした。
div#main .calendar, div#main .hatena-module, div#main .center{
margin:0% 5%;
padding: 4px;
}
根本的には div#main の padding や margin で調整したほうが良いようにも思います。
URLはダミーです。
回答ありがとうございます。
子供セレクタ（＞）は使用できないということですね。なるほどです。
上記の設定で問題は解決したのですが、div#main .centerは何を指定する要素なのでしょうか？
No.2
71
回答ありがとうございます。なるほどですね。
さて、上記の指定を下記のようにしたところ、見た目が特に変更されなかったのですが、問題ないでしょうか？
div#main .hatena-module {
margin: 0% 5%;
padding: 4px;
}
↑カレンダークラスとセンター要素を指定から除外してみたのですが。
正衛門
2007/08/16 03:09:58
1
2
2
1
5
20
18
Yuhshi
回答ありがとうございます。
子供セレクタ（＞）は使用できないということですね。なるほどです。
上記の設定で問題は解決したのですが、div#main .centerは何を指定する要素なのでしょうか？