今月のピックアップ - あなたのサイトに相互リンクシステムを! / 相互リンクのtooland

レイアウト崩れの原因について

2008-05-14 Wed

レイアウトを崩さない指定A

ブログのレイアウトを崩さないfloat指定テクニックです。




[ #content ][ #links-left ][ #links ]との間に[ #content ][ #links-left ][ #links ]それぞれの[width]指定で、自然な形で余白をつくります。

SeeSaaブログのfloat指定は、2カラムも3カラムも大半が{float: left;}という形で指定されていますが、{float: right;}を活用します。

サンプルCSS

#container{
width: 800px;
margin: 0;
padding: 0;
}
#content{
width: 550px;
float: left;
margin: 0;
padding: 0;
}
#links{
width: 200px;
float: right;
margin: 0;
padding: 0;
}
#footer{clear: both;}
この場合{clear: left;}から{clear: both;}
に変更する事を忘れない!

800px > 750px=550px+200px

float:left指定だけの場合、#contentに続いてすぐ#linksが回り込んできます。

これを#linksにfloat:rightを指定する事と#contentの幅を小さくしてやる事で、互いの要素間に自然な形で50px分の余白を設ける事ができます。

50pxほど余裕があるので、仮に#contentや#linksにpadding指定やborder指定をしても、50pxの範囲内ならレイアウトは崩れません。



タグ-[ レイアウト崩れ ]

[ 人気ブログランキングへ ] [ レイアウト崩れの原因について ] [ Comment(0) / TrackBack(0) ] [ ▲Top ]

データベースを用いた一覧表示サイトをまるごと簡単に作れる!

儲かりすぎ注意!アフィリエイトで儲かっている方は絶対にクリックしないで下さい!

ラブコスメティック

セクシャルヘルスケア商品の詳細・購入はこちら

シックス・アパート

企業サイトもPingoo!でアクセスUP

ブログ記事を投稿するだけで原稿料を貰える

わずか10秒程度でホームページの問題点が丸裸に!UNFINISHED無料ホームページ診断

▲Page Top

この記事へのコメント

コメント

お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

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

▲Page Top

最近の記事

簡単にリンク集が作成できる便利ツール (04/05)

その他のリンク (08/29)

SEO見直し完了 (06/03)

SEO実施 (06/02)

ボックスモデルを理解する (05/31)

SeeSaaブログ用テンプレート11 (05/30)

オリジナルテンプレート10の訂正 (05/29)

SeesaaSEO的<h1>そのA (05/28)

SeesaaSEO的<h1>その@ (05/28)

SeeSaaブログ用テンプレート10 (05/28)

最近のコメント
最近のトラックバック
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。