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


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

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2007/08/15 21:49:59
  • 終了:2007/08/17 15:35:50

ベストアンサー

id:Yuhshi No.1

Yuhshi回答回数7ベストアンサー獲得回数12007/08/16 00:58:58

ポイント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はダミーです。

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

id:thyself2005

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

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

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

2007/08/16 01:52:34

その他の回答(1件)

id:Yuhshi No.1

Yuhshi回答回数7ベストアンサー獲得回数12007/08/16 00:58:58ここでベストアンサー

ポイント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はダミーです。

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

id:thyself2005

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

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

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

2007/08/16 01:52:34
id:Yuhshi No.2

Yuhshi回答回数7ベストアンサー獲得回数12007/08/16 02:01:57

ポイント50pt

すいません。

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

URLはまたダミーです。

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

id:thyself2005

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

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

div#main .hatena-module {

margin: 0% 5%;

padding: 4px;

}


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

2007/08/16 03:02:22
  • id:thyself2005
    度々申し訳ありません。
    IEで確認したところ問題は解決されていたのですが、firefoxの場合だと、区切り線(最近の記事【5日分】や過去の記事【月別一覧】の下の線)が右側にはみ出しています。
    さすがにこればっかりは直せそうにないのでしょうか?
  • id:Yuhshi
    div#main .hatena-module {
    margin: 0% 5%;
    padding: 4px;
    width:auto !important;
    }
    これで大丈夫ではないでしょうか?
  • id:thyself2005
    何度もご回答いただきありがとうございます。
    上記の指定で問題が見事解決しましたので、この質問を終了させていただきます。
    本当に助かりました。ありがとうございました。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません