右から距離をとってfixedを使うと画像が消える
- 画像(幅36px高さ136px)を上から0px右から300pxの位置で固定して表示させる方法について質問です。
- 現在のソースでは画像が消えてしまうため、正しい方法を知りたいです。
- rightの300pxを0pxにすると表示されますが、どうしても右から300pxの距離をとりたいです。
- ベストアンサー
右から距離をとってfixedを使うと画像が消える
画像(幅36px高さ136px)を上から0px右から300pxの位置で固定して常に表示させたい(ブラウザの大きさを変更しても付いてくるようにしたい)のですが、以下のソースでは画像が消えてしまいます。 どのようにすれば実現できますでしょうか？ 【html】 <div id="test"><a href="http://yahoo.co.jp"></a></div> 【CSS】 #test a { background-image: url("../image/test.png"); background-position:top right; background-repeat:no-repeat; background-attachment:fixed; width:36px; height: 136px; position:fixed; top:0px; right: 300px; } ※ちなみにrightの300pxを0pxにすると表示されますが、どうしても右から300px距離をとりたいです。
- yuki_tigers
- お礼率55% (31/56)
- CSS
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
説明すると a[href="http://yahoo.co.jp"]{ 属性セレクタ[詳細度 0 0 1 1] href属性にこの値を持つa要素 display:block; ブロック要素に変更しておく background-image: url("./images/test.png"); 背景画像の指定 width:36px;height: 136px; a要素の幅と高さ(blockに指定してあるので ) position:fixed; ウィンドウ表示領域に対してa要素を固定 top:0px;right: 300px; a要素の位置を指定する。!!!A要素の位置 text-indent:-20em; 内容を左に-20文字ずらす overflow:hidden; 指定サイズからはみ出したものの表示 background-position:top right;× background-position:top left;○ イニシャル値(初期値)なので書かなくて良い ⇒Initial: 0% 0%( http://www.w3.org/TR/1998/REC-CSS2-19980512/colors.html#propdef-background-position ) background-repeat:no-repeat; 狭いので書かなくて良い background-attachment:fixed; ウィンドウに対して固定・・ ＞※ちなみにrightの300pxを0pxにすると表示されますが、どうしても右から300px距離をとりたいです。 right: 300px;の値を0～30pxくらいに少しずつ変えれば原因はわかったはずです。 もちろん <p id="#YahooLogo"><a href="http://yahoo.co.jp">テスト</a></p> とでもして、 #YahooLogo{ width:36px;height: 136px; position:fixed; top:0px;right: 300px; overflow:hidden; } #YahooLogo a{ display:block; hegiht:100%;width:100%; background-image: url("./images/test.png"); text-indent:-20em; } でもよいが、(構造上)意味ないのに、デザインのためだけにidを振るのには少し抵抗があるし、その分、HTML・スタイルシートが煩雑になる。
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
いえテスト済みです。 ⇒Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html# ) でチェック済みのHTML4.01strictです。 [全文] タブは＿に置換してあるので戻すこと <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- a[href="http://yahoo.co.jp"]{ display:block; background-image: url("./images/test.png"); width:36px;height: 136px; position:fixed; top:0px;right: 300px; text-indent:-20em; overflow:hidden; } --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p><a href="http://yahoo.co.jp">テスト</a></p> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-10</dd> ＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt> ＿＿＿<dd>2012-08-10 12:00:00 (JST)</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>
お礼
うまくいきました。本当にありがとうございます！ ご丁寧に説明して下さったおかげです。本当にありがとうございました！
補足
ご丁寧なご回答ありがとうございます。 頂いた内容で確認させて頂き、夜間に改めて報告します。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
a[href="http://yahoo.co.jp"]{ display:block; background-image: url("./images/test.png"); width:36px;height: 136px; position:fixed; top:0px;right: 300px; }
補足
ご回答ありがとうございました。 しかし、教えて頂いた通りに入力しましたが、画像は表示されませんでした。 やはり右から距離をとってのfixed使用は難しいものなのでしょうか？ 他に解る方がいましたら、ご回答お願いします。
関連するQ&A
- 壁紙＋画像（右・左・上・下）
これなんですが… どなたか教えていただけませんか？ ↓は壁紙の色に（右に縦に画像）が並んで表示されます。 </STYLE> </style> <STYLE type="text/css"> <!-- BODY { background-color: #D6D6AD; background-image: url("○○○jpg"); background-repeat:repeat-y; background-attachment: fixed; background-position: right; } --> </STYLE> あと… ↓のをどのように入れれば上の1枚の壁紙に 一度に４ヵ所画像を並べられますか？ （左に縦に画像を並べる） background-color: #D6D6AD; background-image: url("○○○.jpg"); background-repeat: repeat-y; background-attachment: fixed; background-position: left; (上に画像を横に並べる） background-color: #D6D6AD; background-image: url("○○○.jpg"); background-repeat: repeat-x; background-attachment: fixed; background-position: top; （下に画像を横に並べる） background-color: #D6D6AD; background-image: url("○○○.jpg"); background-repeat: repeat-x; background-attachment: fixed; background-position: botom; 宜しくお願いします。m( _"_ )mペコ♪
- ベストアンサー
- HTML
- 本当に困っています。html/cssについて。
html/cssについて。画像が表示されません。 html/cssを手打ちしてコーディングしています。 一部の画像がどうしても表示されず、困っています。 まず、背景画像はJavaScriptで５枚の画像からランダムで表示。 次に帯状のヘッダ画像(top_header.gif)を最上部に横方向にリピートして表示。 同じくフッダ画像(top_footer.gif)を最下部に横方向にリピートして表示。 そして左上にホームボタン画像(TOP_s1.gif)を配置。 次が問題になっている箇所です。 ボタン画像(button_r1_c1_s1.gif[width 136px heignt 36px])を上から0px,右から500pxの位置 に、ブラウザの大きさに関わらず常に表示される(fixed)ようにしたいのですが、 画像が表示されなくなります。ちなみに透明のままですが、ブラウザで確認するとタブの遷移はできます。 これもちなみにですが、上から0px,右からも0pxの位置に指定すると表示されます。 右から0pxだと表示されるが、それ以外だと表示されません。他の画像が邪魔しているのなのか、原因がわかりません。 同様にフッダ画像(top_footer.gif[width 1681px height 42px])も表示されていません。 これはheightを1000pxくらいで指定すれば、なぜか表示されるのですが、邪道な気がしています。 どなたかボタン画像(button_r1_c1_s1.gif)とフッダ画像(top_footer.gif)の表示方法をご指導願います。 よろしくお願いします。 【html】 <body> <SCRIPT language="JavaScript"> bgc = new Array(); bgc[0] = "url(../image/bg1.jpg)"; bgc[1] = "url(../image/bg2.jpg)"; bgc[2] = "url(../image/bg3.jpg)"; bgc[3] = "url(../image/bg4.jpg)"; bgc[4] = "url(../image/bg5.jpg)"; n = Math.floor(Math.random()*bgc.length); document.body.style.backgroundImage = bgc[n] </SCRIPT> <div id="container"> <div id="top_header"></div> <div id="top_footer"></div> <div id="TOP_s1"><a href="#"></a></div> <div id="News"><a href="#"></a></div> </div> </body> 【CSS】 @charset "utf-8"; /* CSS Document */ body{ padding-top: 0; padding-right: 0; padding-left: 0; margin-top: 0; margin-right: 0; margin-left: 0; overflow-y: hidden; overflow-x: hidden; } #container{ height:100%; width:100%; } #top_header{ background-image: url("../image/top_header.gif"); height: 34px; background-position: left top; background-repeat: repeat-x; background-attachment: scroll; z-index: 1; } #top_footer{ <!-- 問題箇所２ --> background-image: url("../image/top_footer.gif"); height: 42px; <!-- 1000pxくらに表示すると表示される --> bottom: 0; background-position: left bottom; background-repeat: repeat-x; background-attachment:fixed; z-index: 2; } #TOP_s1 a { background-image: url("../image/TOP_s1.gif"); height: 194px; width:332px; background-position: left top; background-repeat:no-repeat; background-attachment: scroll; position:absolute; z-index: 3; top:0; left: 0; } #TOP_s1 a:hover { background-image: url("../image/TOP_s2.gif"); } #News a { <!-- 問題箇所１ --> background-image: url("../image/button_r1_c1_s1.gif"); height: 136px; width:36px; background-position: right top; background-repeat:no-repeat; background-attachment: fixed; position:absolute; z-index: 3; top:0px; right: 500px; <!-- 500pxを0にすればなぜか表示されます --> }
- ベストアンサー
- CSS
- 時間帯によって背景画像を変える
タイトル通りなのですが、なかなかうまくいきません・・・。 <BODY style="background-image:url(test.gif);background-repeat:no-repeat; background-attachment:fixed;background-position:bottom right;"> スタイルを使って右下に背景画像を表示しています。このtest.gifを時間帯によって変えたいです。 自分なりにこのようにしてheadタグの中に埋め込みましたがうまくいきません。 <SCRIPT LANGUAGE="JavaScript"> <!--- function geth(t){ if (t<=5) document.write("<BODY style='background-image:url(test1.gif);background-repeat:no-repeat; background-attachment:fixed;background-position:bottom right;'>"); else { if (t<=11) document.write("<BODY style='background-image:url(test2.gif);background-repeat:no-repeat; background-attachment:fixed;background-position:bottom right;'>"); else { if (t<=17) document.write("<BODY style='background-image:url(test3.gif);background-repeat:no-repeat; background-attachment:fixed;background-position:bottom right;'>"); else { if (t<=23) document.write("<BODY style='background-image:url(test4.gif);background-repeat:no-repeat; background-attachment:fixed;background-position:bottom right;'>"); }}} } //---> </SCRIPT> <SCRIPT LANGUAGE="JavaScript"> <!--- h = new Date(); geth(h.getHours()); //---> </SCRIPT> <BODY BACKGROUND='test.gif'>という普通の背景の表示の仕方ならうまくできました。スタイルはheadの中では使えないのでしょうか・・・？どのようにすればうまくいくでしょうか？JavaScriptに関してはほとんど無知ですがよろしくおねがいします。 ※意味不明なことを言っていたらすみません。
- ベストアンサー
- JavaScript
- html/css について質問です。
現在、htmlとcssを勉強しながら、トップページのコーディングしています。 以下の処理を行っています。 〇一番上に[幅136px高さ34px]のヘッダ画像を横方向にリピートして、background-attachmentはscrollで固定。上や左や右は余白なしにしたい。 〇一番下に[幅168px高さ42px]のフッダ画像を横方向にリピートして、background-attachmentはfixedでブラウザの下部分に常についてくるようにしたい。 〇javaScriptでランダムにトップの画像を表示している。 しかし、３点問題があります。 ●一番上の画像について、background-position: left bottom;にしても、ブラウザ等で確認してみると、 上や左に5px程度の余白(後ろの背景画像が隙間から見えている)ができてしまいます。 marginやpaddingを追加して0にしても、余白は埋まりません。余白を埋めてブラウザの上や左を埋めるにはどうすればよいでしょうか？ ●フッダの画像が、下にいけば消えてしまいます。CSSでheight: 42px;という設定をしているのですが、 この範囲がブラウザを大きくすると消えて見えなくなります。 だからといって、heightを設定しないと全くフッダ画像が表示されなくなります。消えずに常に表示されるようにするにはどうすればよいでしょうか？ ●またjavascriptで背景画像を表示させているにも関わらず、フッダ画像やヘッダ画像を背景画像のような記述でコーディングしてしまっています。これは普通の画像を右方向へリピートさせる方法がわからなかったため、background-repeat: repeat-x;というコードを書いてしまっています。このようなコーディングはやはり適当ではないでしょうか？ どなたかご指導お願いします。 [html] <body> <SCRIPT language="JavaScript"> bgc = new Array(); bgc[0] = "url(../image/bg1.jpg)"; bgc[1] = "url(../image/bg2.jpg)"; bgc[2] = "url(../image/bg3.jpg)"; bgc[3] = "url(../image/bg4.jpg)"; bgc[4] = "url(../image/bg5.jpg)"; n = Math.floor(Math.random()*bgc.length); document.body.style.backgroundImage = bgc[n] </SCRIPT> <div id="container"> <div id="top_header"></div> <div id="top_footer"></div> </div> </body> [css] #container{ width:100%; height:100%; } #top_header{ background-image: url(../image/top_header.gif); height: 34px; background-position: left top; background-repeat: repeat-x; background-attachment: scroll; z-index: 1; } #top_footer{ background-image: url(../image/top_footer.gif); height: 42px; bottom: 0; background-position: left bottom; background-repeat: repeat-x; background-attachment:fixed; z-index: 2; }
- ベストアンサー
- CSS
- 文字の両側に画像を配置するCSSのやり方
●AAAAA● ●BBBBB● ●CCCCC● 上記のように文字の両側に●画像をCSSにて配置したいのですが。 HTML <div class=R> <a href=".html">AAAAA</a> <a href=".html">BBBBB</a> <a href=".html">CCCCC</a> </div> CSS div.R a { background-image: url("●.gif"); background-repeat: no-repeat; background-position: left center; margin-right: 12px; padding-left: 7px } この状態では、左に●は表示されるます。 もうひとつ重ねればとおもい <div class=R>の中に<div class=R2>なるものを配置し、 div.R2 a { background-image: url("●.gif"); background-repeat: no-repeat; background-position: right center; margin-left: 12px; } を重ねてみたんですが、うまくいきません。 右にも表示させてい場合は、どのような記述にすれば表示されるのでしょうか？
- ベストアンサー
- CSS
- 2つのDIVを中央と右に横並びにしたい
いつも大変お世話になっております。 wordpressのヘッダー個所に、真ん中にロゴ画像、右手にソーシャルメディアの画像を横並びに配置したいのですが、うまくいきません。 Topというdivの中に「logo」と「social」という２つのdivを入れ、下記のcss、htmlで制作すると、ロゴは中央に配置され、ソーシャルメディアの画像は右に寄るのですが、 横の配置がソーシャルメディア画像が右下にきてしまい、うまくいきません。 是非どなたかご教授いただけますと、非常に助かります。 <div id="top"> <div id="logo"></div> <div id="social"> <div class="fb"></div> <div class="twitter"></div> </div> </div> #top { height: 36px; } #logo { background-image: url(images/logo.png); background-repeat: no-repeat; margin: 0 auto; height: 36px; width: 397px; } #social { float:right; height: 36px; width:56px; } #social .fb { background-image: url(images/fb.png); background-repeat: no-repeat; padding-right: 3px; height: 26px; width: 25px; float:right; } #social .twitter { background-image: url(images/twitter.png); background-repeat: no-repeat; padding-right: 3px; height: 26px; width: 25px; float:right; }
- ベストアンサー
- CSS
- 壁紙（画像の固定）
http://dsc.jugem.jp/?tid=23 ↑のテンプレを使用するつもりですが、このトップに画像をおきたいのですが、 例えば、壁紙をダウンロードしてきて貼り付けたら、一つの画像がいっぱい反映されるのです。 っていう事は固定すべきですよね？ htmlで<STYLE type="text/css"> <!-- BODY { background-image : url("画像URL"); background-attachment: fixed; background-position: 100% 100%; background-repeat: no-repeat ; } --> </STYLE> ↑これは反映されなくて、ｃｓｓだと反映されます。 しかしｃｓｓに、 background-image:url(画像ＵＲＬ) background-repeat:no-repeat; background-position:right bottom; ↑こう入れても反映されません。何故でしょうか？どういうタグを使えばいいのですか？
- 締切済み
- ブログ
- 固定背景画像と画面幅について
初心者のため、分かりづらい質問になると思いますがお許しください。 background-repeat:no-repeat; background-position:right; background-attachment:fixed; 上記のようなCSSで背景画像を固定しています。 画面幅は918pxで設定していますが、これをプレビューで918px以上に伸ばすと、背景画像がどんどん右にズレていってしまいます。 画面環境はそれぞれだと思うので、大きな画面で見た方が背景画像が切れてしまうのを避けたいです。 画面幅918pxで固定をしたいのですが、どのようにすればいいのでしょうか？ 何か補足事項があればすぐに追記します。 よろしくお願いします。
- ベストアンサー
- CSS
- 画像をずらしてhoverしたいのですがIE7では×
一枚の画像をずらしてロールオーバーさせてナビをつくったのですが、ＩＥ7以外の全ブラウザではうまくいきますが、唯一IE7だけはうまくいきません。 5つのナビボタンのうち、左3つがポイントしても矢印と画像が変わりません。 ですが、それはトップページのナビだけの話で、他のページは普通にロールオーバーします。 ナビの部分はDreamweaverのテンプレートで編集不可能領域に含まれてますので、全ページのコードは同一です。 以下、コードです。 <!--HTML--> <body> <div id="container"> <div id="hedder"> <div id="toprogo"><a href="index.html"><img src="○○"/></a></div> <div id="main_image"><img src="○○"/></div> <div id="navi"> <div id="top"><a href="index.html"/></a></div> <div id="kodawari"><a href="particular.html" /></a></div> <div id="catalog"><a href="goods-catalog.html" /></a></div> <div id="from_producer"><a href="index.html" /></a></div> <div id="contact"><a href="mailto:" /></a></div> </div> </div> </div> </body> <!--ここからcss--> body { font-family:"ＭＳ ゴシック", "MS Gothic", "Osaka－等幅", Osaka-mono, monospace; color: #473906; background-color: #fafde1 ; } img { border: none; } a { color: #473906; text-decoration: none; } a:hover { color: #ff0000; } #container { width: 950px; margin: auto; } #hedder { widht: 950px; height: 380px; } #top_logo {margin-top: 10px; } #main_image { width: 950px; height: 300px; margin-top: 10px; } #navi { margin-top: 20px; /margin-top: 0 ; } #top a { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: 0px 0px; display: block; float: left; } #top a:hover { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: 0px -50px; display: block; float: left; } #kodawari a { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: -190px 0px; display: block; float: left; } #kodawari a:hover { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: -190px -50px; display: block; float: left; } #catalog a { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: -380px 0px; display: block; float: left; } #catalog a:hover { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: -380px -50px; display: block; float: left; } #from_producer a { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: -570px 0px; display: block; float: left; } #from_producer a:hover { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: -570px -50px; display: block; float: left; } #contact a { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: -760px 0px; display: block; float: left; } #contact a:hover { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: -760px -50px; display: block; float: left; } つめて見にくくなっていますが、お願いいたします。
- ベストアンサー
- 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
お礼
うまくいきました。本当にありがとうございます！ ご丁寧に説明して下さったおかげです。本当にありがとうございました！