スポンサーサイト

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


▼ランキングに参加中です。記事がおもしろかったら応援してね。▼


にほんブログ村 猫ブログ 猫 お出かけ・お散歩へ
にほんブログ村
FC2ブログランキング
FC2ブログランキング


帰ってきたサイドバーの巻

★アフィリエイトショップ、開店への道_3ページめ


帰ってきたサイドバーの巻


左サイドバーが本来の位置から消え、画面下にくっついてしまいました。

左サイドバー消えた


いわゆる、ボックス崩れです。

CSSでは
<DIV>から</DIV>の間のみ設計図が有効な空間(ボックス)があり、
<DIV>を付け忘れたり、</DIV>で閉じ忘れたりすると
他のボックスにルールが適用されて、ボックスが崩れるのだ。


リビンクの設計図をバスルームの設計図に適用しちゃったらマズイでしょう?。


HTML内の<DIV>と</DIV>の数が会ってない時によく起こるので

それぞれの数を”置換え”や”検索”で数えてみればよい。

案の定、</DIV>が1コ足りなかった。


・・・問題はどこに書き足すか・・。

飼い主のCSSは

900pxのボックスの中に745pxのボックスが、
さらに745pxのボックスの中には3つのボックスが横並びに150px590px150pxとなっている。
150px590px150pxは、左サイドバー、商品棚ボックス、右サイドバー。

それぞれのボックスに<DIV>で指示した設計図のルールが適用されているのだ。

なので、cssでは、どこからどこまでがボックス範囲か見てやればよい。

HTML内での<DIV id=”contaainer”・・のボックス範囲を見たければ

css内で・・

#container{
width: 900px;
border: 2px solid #ff0000;

border:範囲に枠を表示させる:線の幅2pxで 直線で 赤色で;

枠を表示させれば、範囲を目視できるのだ。問題が解消したら後で消せばよい。



こうやって問題を一つずつ解消しながら、チマチマ作業を進めていく。

飼い主は物忘れの激しいお年頃である。

こんなめんどくさい作業は二度とゴメンなのである。


ボックス崩れを未然に防ぐため、
HTML内をコメントだらけにしてやった。
<!---->HTML内のコメント

<DIV id=”box01” ・・><!--左サイドバー始め-->
・・・
</DIV><!--左サイドバー終わり-->

づづく


←『サイドバー消えるの巻』へ戻る
関連記事


▼ランキングに参加中です。記事がおもしろかったら応援してね。▼


にほんブログ村 猫ブログ 猫 お出かけ・お散歩へ
にほんブログ村
FC2ブログランキング
FC2ブログランキング


テーマ : アフィリエイト
ジャンル : アフィリエイト

コメントの投稿

非公開コメント

スポンサーリンク
カテゴリ
プロフィール
myfam03.jpg
飼い主:イチイチ君
住所:石川県
趣味:動物いぢり、乗馬、苔盆栽

クロイナー
名前:クロイナー
2008年5月生まれ♂
体重:6.8kg



名前:兼六園ポン太郎(ぽんちゃん)
2014年春拾い♂
体重:3.0kg
兼六園で拾った赤猫
最新記事
イチイチ君のほむぺ&ブログ
アニマル雑貨けもの屋さん
けもの屋さんブログ
恐竜ブログ
アルバム
ご訪問ありがとです
参加しています


↓クロイナーは300黒猫目だよ↓
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。