プロフィール

バジさん

Author:バジさん
 
所在 : 東京某所
職業 : Webディレクター
性別 : 男
 
課題 : 早起き
 
目標 : 株で生活

カテゴリー
推薦図書 その1

Webディレクション標準ガイド

■HTMLリファレンスなどと一緒にいつでも手の届く場所に置いておきたい一冊。
推薦図書 その2

Web標準の教科書

■全てのWebクリエイターに必携の書
FC2ブログランキング
ブロとも申請フォーム
スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


スポンサー広告 | 【--------(--) --:--:--】 | Trackback(-) | Comments(-)
自前サイトの「脱テーブルレイアウト」(その5)
前回の続きです。

さてさて、ここからの微調整でやらなければならないのが、以下となります。
現状の(図4)と完成型の(図1)を比べてみてください。

CSSで回り込みした状態


(図1)の状態にするには以下のことをしなければなりません。

1.サイトタイトルとコピーライトをコンテンツ表示部の右端に揃える
2.リスト化したボタンの前に付いた「●」を取り除く
3.リスト化したボタンの前のインデントを取り除く
4.サイトタイトル上の余白を調整
5.ボタン左とコンテンツ右の余白を調整(センター余白はそれにより自動決定)
6.各ボタンの縦の配置を揃える(最下位ボタンの下辺をコンテンツ表示部に揃える)
7.全体的に各パーツの余白を微調整して完成

方法は必ずしも上記だけではなく、これはあくまでも僕がたてたアプローチ。
バリバリのコーダーさんならもっとうまくやると思います。

さらに、アプローチは同じでも、実際のコーディングはまた人それぞれだったりします。

最初の5つは margin やら padding やらを駆使して(リスト化した部分の対応も)すんなり終了。
問題は6つ目の縦の配置を揃えるところ。ですが、コンテンツ表示部分は幸いにも高さ固定。

しかし6は、時間がかかりました・・・

まず最初に、多くの人が普通に試してみるだろう、margin、padding を駆使しての余白調整。
僕もまずはやってみて、IEではキレイに揃いました!パチパチ~。

で、他ブラウザでの動作確認、Opera、FireFox、etc・・・全てでバラバラです。
ようはIE以外ではちゃんと揃って見えません。

予想していたことなので、次に無駄な改行コードをなくして誤差をなくして行こう!と。
結果、あ~、やはりそれでもダメかぁ。
もしかしたら、それだけでもちゃんとできるのかもしれませんが、なんせ工数がありません。
新たに調べてやってる暇はなし。
(後日に調べる!宿題ができました。)

自分の覚えている範囲でなんとかする方法はないか・・・

(最終回へ続く)
スポンサーサイト


デザイン・コピーの話 | 【2006-06-04(Sun) 22:28:13】 | Trackback:(0) | Comments:(0)
コメントの投稿
管理者にだけ表示を許可する

カレンダー
03 | 2019/04 | 05
- 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 - - - -
月別アーカイブ
ブログ内検索
RSSフィード
最近の記事
最近のコメント
最近のトラックバック
リンク