2005年05月08日

とりあえず新デザイン用のCSSできたかな。

Posted by nene2001 at 12:56 / Tag(Edit): / 3 Comments: Post / View / 2 TrackBack / Google Maps

多少難ありですが、こちらのエントリに書いた新レイアウト案、CSSで実現できそうです。
同エントリのコメント欄で教えていただいたこちらのページを参考に、試してみました。

こんな感じ。
まだレイアウトが組めるかどうかのテストだけで、メニュー内容の見直しとかは全然まだ終えてませんが、とりあえず配置できそうです。
ちゃんと、HTML記述の上で、Main部分（中央）の記述が、左右のメニューより前に来るようになってます。
一応、firefox1、IE6、Opera7.5、Opera8（全てWindowsのみ）でチェックしましたが、ちゃんと見えていそうです。

参考にしたページに習って、ロジックを解説？すると、以下のような感じ。CSSはこちら。

少々難があるとすれば、firefox及びOperaで、右側のブラウザの表示域外に無地の余りスペースができてしまい、左右のスクロールバーが出てしまう事。

まあこれは実害なさそうなので、仕方ないかなー、と思ってますが...。

[composed and posted with ecto]

Related query words in Google & Yahoo

Related Books from Amazon

Trackback to this entry

TrackBack URL :

Trackbacks

ちょっとはマシかもしれない３カラムレイアウト
Excerpt: 以前はDTDなしの裸のHTMLだったlivedoor BlogのデフォルトHTMLテンプレートが、いつの間にか「HTML4.01 Transional」のDTD...
Weblog: パンパでガウチョ
Tracked: 2005年05月23日 01:36

ここギコのデザイン改善方法、募集します
Excerpt: ここギコ！: PCから見るWebの世界と、ケータイから見るWebの世界は別物なの...
Weblog: ここギコ！
Tracked: 2006年08月12日 09:07

Comments

はじめまして。
　いつも楽しみに拝見させていただいております。
　最初このブログを見つけたときには、「あら？」とか思ったのですが、これでデザインもスッキリですね。

Posted by: てい at 2005年05月08日 14:30

どうも見苦しい状況を長く続けてしまいすみません。
既にトップページは新デザインに切り替えました。
他のページも徐々に切り替えていきます。

しかし早々に問題を発見。
左サイドメニュー内の文字が、長過ぎる英単語等で160px内に収まらないと、ブロックの幅が大きくなってしまって、メイン部分の左ではなく下に回りこんでしまう現象を発見（＠IE）。
うーん、どうすればいいかな...。

そちらのブログも拝見させていただきました。
すっきりしたいい感じですね。
見習いたいです。

Posted by: ねね at 2005年05月08日 21:50

奪取ではお世話になってました。

解説？の図に、div.clearing for NN4 とか書いてあって、
NN4にも対応してるのか、すげーと思ったけど、ここギコはNN4で見たらめちゃくちゃでした…
さすがにそこまではやってないんですね。
(元のページの方では、ちょっとトリッキーな方法でCSSを切り替えて、NN4にも対応してる。すげー)

IEで左サイドメニューが下に行ってしまうのは、
#container2 の margin-left を、例えば -400px とかにすると、
400pxまでは、Firefox同様に、長い単語がはみでてメインに重なる状態になりますので、
とりあえずそんなんでどうでしょう。
(400pxを超えると、やっぱり下に行ってしまうわけですが、そんなに長い単語はあまりないと思うし。)

Posted by: あ at 2005年05月22日 01:31