人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

ダイアリーのフッタに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;
}


ご回答宜しくお願いいたします。

1187182196
●拡大する


●質問者: 正衛門
●カテゴリ:はてなの使い方 ウェブ制作
✍キーワード:absolute BODY Hatena HTML margin
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● Yuhshi
●50ポイント ベストアンサー

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はダミーです。

http://d.hatena.ne.jp/thyself2005/20070807/p2

◎質問者からの返答

回答ありがとうございます。

子供セレクタ(>)は使用できないということですね。なるほどです。

上記の設定で問題は解決したのですが、div#main .centerは何を指定する要素なのでしょうか?


2 ● Yuhshi
●50ポイント

すいません。

.center(クラス) じゃなくて、 center(要素名) です。

URLはまたダミーです。

http://q.hatena.ne.jp/

◎質問者からの返答

回答ありがとうございます。なるほどですね。

さて、上記の指定を下記のようにしたところ、見た目が特に変更されなかったのですが、問題ないでしょうか?

div#main .hatena-module {

margin: 0% 5%;

padding: 4px;

}


↑カレンダークラスとセンター要素を指定から除外してみたのですが。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ