アナログ
RSS  

なおったよな?2010/04/29 22:22

カレンダーを1行で表示するようにしてから、ナビ(<<前 次>>)が表示されないときに、記事タイトルが下がってしまう不具合をごまかしていたのですが、いい加減なおそうと本腰いれて調べてみました。

またやらかしそうなので覚書。
ブログは次のような構造になっています。

#head
#left
 .sidebar
  .mod-calendar
   .mod-body
    .calendar
#center
 #main
  #navi-top
  .msg

で、#headにカレンダーをオーバーラップするのにうっかり.calendarで「position:relative;top:-18px;」として調整してしまい、元の位置(.mod-calendar)に空白が残っていました。

カレンダーの横にナビを置くため、この空白を#navi-topに「margin-top:-40px;」として隠してしまっていたので、ナビがないページでは-40pxが効かず空白が現れ、記事のタイトルがその分下に表示されていたのでした。

ということで、.calendarを「position:relative;top:0;」になおし、#leftを「margin-top:-18px;」として左サイドバー自体を#headにオーバーラップさせて空白が残らないようにし、ナビがカレンダーの横に表示されるよう#navi-topを「margin-top:-21px;」に修正。

あとはごまかすために、いろいろ操作していたクラスを元に戻したり削除しておしまい。

注意点はカレンダーの横にナビを出すのに、#centerや#mainを「margin-top:-21px;」しないようにする。
そうしないと、#navi-topが表示されないときにも「margin-top:-21px;」が有効なので、カレンダーの日付が記事タイトルの上にオーバーラップして表示される。

ナビが表示されないケース(日付で表示やバックナンバーアーカイブ)を忘れると、またやらかしそうな気がした。

ところで後日、私はこれを読んで理解できるのかそちらの方が気になるのでした(とりあえずヒントになればいいやw)。


ついでだったのでbox-shadowの指定方法とアイデアの種 - Ghostpia Weblogをマネて影を下だけに出すようにしてみた。
今までが8px 8px 5pxだったから、ちと控えめすぎるかな。

コメント

コメントをどうぞ

※メールアドレスとURLの入力は必須ではありません。 入力されたメールアドレスは記事に反映されず、ブログの管理者のみが参照できます。

※投稿には管理者が設定した質問に答える必要があります。

名前:
メールアドレス:
URL:
次の質問に答えてください:
スパムがウザイので合い言葉を入れるようにしました。山と言えば川だろJK


コメント:

トラックバック

このエントリのトラックバックURL: http://puppet.asablo.jp/blog/2010/04/29/5050890/tb

※なお、送られたトラックバックはブログの管理者が確認するまで公開されません。