Windows 7でbackground-position:leftのピクセルを上げると画像が下に移動する理由は?
- Windows 7の環境でHTML 5のChormeを使用している際、background-positionのleftのピクセルを上げると、画像が普通は右に移動するはずですが、なぜか下に動いてしまいます。
- 画像を動かすことができるmarginで問題は解決できましたが、その現象の理由が知りたいです。
- CSSのコードを確認したところ、background-positionの設定に加えてpadding-leftも設定されています。これが画像が下に動く原因かもしれません。
- ベストアンサー
background-position;left
Windows 7 HTML 5 Chorme の環境ですが、 imageをbackgroundにしているんですが、 background-position のleft のピクセルを上げたら、 このimageが普通は右に移動してくれそうなもんなんですが なぜか下に動いてしまいます。 画像を動かす事自体はmarginで動かせば解決したのですが、 下に行く現象の理由を知っておきたいです。 なぜですか？ cssのコードは以下の通りです。 { background-image : url (img ~) background-repeat : no – repeat background-position left 5px padding-left : 20px }
- KAIJI-000
- お礼率45% (225/492)
- HTML
- 回答数1
- ありがとう数6
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
＞background-position のleft のピクセルを上げたら、このimageが普通は右に移動してくれそうなもんなんですがなぜか下に動いてしまいます。 違います。 background-position left 5px は、左端で上から5pxと言う意味です。 「少なくとも1つの値がキーワードでない場合は、最初の値は水平方向の位置を表し、2番目は垂直位置を表す。( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/colors.html#propdef-background-position )」 この仕組みは、他のプロパティでも共通な方法なので間違えるはず無いですけど background-repeat : no – repeat これも間違い!!、no-repeatです。 background-position left 5px 左0%、上から5pxと言う意味 とにかく仕様書を最初から通して読んでおきましょう。
関連するQ&A
- CSSでドロップシャドウ
CSS で写真の周りにふちと影を付けたいのですが Firefox1.5 だとうまくいくのですが、 IE6 だと padding: 4px; が反映されず、ふちの無い写真になってしまいます。どなたかコツを教えていただけないでしょうか？ --HTML-- <div class="img-shadow"> <img src="./1.jpg" alt="" width="200" height="150" /> </div> --CSS-- .img-shadow { float:left; background: url(shadowAlpha.png) no-repeat bottom right !important; background: url(shadow.gif) no-repeat bottom right; margin: 10px 0 0 10px !important; margin: 10px 0 0 5px; } .img-shadow img { display: block; position: relative; background-color: #ffffff; border: 1px solid #999999; margin: -6px 6px 6px -6px; padding: 4px; ←ここが怪しい }
- 締切済み
- HTML
- リストタグでのナビゲーションボタンで、背景画像が表示されません。
winIE6では正常に表示されるのですが、 safariだとまったくcssが無視され、横並びにもならない始末です(^_^;) どなたかご教授お願いいたします。 ■html <div id="header"> <ul id="headerMenu"> <li id="home"><a href="index.html">ホーム</a></li> <li id="sitemap"><a href="sitemap.html">サイトマップ</a></li> <li id="recruit"><a href="recruit.html">リクルート</a></li> <li id="contact"><a href="contact.html">お問合せ</a></li> </ul> </div> ■css #header { width:100%; height:107px; margin:0px; padding:0px; position: relative; font-size:12px; background:url("img/top.gif") no-repeat; } #headerMenu{ list-style-type:none; padding:0px; margin:6px 0px 0px 532px; } #headerMenu li { display:inline; padding:0; margin:0px; float:left; } #headerMenu a { display:block; text-decoration:none; text-indent:-5000px; height:25px; } #home { display:block; background-image: url("img/topmenu_01.gif"); background-repeat: no-repeat; width:63px; background-position:0px 0px; } #home a:hover { background-image: url("img/topmenu_01.gif"); background-repeat: no-repeat; background-position:0px -25px; } #sitemap { background-image: url("img/topmenu_02.gif"); background-repeat: no-repeat; width:90px; background-position:0px 0px; } #sitemap a:hover { background-image: url("img/topmenu_02.gif"); background-repeat: no-repeat; background-position:0px -25px; } #recruit { background-image: url("img/topmenu_04.gif"); background-repeat: no-repeat; width:82px; background-position:0px 0px; } #recruit a:hover { background-image: url("img/topmenu_04.gif"); background-repeat: no-repeat; background-position:0px -25px; } #contact { background-image: url("img/topmenu_05.gif"); background-repeat: no-repeat; width:82px; background-position:0px 0px; } #contact a:hover { background-image: url("img/topmenu_05.gif"); background-repeat: no-repeat; background-position:0px -25px; }
- 締切済み
- CSS
- paddingを指定すると、marginが広がります。
はじめまして。 現在CSSでHPを作成しているのですが、タイトルにあるように、paddingを指定すると、marginが広がってしまいます。 topのpaddingを指定するとtop-marginが・・・ bottomを指定すると・・・ のような感じです。 原因と解決方法を教えていただけないでしょうか？ #news { width: 180px; height: 110px; background-image: url(img/news.gif); margin-top: 15px; padding-top: 30px; background-repeat: no-repeat; padding-bottom: 20px; padding-left: 20px; } レフトに配置しています。
- ベストアンサー
- HTML
- firefoxでfloaｔの調整の仕方CSS
CSSで下記(div)のなかにBOXを3つ並べました、 ie6以上では思い通りに表示されるのですがFireFox（バージョン3.5.3）では一番右端にくるBOXが左端のBOXの下に入ってしまいます。 どなたか解決策を教えていただけますでしょうか？ ----ソース部分--- <div class="setbox1"> <div id="rent1"><a href="eee.html"><img src="img/trans_rent.gif" width="234" height="69" /></a></div> <div id="rent2"><a href="aaa.html"><img src="img/trans_rent.gif" width="234" height="69" /></a></div> <div id="rent3"><a href="ccc.html"><img src="img/trans_rent.gif" width="234" height="69" /></a></div> </div> ----以下CSS---- .setbox1{ margin-left : 25px; width : 750px; } #rent1{ margin-top : 20px; margin-left : 0px; float : left; width : 234px; } #rent1 a{ background-image : url(img/rent1.gif); display : block; line-height : 0px; background-repeat : no-repeat; width : 234px; height : 69px; } #rent1 a:hover{ background-position : left bottom; } #rent1 img{border-width : 0px 0px 0px 0px; } #rent2{ margin-left : 0px; float : left; margin-right : 22px; padding-left : 22px; width : 234px; margin-top : 20px; } #rent2 a{ background-image : url(img/rent2.gif); display : block; background-repeat : no-repeat; line-height : 0px; width : 234px; height : 69px; } #rent2 a:hover{ background-position : left bottom; } #rent2 img{border-width : 0px 0px 0px 0px; } #rent3{ margin-top : 20px; margin-left : 0px; padding-left : 0px; } #rent3 a{ background-image : url(img/rent3.gif); line-height : 0px; background-repeat : no-repeat; width : 234px; height : 69px; display : block; } #rent3 a:hover{ background-position : left bottom; } #rent3 img{border-width : 0px 0px 0px 0px; }
- 締切済み
- HTML
- oveflow、margin等の表示について質問です
以下のようなhtml （XHTML 1.0 Transitional、文字コードはUTF-8） <body> <div id="wrapper"> <div id="container"> test </div> </div> </body> で、bodyにリピート有りの背景、wrapperにx軸にリピートの背景、containerにリピート無しの背景と背景色に白をcssで設定しました。 containerは中央揃えで上に35pxの空きをもたせたいのですが、containerに「margin-top:35px」とするとIE（6、7）では意図した通りに表示されるのですがfirefoxだとwrapperにも35pxの空きができてしまいbodyの方の背景が見えてしまうといった状態になりました。 containerのmargin-topを指定せず、wrapperに「padding-top:35px」を指定する、または、containerのmarginはそのままでwrapperに「overflow: hidden」を指定すると両方のブラウザで意図した通りに表示されました。 ただ、paddingを指定した方はわかるのですが、なぜoveflowで、しかもhiddenで解決できたのかが全くわかりません。個人的な感覚ではcontainerのmarginをいかす方法で進めたいのですが…。 変な質問ですが、なぜこれで解決できたのが教えていただけると助かります。根本的に間違っている点などもありましたらご指摘していただければ幸いです。説明下手ですが何卒、よろしくお願いいたします。 ---元のcss--- html,body { height: 100%; margin: 0px; padding: 0px; } body { background-image: url(../img/***1.jpg); background-repeat: repeat; background-position: left top; height: 100%; } #wrapper { background-image: url(../img/***2.jpg); background-repeat: repeat-x; margin: 0px; padding: 0px; width: 100%; } #container { background-color: #FFFFFF; background-image: url(../img/***3.jpg); background-repeat: no-repeat; background-position: left top; width: 850px; margin-right: auto; margin-left: auto; height: auto; min-height: 620px; margin-top: 35px; }
- ベストアンサー
- CSS
- ブロック要素の右下寄せ
添付されている画像のように、Aブロック要素内の右下にBブロック要素を配置したいです。 下記の記述だとFFではきちん表示されるのですが、IEでは表示すらされません。 どうしたらよいでしょうか？ *htmlの記述 <div id="box-a"> <div class="box-c"> <h2>見出し</h2> <p>内容</p> </div> <div class="box-c"> <h2>見出し</h2> <p>内容</p> </div> <div id="box-b"> <p>内容</p> </div> </div> *CSS #box-a{ margin:0; padding:50px 0; position:relative; background-image:url(../img/box-a.gif); background-repeat:no-repeat; background-position:left bottom; } #box-c{ margin:20px 120px 0px 200px; padding:10px; background-image:url(../img/box-c.gif); background-repeat:no-repeat; } #box-b{ position:absolute; right:0; bottom:0; margin:0; padding:0; width:150px; height:150px; background-image:url(../img/box-b.gif); background-repeat:no-repeat; }
- ベストアンサー
- CSS
- firefoxでcssを使った時背景画像が表示されない
CSSでfloatを設定し、その中のそれぞれに背景画像を表示しようとすると、上手くいきません。 背景画像も背景色も表示されません。 構文に間違いがあるのでしょうか？ それともそのような仕様なのでしょうか？ よろしくお願いいたします。 ###CSS### #container { width: 900px; background-image: url(images/back.jpg); background-repeat: no-repeat; } #header { width: 900px; } #contents { width: 748px; background-color: #FFFFFF; background-image: url(images/image.jpg); background-repeat: no-repeat; background-position: top; padding: 0px; margin-left: 76px; } #footer { clear: both; width: 748px; margin-left: 76px; } #sidebar { float: left; background-image: url(images/side.jpg); width: 180px; margin-top: 14px; background-color: #FFFFFF; } #main { float: right; width: 568px; padding: 0px; background-color: #FFFFFF; background-image: url(../images/image2.jpg);
- 締切済み
- HTML
- CSSで背景色のwidthが指定できません。
WebサイトのQ&Aのページを<dl>要素を使って作成しています。 質問項目には、background-imageだけを使い、 回答項目には、background-imageとbackground-colorを使っております。 それぞれの回答項目のbackground-colorのwidthを592pxで統一したいのですが、できません。 回答の文字数が少ないと、background-colorの横幅が足りなくなり、文字数が多いと592pxを超えてサイドバーと重複してしまいます。 かれこれ4時間くらい格闘しておりますが、きちんと表示できません。 ちなみに、dl、dt、ddの要素のうち、marginとpaddingはリセットCSSをしています。 以下に、該当するHTMLとCSSだけ書きました。 何がいけないんでしょうか？ もしくは、以下のコードだけではなく、親要素の属性や属性値とかが問題なのでしょうか？ <!-- HTML --> <dl> <dt class="questiontext_dt">ここで質問</dt> <dd class="question?dd">ここで回答してます</dd> </dl> /* CSS*/ .questiontext_dt { width:592px; padding: 0px 0px 0px 35px; margin: 0px 0px 10px 0px; font-size: 15px; color: #000000; display: inline; text-align: left; float: left; font-family: "ＭＳ Ｐゴシック",sans-serif; background:url(http://www.ok.com/img/question1.gif); background-repeat: no-repeat; } .questiontext_dd { width:592px; padding: 5px 0px 5px 35px; margin: 0px 0px 10px 0px; font-size: 15px; color: #000000; display: inline; float: left; font-family: "ＭＳ Ｐゴシック",sans-serif; background-color: #f5eabc; background-image:url(http://www.ok.com/img/question2.gif); background-position: left 5px; background-repeat: no-repeat; }
- ベストアンサー
- CSS
- backgroundで文字がうまくおさまらない
お世話になります、CSS初心者ですので、 質問内容に不明瞭な点がございましたら、ご容赦くださいませ。 上記のように、テキストで文字を書いてバックグラウンドさせたいのですが、 文字が画像から外れた位置に配置されたりしてしまいます。 尚、作った画像は4段重ねるように配置したいです。 解決策をご教授下さいませ。 （HTMLコード） <BODY> <div id="container"> <div id="header"> </div> <DIV id="main"> </div> <div id="left"> <p>軽量鉄骨プレハブ</p> <div class="left_keitetu"> <p class="left_keitetu"><a href="/seihin/top.htm">製品詳細</a><br> <a href="/sekou/01-keitetu/top.htm">施工一覧</a></p> </div></div> <div id="footer"> </div> </BODY> （CSSコード） div#container { width : 725px; margin : auto;} div#header { width : 725px; margin : auto;} div#main { width : 725px; margin : auto;clear : both; padding : 0 10px; } div#footer { width : 725px; margin : auto;clear : both; margin-bottom : 5px; background : url(img/footer_bg.gif) repeat-x; height : 55px; padding-top : 17px; } div#left { float : left; } div.left_keitetu { height : 80px; width : 170px; } p.left_keitetu { background : url(img/menu_keitetu.gif) no-repeat; padding-top : 30px; padding-left : 15px; }
- ベストアンサー
- CSS
- CSSのリストタグでメニューを作ってますがレイアウトが崩れます
CSSでリストタグを使ってメニューを作成してますが、Firefoxだとメニューの幅が広く表示され本文にかぶってしまいレイアウトが崩れてしまいます。ちなみにレイアウトは2段組です。 #menu{ text-align: left; width: 175px; float: left } #menu #text ul{ list-style-type: none; margin: 0; padding: 0; border-top: 1px solid white } #menu #text li{ background-image: url("../navi_yajirusi.gif"); background-repeat: no-repeat; background-position: left center; margin: 0; padding: 0; border-bottom: 1px solid white } #menu #text li a{ color: #fff; text-decoration: none; background-color: #1b328d; background-image: url("../navi_yajirusi.gif"); background-repeat: no-repeat; background-position: left center; display: block; padding: 10px 0 10px 10px; width: 175px } #menu #text li a:hover { color: #fff; background-color: #ff0; background-image: url("../navi_yajirusi.gif"); background-repeat: no-repeat; background-position: left center } どなたか詳しい方よろしくお願いいたします。
- 締切済み
- HTML
お礼
何度も回答有難うございます。
補足
スペルミスすいませんでした。