ブログにあなたが好きなことについての支払いを受ける

適切な方法をオフにフッターを配置するためフロート

ほとんどの初心者CSSのユーザーも" "明確な財産のことを聞いたことがない。 私は過去に、私はしていなかったと時間は私のレイアウトが正しくフローティングサイドバーに表示するために取得しようとしている私の脳をひねったを知っている。 ここにはどのように動作する:

divsレンダリング時には、ブラウザを通常の流れ、そして後に物事の正常な流れで、次の1つの場所を1つの場所にされています。 divsな側面があるときにそばにするには、通常の解決策"プロパティ彼らには、 "フロートを追加することです。 以下の場合は、両方の"左ナビゲーション" divをして"コンテンツ"事業部は、プロパティ"フロート:残っている; " 。 私たちの内側divs浮上して、コンテンツを置くことができますし、幸せなレイアウトをしている。 この問題は、物事の正常な流れでは、レイアウトを続けることはないので、物事をプッシュするのブラウザダウン通知する必要があります。 これらの2つの例に注意してください:

誤:

  <div id="wrapper"> 
     <div id="left-nav"> 
         ... 
     < / divを> 
     <div id="content"> 
         ... 
     < / divを> 
  < / divを> 
  <div =アイダホ"footer"> <p>このテキストの浮上divsの下に隠されている! ! < / divを> 

正しい:

  <div id="wrapper"> 
     <div id="left-nav"> 
         ... 
     < / divを> 
     <div id="content"> 
         ... 
     < / divを> 
  <div style="clear: both;"> < ! -明確な山車- -></部> 

  < / divを> 
  <div =アイダホ"footer"> <p>私のフッターは現在、フロート要素の下に表示されます! ! < / divを> 

それは小さな一行"行く"を維持するには、ブラウザの指示や下の流れを移動します。 このテストする最も簡単な方法" "背景色のラッパーを与えると、 2つのコード片の違いで各要素のコンテンツがある場合ですね。

ハイテクインタラクティブなウェブ2.0の例:

例1 (誤った) :

  +--(#ラッパー)---------------------------------+ 
  | +-----------+ +--------------------+ | 
  +---| |----| |---+ 
      | | | | 
      | | | | 
      | | | | 
      | | | | 
      | #左ナビゲーション| | #内容| 
      | | | | 
      | | | | 
      | | | | 
      | | | | 
      | | | | 
      | | | | 
      +-----------+ +--------------------+ 

例2 (正しい) :

  +--(#ラッパー)---------------------------------+ 
  | +-----------+ +--------------------+ | 
  | | | | | | 
  | | | | | | 
  | | | | | | 
  | | | | | | 
  | | | | | | 
  | | #左ナビゲーション| | #コンテンツ| | 
  | | | | | | 
  | | | | | | 
  | | | | | | 
  | | | | | | 
  | | | | | | 
  | | | | | | 
  | +-----------+ +--------------------+ | 
  | | 
  | + ---クリア:両方----------------------- + | 
  | | 
 +---------------------------------------------+ 
この
290
それつまずく!

投稿情報

このエントリを2007年12月31日(月)に掲載されたCSSの下で、 デザイン を提出されています。 閲覧回数は201している

タグ:

コメントフィード | ままにコメントする | トラックバックにしておきます。



前のポストあなたの サイトにはフラッシュ全体»のGoogle Analyticsのコードを追加します。
次の投稿: AJAXのお問い合わせフォーム »
ほとんどの記事を閲覧


    は、返信のままに

    注:これは、サイトの所有者は任意のコメントを投稿し、任意のコメントを受け付けているサイトの所有者の絶対的な判断で削除されますが何らかの理由で許可されています。