2005年05月19日

ブログのデザインが見苦しかったのを修正

このブログで使っているテンプレートは、元々左にメニューがあるタイプ。
それを設定画面で右メニューに変更して使っている。

左のほうにメニューの背景画像だけ残って見苦しい状態になっていた。
スタイルシートがおかしかったので修正した。


float:left; なんてはじめて知った。昔ながらのテーブルでのレイアウトから考えたらすばらしく簡潔に書けていい。
これはこれで、ブラウザの互換性を考えたらはまるんだろうけど。



変更点
左メニューのときは #links-left が使われているのだろうが、
Web画面で変更したときに #links が使われるようになっていた。
#links-left の設定値を #links へ移す。

初期値
#links-left {
font-weight:normal;
width:220px;
float:left;
margin-top:0px;
background-image:url(http://blog.seesaa.jp/img/bg/cyber/links_bg.gif);
}
#links {
}


変更後
#links {
margin-top:0px;
width:220px;
float:left;
background-image:url(http://blog.seesaa.jp/img/bg/cyber/links_bg.gif);
}

あと、Firefoxでは左のマージンは問題ないんだけど、Internet Explorer6で見てみたら大きすぎるので #content のマージンを40px → 20pxに変更。

初期値
#content {
margin-left:40px;

変更後

#content {
margin-left:20px;


参考Webページ
 スタイルシート段組
 http://desperadoes.biz/style/dan/index.php
posted by 端っこなひと at 23:35| Comment(0) | TrackBack(1) | Webデザイン | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

この記事へのトラックバックURL
http://blog.seesaa.jp/tb/3757300

この記事へのトラックバック

HTML & スタイルシート レイアウトブック
Excerpt: 本屋に通う事数回、中身を比較検討すること数時間・・。妙に懲りすぎないスタンダードな2段組、3段組のホームページレイアウトに関する事が書いてある本。 自分が作りたい感じのデザインの作り方を書いてあった..
Weblog: 淡々と映画や本を語るブログ
Tracked: 2005-05-27 18:01