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

ダイアリーのフッタにsection、calendar各モジュールを設置しているのですが、見栄えが優れません。

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

一見問題ないように思えますが、例えば上記のような短い記事の場合、サイドバーとフッタ部分が交差してしまい、非常に見づらいカタチとなってしまいます。
そこで、このseciton&calendar各モジュールの幅を記事枠内に収めるためには、スタイルシートにどのような指定をすればよいのでしょうか?

参考までに、希望の(こうなりたい)イメージ図を添付します。
また現在使用しているデザインテーマは「hatena2-black」で、div.dayやdiv.main等の、いわゆる記事周りについては何も指定しておりません。
(参考:http://d.hatena.ne.jp/themesample?hatena2-black)

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

1199215414
●拡大する

●質問者: 正衛門
●カテゴリ:はてなの使い方 ウェブ制作
✍キーワード:イメージ サイドバー スタイルシート ダイアリー テーマ
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● Yuichirou
●60ポイント ベストアンサー

hatena2系テーマでは、div.sidebarをdiv.mainより後に書きながら、段組みにfloatを使用し、かつdiv.sidebarの幅を固定するために、「ネガティブマージン」というテクニックを使用しています。

参照:CSSによる段組(マルチカラム)レイアウト講座 - CSSによる2カラム(2段組)レイアウト - メインカラム幅可変、サイドバー幅固定 2カラム

このテクニックの注意点として、div.mainの幅が100%となる、つまりサイドバーの部分を含んでしまう点があります。hatena2系テーマでは、

.main div.calendar, .main div.day{
 margin-right: 235px;
}

と設定することで、div.mainの中の要素がサイドバーとかぶらないようにしています。

つまり、この設定をフッタ部分にも適用させればいいのです。例えば、

.main div.hatena-module {
 margin-right: 235px;
}

のように設定すればよいでしょう。

◎質問者からの返答

ありがとうございます。

枠線も含め、

div.main .hatena-module {

margin-right: 235px;

border-top: 1px solid #56575f;

border-right: 1px solid #56575f;

}

と設定することで問題が解決できました。

関連質問


●質問をもっと探す●



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