異文化に恋してる

異質な考え方に触れて参考になったときの備忘録
異文化に恋してる TOP  >  スポンサー広告 >  web・ネット備忘録 >  ブラウザ別互換性メモ◆コンテンツとサイドバーの背景色

スポンサーサイト

--/--/-- --:--

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
このエントリーをはてなブックマークに追加
[ --/--/-- --:-- ] スポンサー広告 | TB(-) | CM(-)


ブラウザ別互換性メモ◆コンテンツとサイドバーの背景色

1940/01/03 00:00



・サイドバーの背景が黄色
・メイン部分の背景が赤
・短い方が長い方の長さに合わせる

↑のようなサイトをつくる場合

HTML
<div id="all">
<div id="sidebar">▲▲▲</div>
<div id="main">***<br/>***</div>
</div>

CSS
#all {
  background: url(yellow-red.jpg) repeat; ←背景色を下まで伸ばす画像
  
  width: 600px;
  }
#sidebar {
  float: left;
  width: 200;
  background: #ff0;
  }
#main {
  float: left;
  width: 200;
  background: #f00;
  }


と書くと、



chromeとFirefoxでは、背景色を補う画像が反映されない・・・



⇒divを1つ補うとうまくいく!

HTML
<div id="all">
<div id="sidebar">▲▲▲</div>
<div id="main">***<br/>***</div>
<div id="hosei"></div> ←#all内の最下部に追加
</div>

CSS
#hosei {     ←CSSに追加
  clear: left;
  }



このエントリーをはてなブックマークに追加
[ 1940/01/03 00:00 ] web・ネット備忘録 | TB(0) | CM(0)


コメントの投稿












管理者にだけ表示を許可する
トラックバック
この記事のトラックバックURL

プロフィール

有咲

著:有咲
旅行しながら風景描きまくりたいな。

ブログランキング・にほんブログ村へ
にほんブログ村 美術ブログ スケッチ旅行へ
にほんブログ村 その他日記ブログ 雑感へ

ブロとも申請
☆ブロとも申請大歓迎☆

この人とブロともになる
facebook
ご連絡等を承っております

QLOOKアクセス解析


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。