body指定したimgが複雑なデザインでレイアウト
- bodyにbackground-imageを配置したとき、div#contens部分の領域まで影響してしまう問題が発生しています。
- PCでは問題なく表示されるが、スマートフォンやiPadでは背景が縮小されてレイアウトが崩れる。
- 既存の方法では解決策が見つからず、div#contensに情報量に応じて背景を可変させる方法を模索しています。
- ベストアンサー
body指定したimgが複雑なデザインでレイアウト
お世話になります。 現在作成しているサイトに関しての質問です。 bodyにbackground-image指定である画像を配置しています。 それはよくあるデザインレイアウトの仕方だと思いますが、問題はデザイン的な要素がdiv#contens部分（#leftmenuや#rightmenu含む）の領域まで影響しているということです。（※添付画像参照） デザイン的にdiv#headerの領域を中心としたデザインなので、うまく上下のバランスをとってrepeat-yすることもできません。 このIMGのheightを2500pxほどの大きな画像にして配置していました。そうするとPCで閲覧した時は、問題なく見れますが、iPadやスマートフォンで閲覧すると背景のみ大幅に縮小されて表示されレイアウトが崩れます。 かといってheightをiPadやスマートフォンで普通に閲覧できるサイズの1024pxにすると、当たり前ですが今度はコンテンツの途中で画像が切れます。ちょっとボリュームのあるページで画像が切れます。 コンテンツ部分の背景は白なので、div#contensにbackground-color指定することも考えましたが、そうするとbodyのbackground-imageの上に白がのってきてやはり見栄えが悪いです。 いろいろ手を尽くしましたし、検索したりしましたが、どうしてもいい解決策がありません。 bodyにbackground-imageをrepeat-yさせずに、それでもdiv#contensに情報量に応じて背景を可変させたい場合、何かいい方法はあるのでしょうか。恐らく考え方自体を全く新しい方法を取らなければならないかと思いますが、どうかご教授ください。うまく説明できたか自信がありませんが、よろしくお願いします。
- toonie
- お礼率26% (55/210)
- CSS
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
後半の可変とかの意味が良く分からないけど、 コンテンツの上部の両脇に画像を配置したいって事ですね？ body,h1,h2,p,ul,li{ margin:0; padding:0;} body,#header,#contens{ background-color: white;} #AA { width:900px; /* ←BBの絵の画像の幅と同じに */ margin:0 auto; padding-bottom:1em; background: url(黄色画像.gif) repeat-y; } #BB { background: url(絵の画像.gif) no-repeat; /* ↓↓ BBの画像に合わせheader,contensの位置調整 */ padding: 40px 0 20px 150px; } つまり、 <body> <div id="AA"> <div id="BB"> <div id="header"> ～ ～ bodyに上げても良いが、狭くすると黄色画像がズレるから その対策をすれば、bodyに配置する方法でも良い。 画像は、両方とも透過gifを利用し、 AAの黄色画像とBBの絵の画像の黄色い部分の左からの座標と、 黄色い部分の幅は同じにする事。 -------------------- ＞このIMGのheightを2500pxほどの大きな画像にして配置していました。 そんなアホな事をしてはいけませんｗ
関連するQ&A
- CSSでレイアウト崩れ、＃rightmenuが下がって余白ができるのは
CSSでレイアウト崩れ、＃rightmenuが下がって余白ができるのはなぜ？ あまりCSSに詳しくないものです。どうかご教授ください。 添付画像のようにに、div分けして全体のデザインを制作しています。 #headerの下に#contensがあり、その中に#leftmenuと#rightmenuと区分けしています。 #leftmenuがメニューボタン部分で#rightmenuが情報を表示するコンテンツ部分です。 #contensはそれで閉じ、最後に#footerがあります。 ところが、#rightmenu部分に望んでいない余白ができます。 #leftmenuと頭で揃えたいのですが、何故か220pxほど下がって表示してしまうのです。（paddingやmarginの設定はしていません） 作業はdreamweaverで作なっているのですが、便利なものでボックスにマウスを寄せると赤いラインでボックスの表示をしてくれます。それを右クリックしてどのdivがそうさせているのか調べたら#contensだとありました。 しかし#contensのCSSをチェックしても何が原因なのか分かりません。 これはどうしてでしょうか？ 私個人の知識ではどうしても分かりかね質問させていただきました。 HTMLとCSSにどこかおかしなところがあればどうか教えてください。 よろしくお願いします。 HTML----------------- <body> <div id="header"> <h1>タイトル</h1> </div> <div id="contens"> <div id="leftmenu"> <a href="" id="ボタン1"></a> <a href="" id="ボタン2"></a> <a href="" id="ボタン3"></a> <a href="" id="ボタン4"></a> <a href="" id="ボタン5"></a> <a href="" id="ボタン6"></a> <a href="" id="ボタン7"></a> </div> <div id="rightrmenu"> <div id="rightbox-top"> <h3>本文</h3> <p>挨拶文</p> </div> <div id="rightbox-bottom"> </div> </div> </div> <div id="footer"> <p class="copyright">Copyrightうんぬん</p> </div> </body> CSS----------------- body { background-image:url(../image/top.jpg); background-position:top center; background-repeat:no-repeat; background-color:rgb(237,232,195); } div#header { width:800px; height:139px; margin-left:auto; margin-right:auto; } div#contens { width:800px; height:auto; min-height:520px; margin-left:auto; margin-right:auto; } div#leftmenu { width:161px; } div#rightmenu { width:639px; float:right; } div#footer { clear:both; height:100px; background-image:url(../image/top-bottom.jpg); background-position:top center; background-repeat:no-repeat; background-color:rgb(237,232,195); margin-left:auto; margin-right:auto; }
- ベストアンサー
- ホームページ作成ソフト
- 背景画像を二つ指定
こんにちは。 全体の背景画像(斜めストライプの柄)と、 コンテンツ部分に背景画像(白で両サイドに線)を別々に指定したいのですが、 IEではうまく表示されましたがNetScape、Firefoxでは真ん中の画像が表示されません。。 URLはこちら http://ic.web6.jp/portfolio/rigtig.html 全体の背景はbodyに、 コンテンツにはdiv要素にrepeat-yで背景をそれぞれ指定しました。 どうすればIE以外でもうまく表示されるでしょうか？ 背景を指定しているCSSはこちら body { width : 762px; margin : 0 auto; background-image : url("images/top_bg.gif"); line-height:1.4; font-size:10pt; } div#wrap{ width : 762px; background-image : url("images/body_bg2.gif"); background-repeat: repeat-y; }
- ベストアンサー
- HTML
- 下記サイトみたいな大胆なデザインとなる背景をcssでレイアウト設定する
下記サイトみたいな大胆なデザインとなる背景をcssでレイアウト設定するには？ お世話になります。css初心者です。 このサイトみたいに、http://www.blackcatpedals.com/pedal_od_1.html (1)ヘッダー部分のデザインがコンテンツ部分にまで関わっている（参考サイト→top左上のエフェクター写真みたいなデザイン） (2)コンテンツ枠の背景（参考サイト→情報が表示される部分＝中央白部分／両サイドに暗い壁のような背景）をtopから表示させ、情報量でheightが可変してもコンテンツ枠全体が違和感なく表示されている といったデザインのwebサイトを制作したいと考えています。 自分は全体の背景を#bodyにbackground-image no-repeatで表示していますが、#contensのbackground-colorを指定すると、ヘッダーからコンテンツ部分にまで関わっている上部のデザインが塗りつぶされてしまいます。 かといって、background-colorを指定しないと、背景が切れてしまいレイアウトが崩れます。これを解決するにはどうしたらよいのでしょうか？ 参考サイトはどのようにcssを組んでいるのでしょうか？ どなたか教えてください、よろしくお願いします。
- ベストアンサー
- HTML
- CSSのborderが実際の領域より上に表示される
お世話になります。 CSSのborder-bottom指定のことでどうしても分からないことがあります。 div#contensにborder-bottom指定をしてその直下のdiv#footerと区別したいと考えています。 本当はdiv#footerにborder-top指定すればいいのでしょうが、footerはbackground-imageが2500pxあり、border-topすると、2500px分表示されます。 実際のコンテンツ領域は800px分なので、800pxだけのborderがほしいのです。 ところが、div#contensにborder-bottom指定すると、実際の情報量より上にborderが表示されます。これはどうしてでしょうか？ いろいろ考察したところ、どうやらmin-height:800px;の指定が原因で適用されているようです。min-heightはページによって情報が少ない場合でもある程度の高さを確保するために設定していますが、800px以上の情報量となる場合は、その情報量に沿ってきちんとborderも可変してほしいのです。解決法をどうか教えていただけないでしょうか。 よろしくお願いします。 CSS--- body { background-image:url(../images/site-body.jpg);←この画像が2500pxあります。 background-position:top center; background-repeat:no-repeat; background-color:rgb(237,232,195); margin:0px; } div#header { width:800px; height:150px; margin-left:auto; margin-right:auto; } div#contens { border-bottom:1px dotted #333333; width:800px; height:auto !important; min-height:800px; margin-left:auto; margin-right:auto; } div#footer { background-image:url(../images/footer-bg2.jpg) ;←この画像も2500pxあります。 background-repeat:no-repeat; background-position:bottom; height:100px; } HTML--- <body> <div id="header"> ～省略～ </div> <div id="contens"> <div id="leftmenu"> ～省略～ </div> <div id="rightmenu"> ～省略～ </div> </div> <div id="footer"> ～省略～ </div> </body>
- ベストアンサー
- ホームページ作成ソフト
- CSSでのレイアウトが崩れてしまうんです。
お世話になります。ＣＳＳビギナーなのですが、どうかご教授ください。800pxの画面のセンター表示のサイトを作りたいのですが、divでheader800px/container800px/contents600px（contensの中にleftmenu150px/centermenu450px/footer600pxとさらにdiv分けしてあります。）/leftmenu200pxという具合にレイアウトしたいのですが、leftmenuがcontensの右横にきてくれません。footerの下に表示されます。さらに言うとcontens自体が真ん中に表示されてしまいます。float:leftを指定するとブラウザ画面の左側にいってしまいますし...。これはどうしてでしょう？素人ゆえ基本的なことを見落としているかもしれませんがどなたか教えていただけないでしょうか？ ■HTML </head> <body> <div id="header">省略</div> <div id="container">省略</div> <div id="contens"> <div id="leftmenu">省略</div> <div id="centermenu">省略</div> <div id="footer">省略</div> </div> <div id="rightmenu">省略</div> </body> </html> ■CSS div#header { padding-top:0px; width:800px; margin-left:auto; margin-right:auto; background-color:#00CC00; } div#container { width:800px; margin-left:auto; margin-right:auto; } div#contens { width:600px; margin-left:auto; margin-right:auto; } div#leftmenu { width:150px; float:left; } div#centermenu { width:450px; float:left; margin-left:auto; margin-right:auto; background-color:#FFFFFF; } div#footer { float:left; width:600px; padding-top:50px; } div#rightmenu { width:200px; float:right; background-color:rgb(147,182,110); padding-bottom:5px; } body { background-attachment:scroll; background-color:#FFFFFF; background-image:url(../image/bg.jpg); background-repeat:no-repeat; background-position:center top; }
- ベストアンサー
- ブログ
- CSSでのレイアウトについて
CSSやHTMLのテンプレートをカスタマイズ中です。 分からないことだらけですが構成としては BODYと#maincontで分かれていまして、 画面中央に四角いコンテンツ。 サイドに背景画像が表示されるようにしたいです。 BODY部分に背景画像のbackground指示を入れると 画面一面中央コンテンツ上にも背景画像が表示されてしまいます。 画像がかぶっている中央コンテンツの文章や 外枠は画像の上から表示されて読めます。 一枚構成になっているような状態だと思うのです。 枠外背景にのみ画像を表示する方法を教えてください。 画像なしの状態では閲覧に問題はないです。 下記CSSを一部抜粋します。 どなたかご親切な方。 分かりやすくお願いします。 BODY{ font-size:～～; font-family:～～～; color:#～～～; border-top:5px #000000; solid; background-image: url(～～～); background-repeat: repeat; } #maincont{ width:600px; margin:auto; padding:30px border-left:3px #～～～ dotted; border-right:3px #～～～ dotted; }
- ベストアンサー
- その他（インターネット・Webサービス）
- ドリームウィーバで背景画像が表示できない
デザインでは表示されているのですが、 ブラウザで確認しようと思っても背景画像が表示されません。 コードです。 <style type="text/css"> <!-- body { background-image: url(../../%E3%83%87%E3%82%B9%E3%82%AF%E3%83%88%E3%83%83%E3%83%97/%E5%95%86%E5%93%81%E5%86%99%E7%9C%9F/top10.JPG); background-color: #000033; background-repeat: no-repeat; background-position: 50%; } #contents { height: 454px; width: 600px; margin: auto; margin-top: 18px; } --> </style> </head> <body> <div id="contents"> <h1></h1> <h2></h2> </div> </body> </html> なにが原因なのでしょうか？ 教えてください。
- ベストアンサー
- ホームページ作成ソフト
- CSSレイアウトについて
はじめまして。 個人用サイトを趣味で制作しています。 下記のようなイメージを、html×cssで組みたいのですが、 うまくいきません。 なんとかsafariで、再現したいのですが、問題点がわかりません。 ※IE6は、きっと無理ですよね。 どなたか原因分かる方教えていただけると幸いです。 ■イメージ http://www.turn.jp/design.jpg ■現状サイト http://www.turn.jp/ ■htmlソース <body> <div id="container"> <div id="wrapper"> <div id="contents"> <div id="logo"> <h1><img src="images/logo.png" width="200" height="164" alt="2lemma" /></h1> <h2><img src="images/menu.png" width="447" height="79" alt="blog" /></h2> </div> <div id="footer"> <p>Copyright©2010 All Rights Reserved.</p> </div> </div> </div> </div> </body> </html> ■CSS @charset "Shift_JIS"; /* CSS Document */ }#container { margin: auto; width: 1000px; background-color: #959500; } #wrapper { height: 437px; width: 960px; background-image: url(../images/design.jpg); background-repeat: no-repeat; margin: 20px; } #logo { text-align: right; height: 164px; width: 200px; margin-right: 245px; margin-top: 170px; float: right; } #footer { clear: both; color:#FFFFFF; font-size:8px; padding-top: 10px; }
- 締切済み
- その他([技術者向] コンピューター)
- htmlのデザインについて質問です。
htmlのデザインについて質問です。 cssに色々とコンテンツの位置を指定しています。 そして次のような記述をしました。 div#～ { width: 250px; height: 460px; background-image: (画像のURL);} このように画像を使うと、指定した位置に画像が表示されるのですが、 div#～ { width: 250px; height: 460px; border-style: solid; } と、枠にすると何故か指定した位置からズレるんです。 なぜなんでしょうか？ 分かる方がいたら教えて下さい。
- ベストアンサー
- HTML
- 1カラムのリキッドレイアウトについて。
１カラムのサイトを作っています。 背景に一枚の写真を表示し、ブラウザのサイズに合わせて可変させたいのですがうまくいきません。 【html】 <body> <div id="wrapper">→背景画像を表示 <div id="logo"></div> <div id="travel"></div> <div id="member"></div> <div id="bbs"></div> →これらはボタン。絶対配置。 </div> </body> 【css】 #wrapper{ width:100%; height:100%;(→これらの数値を入れてみたのですがうまくいきません・・・) background:url(../images/1000.jpg) no-repeat; position:relative; } #logo{ height:120px; width:360px; position:absolute; top:50px; left:50px; background:url(../images/logo.gif); } #travel{ height:80px; width:200px; position:absolute; top:250px; left:400px; background:url(../images/travel.gif); } #member{ height:75px; width:200px; position:absolute; top:400px; left:100px; background:url(../images/member.gif); } #bbs{ height:80px; width:200px; position:absolute; top:300px; left:700px; background:url(../images/bbs.gif); } ヘッダー、フッターを作らず、#wrapperの中に#logo、#travel、#member、#bbsはボタンになるのですが、これらを絶対配置で配置しています。 文章などのコンテンツがないため、背景画像が全画面で表示されないのです。 どのようにしたら意図する表示が可能でしょうか？ できればFlashは使いたくないのでcssやjavascriptを使用した方法を教えていただきたいです。
- 締切済み
- CSS
お礼
ご指摘の通り修正しましたらうまくいきました！まさに自分の思い描いている通りになりました！本当にありがとうございます！感謝します。