私の Sweetcron サイト では、Muxcron をベースに修正したテーマを使っています。
しかし、このテーマはちょっと問題があって、そのまま使うと Firefox ではフッタ部の表示内容が上に来てしまいます。
そこで、以下の CSS Hack を参考にしてテーマファイルを修正し、フッタ部がちゃんと思惑通りのところに表示されるようにしましょう。
New CSS Sticky Footer – 2009
_header.php
_header.php は 17行目付近を下記のように修正しましょう。
<body> <div id="wrap"><div id="main" class="clearfix"> <div id="header"> <div class="center_box">
これで、div#header と div#main_container が、div#wrap, div#main に内包された形になります。
_footer.php
_footer.php は、以下のように修正します。
</div> </div></div> <div id="footer">Powered by <a href="http://sweetcron.com/">Sweetcron</a>, styled by <a href="http://life.colin.vg/items/view/60">Muxcron</a></div> </body> </html>
_header.php で定義した div#wrap, div#main にを div#footer の前に閉じておいてあげましょう。
main.css
main.css の先頭に以下を追加します。
html, body, #wrap {height: 100%;}
body > #wrap {height: auto; min-height: 100%;}
#main {padding-bottom: 25px;} /* must be same height as the footer */
#footer {position: relative;
margin-top: -25px; /* negative value of footer height */
height: 25px;
clear:both;}
/* CLEAR FIX*/
.clearfix:after {content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
この CSS は、New CSS Sticky Footer で紹介されているものそのものですね。
つぶやく
RSSリーダーで購読する
ありがとうございます!
作者さんのサイトもそうだったからそういうもんなのねー、と思いながらも、サイトのタイトルに文字がかぶるから気持ち悪いしで困っていたのでした。
参考サイトも見てみたんだけど、やっぱり日本語で説明されているとわかりやすいですね。
テーマのいじり方もなんとなくわかってきたので、もう少しいろいろ試してみようと思ってます。
satchin さん、どもです。
Muxcron はシンプルだけど、ちょっとアレなので大幅に手を入れてます。
Permalink やら date やらは、吐き出されてるけど css で display:none にされちゃってますので、適宜治したほうがよいかと、思われます。
こんにちはー。
コレ、なんでをかもとさんのところは表示されていて、うちは表示されないんだろうと思ってしばらくcssをながめてたら、やっとみつけましたー。
コレに気づくのにかなりの時間を費やしました。
先にここ見ておけばよかったー。
satchin さん、どもです。
実は、ここに書いてないだけで、ゴチャゴチャと修正して使ってます。
そのうち整理できたら、またエントリするかも、しないかも。
Sweetcron テーマ Muxcron の修正 : dogmap.jp http://bit.ly/qI9Wa
そのまま使うと Firefox ではフッタ部の表示内容が上に来てしまうので、その修正方法を詳しく説明してくれています。
そのまま使うと Firefox ではフッタ部の表示内容が上に来てしまうので、その修正方法を詳しく説明してくれています。
そのまま使うと Firefox ではフッタ部の表示内容が上に来てしまうので、その修正方法を詳しく説明してくれています。