【CSS編集】クリア系左右メニューテンプレが変だ。

クリア系左右テンプレは可変タイプなのですが、ブラウザの表示幅を760px以下にしてしまうと記事部の投稿ボタンが消えてしまいます。

CSSを編集する前の状態でも投稿ボタンが隠れてしまいますので、コチラの件とともに是非修正していただきたいですね。

他の可変タイプのテンプレートだと、コメントエリアが引っかかるように処理されるのですが、クリア系テンプレは右メニューの下に隠れるように処理されてしまいます。

CSSをカスタマイズすれば調整できそうな気がするのですが、私の知識では可変を維持したままその処理を実現するのは無理でした…。

どなたか、どうしたらよいのか教えてください…。

それが、わかれば逆にクリア系左メニューや右メニューでも可変バージョンが可能になるのかな？

一応、クリア系左右メニューで固定幅にしてあげると、投稿ボタンが隠れることはなくなりましたのでその処理方法をお教えしますね。

処理をしたBLOGはコチラ。（テンプレやCSSを変更しているかもしれませんが…）

変更点

/* ページ全体の背景と余白 */ body { background-image: url(); background-repeat: ; background-position: ; margin:0px; padding:0px; background-color:#e6dfd1; }

左右のpaddingを0pxに変更。

/* ページ全体の囲み　*/ #content{ margin: 0px auto; color: #333; width:760px; border-right: 1px solid #FFD57D; border-left: 1px solid #FFD57D; background-color:; background-image:url(/user_image/01/7a/cbdcca8dda4329e19e81d443aca4d5dd.png); _height: 100%; }

margin: 0px auto;で「ページ全体の囲み」を中央配置
width:760px;「ページ全体の囲み」の幅を760pxに固定。

/* 記事部分レイアウト用　*/ #center{ width:400px ; overflow:hidden; height: 100%; }

記事部の幅を400pxに固定。

以上です。
両サイドのメニューが180pxに固定されていますので
180px×2=360pxあるんです。
それで、記事部分の幅を400pxにすると
360px＋400px=760pxとなり
ページ全体幅760pxと一致するという訳です。

760pxはクリア系左メニュー版と同じ幅ですね。

これならばブラウザの幅を変更しても、記事部の幅が狭くなることはありませんので投稿ボタンは隠れません。

760px以下に幅を狭めれば、ブラウザ下にスライダーバーが出てきます。

トラックバック

gooブログ スタッフブログ：シンプルテンプレート公開しました！