CSSレイアウトで通常のHTMLで作成しています。
背景画像が表示されないくて困っています。
他の方の質問で似た事例があったのと、
情報サイトを見てみたのですがどうしても上手くいきません。
この場合floatとclearはどう使えば背景が表示されるのでしょうか?
http://oshiete1.goo.ne.jp/qa3882745.html
http://2nose.com/css/?ID=120
bodyには別背景を指定してあるのでbodyへの指定はできません。
何かアドバイスがあれば教えて頂けますでしょうか。(__)
確認はIE8です。
[ css ]-----------------------------------------------------
#wrap{
width: 920px;
height: 100%;
margin-left: auto;
margin-right: auto;
background: url(../img/background.jpg) repeat-y;
}
#contents{
clear: both;
}
#sidemenu{
width: 275px;
float: left;
}
#mainbox{
width: 570px;
float:right;
}
[ html ]----------------------------------------------------
<div id="wrap">
<div id="contents">
<div id="sidemenu">サイドメニュー内容</div>
<div id="mainbox">メインコンテンツ</div>
</div>
</div>
以上です、よろしくおねがいします!
No.3ベストアンサー
- 回答日時:
floatというのは特殊で、floatが指定されているブロック要素(今回は#sidemenu,#mainbox)を囲むブロック要素は高さが0になります。
なので#contentsのbackgroundに指定をしても何も表示されなかったでしょう?floatのが指定してあるブロック要素の高さは無視されます。
なので、例え#sidemenu{height:500px;}と指定してもこの場合#contentsは高さ0のままです。
またclearの指定方法も間違っています。floatを囲うブロック要素にclearを指定しても何も意味はありません。
この場合使うとしたら
<div id="wrap">
<div id="contents">
<div id="sidemenu">サイドメニュー内容</div>
<div id="mainbox">メインコンテンツ</div>
<div style="clear:both"></div>
</div>
</div>
でしょうね。これで初めてclearの意味が出て#contentsと#wrapの高さが出ます。ただ、これだと空のボックスが生まれる為W3Cに準拠したコーディングとは言えませんが。
また例えば#sidemenuの内容よりも#mainboxの内容が多く#sidemenuの内容の高さの方が低くなってしまう場合はどうやっても現在のCSSでは#sidemenuの高さを#mainboxの高さまで広げる事は不可能です。CSS3.0では可能だったりしますが、IE6等が対応してないのでとりあえず置いときます。
その場合は#sidemenuの背景だけが欲しい場合でも#contentsに背景を指定します。これで#sidemenu,#mainboxどちらが高くなっても高い方の高さまで背景が反映されます。
#contents{backgrounde:url(画像) repeat-y left top}
のように#sidemenuの背景の幅の画像を左側に寄せて縦だけにリピートさせます。repeat-xかも。。忘
ちなみに上の方に書いたclearのかかったdivをおく対処法ですが、先ほども述べたように空のブロック要素は本来書かないほうがよいです。
参考サイトのにかかれてあるようにafter疑似要素というのを利用してfloatを解除します。
ネットで「float after疑似要素 解除」などで調べると出てきますが、もしプロの方でなければ空要素の<div style="clear:both"></div>を書くのが楽です。できれば疑似要素のfloat解除はサイト制作に必須スキルですので勉強した方が勿論よいですが。
参考URL:http://www.cptskgj.com/ilog/2008/04/css-floatcle …
ご回答頂きましてありがとうございます!
とても丁寧にご説明して下さって感謝します。
floatを甘くみていました…。
参考サイトも拝見させて頂きました。
上の回答者様のやり方も簡単ですが、
今回W3Cに凖拠したコーディングを行いたいので、
after疑似要素でやってみたところ、表示されました!
本当にありがとうございました。
必須スキルとして勉強させて頂きます!
No.4
- 回答日時:
<div id="wrap">
<div id="contents">
<div id="sidemenu">サイドメニュー内容</div>
<div id="mainbox">メインコンテンツ</div>
<div style="width:1px;height:1px;line-height:1px;font-size:1px;display:block;"></div><!--付加-->
</div>
</div>
このような構成で、wrapの背景をwrapの高さ分表示されるためには、floatの後に
<div style="width:1px;height:1px;line-height:1px;font-size:1px;display:block;clear:both;"></div>
などを入れると、contentsの高さがきまり、結果wrapの高さも決まります。
これを、きちんと考えなら、clearfixを検索してください。
ご回答いただきましてありがとうございます!
試しにやってみたところ、背景が表示されました。
contentsの高さを確定させる要素か設定が必要なのですね。
でそこに廻り込解除指定。
clearfixの検索をして勉強してみます。
ありがとうございました。
No.2
- 回答日時:
sidemenuを重要視するならsidemenuに背景画像を指定。
contentsに縦横の大きさを指定すればsidemenuに縦横の大きさを指定して無い状態で在れば、contentsの縦横の大きさをsidemenuは継承する。
一旦初期化して、必要な要素とセレクタのみしにて、其処から追加する項目を増やせば良いのでは?
アレやコレやと悩む必要が無くなります。
今回の案件で云うなら左右配置のみから始める。
アドバイスありがとうございます!
普段通りいけると思っていたからまだ勉強不足だったとは
知らず時間を使ってしまいました。
まず大枠から確定させてから進めるのが一番ですね。
ありがとうございます。
No.1
- 回答日時:
body全体でなく、一部の要素部分に背景を設定する時は、
該当するidやclass内に対してそれぞれ背景色(画像)を設定します。
今回の例で言えば、
contents、sidemenu、mainboxの各要素に対して
backgroud-color:xxxxxxとかbackground-image:xxxxxx
(xxxxxxはそれぞれ色や画像ファイル)
と指定してやればブラウザが(よほど古いものでなければ)
何であれちゃんと表示されますよ。floatやclearの指定の仕方には
関係ありません。
早速回答頂きましてありがとうございます。
すみません、ひとつ説明を忘れていました。
今回背景指定したいのは
<div id="sidemenu">サイドメニュー内容</div>
の後ろに表示させたい背景でして、
その背景画像を#contentsの縦幅いっぱいにまで表示させたいのです。
#sidemenuに設定すると表示はされるのですが、
height:auto;やheight:100%;を入れても
sidemenuの内容の長さで切れてしまいます。
そこで#contentsや#wrapに入れてみたりしたのですが
そうすると表示されなくなってしまいました。
何か別の要素が邪魔してしまっているのでしょうか…?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS PCサイズで赤い画像2つと、青い画像2つがそれぞれ横に2つずつ並んでいるのですが、これをスマホサイズ 5 2022/04/11 12:01
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
【コーディング】途中から位置...
-
divのheight指定で画面一杯に表...
-
html スクロール要素を下から表...
-
【CSS】floatで左右に並べた...
-
★★★フッター最下部固定/スクロ...
-
CSSでdivのheightを動的に
-
TABLEの高さを固定したいのですが…
-
ロールオーバーで画像拡大、z-i...
-
文字を固定したいのですが…
-
css固定したフッターが本文と重...
-
スクロール可能なチェックボックス
-
Ctrl+F(検索)の窓を出したいの...
-
離れた場所にマウスオーバーで...
-
MAX関数を使ってからLEFT JOIN...
-
embed要素のsrc属性の値を変更...
-
javascriptテキストBOX色を元に...
-
複数のバナーをリロードする度...
-
onmouseoverの表示切り替えが上...
-
onclickで画面が固まる・・・ら...
-
チェックボックスに入っている...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
CSS <div>の入れ子が反映さ...
-
フッター上部に謎の隙間
-
Ctrl+F(検索)の窓を出したいの...
-
【CSS】floatで左右に並べた...
-
css固定したフッターが本文と重...
-
HTMLですCSSです 画像のように...
-
htmlのstyleのposition:relativ...
-
HTMLですCSSです この画像のよ...
-
Flickity で画像にリンクを貼る...
-
画像の特定の座標にカーソルが...
-
チェックボックスの背景色って...
-
html スクロール要素を下から表...
-
レイアウトが崩れないようにす...
-
スクロール可能なチェックボックス
-
リンクで違うページの指定箇所...
-
オンマウス時に別画像を上に重...
-
フッターの下に隙間ができてしまう
-
スタイルシート(CSS)で、高さ...
-
かなり困っています。知恵を貸...
-
離れた場所にマウスオーバーで...
おすすめ情報