2カラムのページを作ろう 8 フッターの設定 floatの解除

今回のフッター部分作成で、スタイルの設定は、終了です。

フッターのスタイル設定

タブ 項目 数値など
classのスタイル  名:.footer ()
フォント サイズ 80 パーセント
色と背景 前景色 #6d9493
文字のレイアウト 水平方向の位置 真ん中
レイアウト ボーダー:上方向 3 ピクセル
ボーダー:上方向 スタイル 実線
ボーダー:上方向 #506d6c
パッディング 上方向 15 ピクセル
下方向 30 ピクセル
位置 属性 回り込みの解除 両方
#footer{
  font-size : 80%;    
  color : #6d9493;
  text-align : center;
  border-top-width : 3px;
  border-top-style : solid;
  border-top-color : #506d6c;
  padding-top : 15px;
  padding-bottom : 30px;
  clear : both;
}

以上

フロートの解除

ここでのポイントは、表の最後にある項目。
「回り込みの解除・両方」【clear : both;】です。

フロートの解除には、左回り込み解除【clear : left; 】右回り込み解除 【clear : right;】がありますが、この両方解除の【clear : both;】の設定でOKです。

これで、ふらふらしている、フロートさんとは、おさらばです。

もう一つのポイント

クリアーしたボックス(ここでは、フッターのこと)では、上方向のマージンが効きません。

だ、だ、だれが決めたの!?

また、おまえか!!
ルールなんですぅ!!

どうすりゃいいのよ?

今回のように、パッディングで上の余白を設定するか、フロートさせたボックスの下方向にマージンを設定すれば、よいのです。
方法は、色々あるので、あれこれ試してみてね。

マージンさんには、マージンさんの事情があるのです。
今まで、色々苦労した管理人は、マージンさんとは、少し距離をおいてお付き合いをしています。

以上で、今回の2カラムのCSSの設定は終了です。

次回は、HTMLを書いて終わりだよ!

ブログランキング・にほんブログ村へ なるほど! と、思ったらクリックしてね!

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Post Navigation